/* ════════════════════════════════════════════════════════════════
   NAN2-VARIABLES.CSS
   สำนักงานเขตพื้นที่การศึกษาประถมศึกษาน่าน เขต 2
   Design Tokens — แก้สีและ spacing ทั้งระบบจากที่นี่ที่เดียว
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ──────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────── */
  --font-main: 'Sarabun', sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ──────────────────────────────────────────
     PRIMARY — Navy Blue
     ────────────────────────────────────────── */
  --primary-950: #0d1f38;
  --primary-900: #162d50;
  --primary-800: #1d3a68;
  --primary-700: #204a82;
  --primary-600: #2558a0;
  --primary-500: #2e6ec4;
  --primary-400: #4e88d6;
  --primary-300: #7faee3;
  --primary-200: #b3cff0;
  --primary-100: #dce8f8;
  --primary-50:  #eff4fd;

  /* ──────────────────────────────────────────
     ACCENT — Gold
     ────────────────────────────────────────── */
  --gold-900: #5c3300;
  --gold-700: #9e5a06;
  --gold-600: #b86e0a;
  --gold-500: #d4810a;
  --gold-400: #e09628;
  --gold-300: #ecb154;
  --gold-200: #f4cc8c;
  --gold-100: #faeace;
  --gold-50:  #fdf5e6;

  /* ──────────────────────────────────────────
     NEUTRALS — Gray
     ────────────────────────────────────────── */
  --gray-950: #0f1117;
  --gray-900: #1a1e27;
  --gray-800: #252b36;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-150: #eff0f2;
  --gray-100: #f3f4f6;
  --gray-50:  #f9fafb;

  /* ──────────────────────────────────────────
     SEMANTIC COLORS
     ────────────────────────────────────────── */

  /* Success — Green */
  --success-800: #14532d;
  --success-700: #166534;
  --success-600: #16a34a;
  --success-500: #22c55e;
  --success-200: #bbf7d0;
  --success-100: #dcfce7;
  --success-50:  #f0fdf4;

  /* Warning — Amber */
  --warning-800: #78350f;
  --warning-700: #92400e;
  --warning-600: #b45309;
  --warning-500: #f59e0b;
  --warning-200: #fde68a;
  --warning-100: #fef3c7;
  --warning-50:  #fffbeb;

  /* Danger — Red */
  --danger-800: #7f1d1d;
  --danger-700: #991b1b;
  --danger-600: #dc2626;
  --danger-500: #ef4444;
  --danger-200: #fecaca;
  --danger-100: #fee2e2;
  --danger-50:  #fef2f2;

  /* Info — Blue (ต่างจาก primary เล็กน้อย) */
  --info-800: #1e3a8a;
  --info-700: #1d4ed8;
  --info-500: #3b82f6;
  --info-200: #bfdbfe;
  --info-100: #dbeafe;
  --info-50:  #eff6ff;

  /* ──────────────────────────────────────────
     SURFACE / BACKGROUND
     ────────────────────────────────────────── */
  --bg-page:       #f3f4f6;   /* พื้นหลังทั้งหน้า */
  --bg-surface:    #ffffff;   /* card, topbar, modal */
  --bg-subtle:     #f9fafb;   /* card footer, input bg */
  --bg-muted:      #f0f2f5;   /* hover state */

  /* ──────────────────────────────────────────
     SIDEBAR
     ────────────────────────────────────────── */
  --sidebar-bg:          #162d50;   /* primary-900 */
  --sidebar-bg-hover:    rgba(255,255,255,.07);
  --sidebar-bg-active:   rgba(255,255,255,.12);
  --sidebar-text:        rgba(255,255,255,.75);
  --sidebar-text-active: #ffffff;
  --sidebar-border:      rgba(255,255,255,.10);
  --sidebar-section:     rgba(255,255,255,.35);
  --sidebar-accent:      #e09628;   /* gold-400 */

  /* ──────────────────────────────────────────
     BORDER
     ────────────────────────────────────────── */
  --border-color:       #e5e7eb;   /* gray-200 — default */
  --border-color-dark:  #d1d5db;   /* gray-300 — เน้น */
  --border-color-light: #f0f2f4;   /* เบา */
  --border-focus:       #2e6ec4;   /* primary-500 */

  /* ──────────────────────────────────────────
     TEXT
     ────────────────────────────────────────── */
  --text-primary:   #1a1e27;   /* gray-900 — heading */
  --text-secondary: #374151;   /* gray-700 — body */
  --text-muted:     #6b7280;   /* gray-500 — caption */
  --text-hint:      #9ca3af;   /* gray-400 — placeholder */
  --text-invert:    #ffffff;   /* บนพื้นเข้ม */
  --text-link:      #2558a0;   /* primary-600 */
  --text-link-hover:#162d50;   /* primary-900 */

  /* ──────────────────────────────────────────
     LAYOUT DIMENSIONS
     ────────────────────────────────────────── */
  --sidebar-width:          240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height:           60px;
  --content-max-width:     1280px;
  --content-padding:         24px;
  --content-padding-mobile:  16px;

  /* ──────────────────────────────────────────
     SPACING SCALE
     ────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ──────────────────────────────────────────
     BORDER RADIUS
     ────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ──────────────────────────────────────────
     SHADOWS
     ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.11), 0 4px 8px rgba(0,0,0,.05);
  --shadow-xl: 0 16px 40px rgba(0,0,0,.13), 0 6px 12px rgba(0,0,0,.06);

  /* Focus ring */
  --shadow-focus-primary: 0 0 0 3px rgba(46,110,196,.25);
  --shadow-focus-danger:  0 0 0 3px rgba(239,68,68,.20);

  /* ──────────────────────────────────────────
     TRANSITIONS
     ────────────────────────────────────────── */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-in:   cubic-bezier(.4, 0, 1, 1);
  --ease-out:  cubic-bezier(0, 0, .2, 1);
  --dur-fast:  120ms;
  --dur:       180ms;
  --dur-slow:  300ms;

  /* ──────────────────────────────────────────
     Z-INDEX LAYERS
     ────────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-sidebar: 400;
  --z-topbar:  500;
  --z-modal:   600;
  --z-toast:   700;

}

/* ════════════════════════════════════════════════════════════════
   SCORE GRADE COLORS — ใช้กับผลคะแนน O-NET / NT / RT
   ใช้ผ่าน class .grade-a .grade-b .grade-c .grade-d
   ════════════════════════════════════════════════════════════════ */
:root {
  --grade-a-bg:     #dcfce7;
  --grade-a-border: #22c55e;
  --grade-a-text:   #166534;

  --grade-b-bg:     #dce8f8;
  --grade-b-border: #2e6ec4;
  --grade-b-text:   #204a82;

  --grade-c-bg:     #fef3c7;
  --grade-c-border: #f59e0b;
  --grade-c-text:   #92400e;

  --grade-d-bg:     #fee2e2;
  --grade-d-border: #ef4444;
  --grade-d-text:   #991b1b;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS (reference — ใช้ใน media queries)
   --bp-sm:  480px   มือถือขนาดใหญ่
   --bp-md:  768px   ไอแพด portrait
   --bp-lg:  1024px  ไอแพด landscape / laptop
   --bp-xl:  1280px  desktop
   ════════════════════════════════════════════════════════════════ */