:root {
  /* ========================================================
     1. TYPOGRAPHY SYSTEM
     Primary UI Font: LINE Seed Sans TH (Fallback: Noto Sans Thai, sans-serif)
     Code Font: JetBrains Mono
     ======================================================== */
  --font-sans: 'LINE Seed Sans TH', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Bootstrap Typography Overrides */
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);

  /* Line Heights Optimized for Thai Script Ergonomics */
  --lh-tight: 1.25;
  --lh-snug: 1.35;
  --lh-normal: 1.62;
  --lh-relaxed: 1.72;
  --lh-loose: 1.85;

  /* Responsive Fluid Type Scale (clamp) */
  --fs-hero: clamp(2rem, 3.8vw + 0.6rem, 3.1rem);
  --fs-h1: clamp(1.55rem, 2.5vw + 0.4rem, 2.2rem);
  --fs-h2: clamp(1.28rem, 1.8vw + 0.3rem, 1.75rem);
  --fs-h3: clamp(1.12rem, 1.2vw + 0.2rem, 1.4rem);
  --fs-h4: clamp(1.02rem, 0.8vw + 0.18rem, 1.2rem);
  --fs-body: clamp(0.92rem, 0.2vw + 0.88rem, 1rem);
  --fs-sm: clamp(0.82rem, 0.15vw + 0.8rem, 0.875rem);
  --fs-xs: 0.78rem;

  /* ========================================================
     2. COLOR PALETTE
     Theme: Teal × Emerald × Sky Blue (Modern EdTech & Coding)
     ======================================================== */
  --color-primary: #0D9488;        /* Teal */
  --color-primary-hover: #0f766e;  /* Dark Teal */
  --color-primary-light: #f0fdfa;  /* Ice Teal */
  --color-primary-glow: rgba(13, 148, 136, 0.22);

  --color-secondary: #083344;      /* Deep Teal/Slate */
  --color-secondary-light: #164e63;

  /* Accent Colors */
  --color-teal: #0D9488;
  --color-teal-dark: #0f766e;
  --color-teal-light: #f0fdfa;
  --color-emerald: #10B981;
  --color-emerald-dark: #059669;
  --color-emerald-light: #ecfdf5;
  --color-sky: #38BDF8;
  --color-sky-dark: #0284c7;
  --color-sky-light: #f0f9ff;

  /* Glow Accents */
  --color-glow-teal: rgba(13, 148, 136, 0.22);
  --color-glow-emerald: rgba(16, 185, 129, 0.24);
  --color-glow-sky: rgba(56, 189, 248, 0.25);

  /* Functional States */
  --color-success: #10b981;        /* Emerald */
  --color-success-light: #ecfdf5;
  --color-warning: #f59e0b;        /* Amber */
  --color-warning-light: #fffbeb;
  --color-danger: #ef4444;         /* Rose / Red */
  --color-danger-light: #fef2f2;
  --color-info: #0284c7;           /* Sky Blue Dark */
  --color-info-light: #f0f9ff;

  /* Surfaces & Backgrounds */
  --color-bg: #f8fafc;             /* Slate 50 */
  --color-surface: #ffffff;        /* Pure White */
  --color-surface-hover: #f1f5f9;  /* Slate 100 */
  --color-surface-dark: #083344;   /* Dark Interface for code area */

  /* Typography Colors */
  --color-text: #083344;           /* Deep Dark Teal */
  --color-text-secondary: #475569; /* Slate 600 */
  --color-text-muted: #64748b;     /* Slate 500 */
  --color-text-light: #f8fafc;

  /* Borders & Dividers */
  --color-border: #e2e8f0;         /* Slate 200 */
  --color-border-dark: #cbd5e1;    /* Slate 300 */
  --color-border-accent: rgba(13, 148, 136, 0.2);

  /* Sizing & Radius */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 64px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(8, 51, 68, 0.05);
  --shadow-md: 0 6px 14px -2px rgba(8, 51, 68, 0.07), 0 2px 6px -2px rgba(8, 51, 68, 0.04);
  --shadow-lg: 0 14px 28px -4px rgba(8, 51, 68, 0.1), 0 6px 12px -4px rgba(8, 51, 68, 0.05);
  --shadow-glow: 0 0 24px var(--color-glow-teal);

  /* Micro-Interactions Timing (150–350ms) */
  --duration-fast: 180ms;
  --duration-normal: 260ms;
  --duration-slow: 350ms;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: var(--duration-fast) var(--ease-smooth);
  --transition-normal: var(--duration-normal) var(--ease-smooth);
}