/* ==========================================================================
   SJ88 Design System — Design Tokens
   Modern Gradient Bento + Glassmorphism + Soft Animations
   Brand: Indigo → Violet → Cyan  |  EdTech 2026
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     BRAND PALETTE — Indigo
     -------------------------------------------------------------------------- */
  --brand-indigo-50:  #eef2ff;
  --brand-indigo-100: #e0e7ff;
  --brand-indigo-200: #c7d2fe;
  --brand-indigo-300: #a5b4fc;
  --brand-indigo-400: #818cf8;
  --brand-indigo-500: #6366f1;
  --brand-indigo-600: #4f46e5;
  --brand-indigo-700: #4338ca;
  --brand-indigo-800: #3730a3;
  --brand-indigo-900: #312e81;
  --brand-indigo-950: #1e1b4b;

  /* --------------------------------------------------------------------------
     BRAND PALETTE — Violet
     -------------------------------------------------------------------------- */
  --brand-violet-50:  #f5f3ff;
  --brand-violet-100: #ede9fe;
  --brand-violet-200: #ddd6fe;
  --brand-violet-300: #c4b5fd;
  --brand-violet-400: #a78bfa;
  --brand-violet-500: #8b5cf6;
  --brand-violet-600: #7c3aed;
  --brand-violet-700: #6d28d9;
  --brand-violet-800: #5b21b6;
  --brand-violet-900: #4c1d95;
  --brand-violet-950: #2e1065;

  /* --------------------------------------------------------------------------
     BRAND PALETTE — Cyan
     -------------------------------------------------------------------------- */
  --brand-cyan-50:  #ecfeff;
  --brand-cyan-100: #cffafe;
  --brand-cyan-200: #a5f3fc;
  --brand-cyan-300: #67e8f9;
  --brand-cyan-400: #22d3ee;
  --brand-cyan-500: #06b6d4;
  --brand-cyan-600: #0891b2;
  --brand-cyan-700: #0e7490;
  --brand-cyan-800: #155e75;
  --brand-cyan-900: #164e63;
  --brand-cyan-950: #083344;

  /* Primary brand aliases (use these most of the time) */
  --brand-50:  var(--brand-indigo-50);
  --brand-100: var(--brand-indigo-100);
  --brand-200: var(--brand-indigo-200);
  --brand-300: var(--brand-indigo-300);
  --brand-400: var(--brand-indigo-400);
  --brand-500: var(--brand-indigo-500);
  --brand-600: var(--brand-indigo-600);
  --brand-700: var(--brand-indigo-700);
  --brand-800: var(--brand-indigo-800);
  --brand-900: var(--brand-indigo-900);
  --brand-950: var(--brand-indigo-950);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-indigo-violet: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-violet-cyan: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  --gradient-sunset: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
  --gradient-ocean: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%);
  --gradient-aurora: linear-gradient(135deg, #6366f1 0%, #8b5cf6 35%, #ec4899 70%, #f59e0b 100%);
  --gradient-mint: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ecfeff 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 100%);
  --gradient-dark: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #164e63 100%);

  /* --------------------------------------------------------------------------
     SEMANTIC COLORS
     -------------------------------------------------------------------------- */
  /* Success — Emerald */
  --color-success-50:  #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;
  --color-success-950: #022c22;

  /* Warning — Amber */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;
  --color-warning-950: #451a03;

  /* Danger — Rose */
  --color-danger-50:  #fff1f2;
  --color-danger-100: #ffe4e6;
  --color-danger-200: #fecdd3;
  --color-danger-300: #fda4af;
  --color-danger-400: #fb7185;
  --color-danger-500: #f43f5e;
  --color-danger-600: #e11d48;
  --color-danger-700: #be123c;
  --color-danger-800: #9f1239;
  --color-danger-900: #881337;
  --color-danger-950: #4c0519;

  /* Info — Sky */
  --color-info-50:  #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-200: #bae6fd;
  --color-info-300: #7dd3fc;
  --color-info-400: #38bdf8;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-800: #075985;
  --color-info-900: #0c4a6e;
  --color-info-950: #082f49;

  /* --------------------------------------------------------------------------
     NEUTRAL PALETTE — Slate
     -------------------------------------------------------------------------- */
  --neutral-0:    #ffffff;
  --neutral-50:   #f8fafc;
  --neutral-100:  #f1f5f9;
  --neutral-200:  #e2e8f0;
  --neutral-300:  #cbd5e1;
  --neutral-400:  #94a3b8;
  --neutral-500:  #64748b;
  --neutral-600:  #475569;
  --neutral-700:  #334155;
  --neutral-800:  #1e293b;
  --neutral-900:  #0f172a;
  --neutral-950:  #020617;
  --neutral-1000: #000000;

  /* Semantic neutrals */
  --bg-page:      var(--neutral-50);
  --bg-surface:   var(--neutral-0);
  --bg-elevated:  var(--neutral-0);
  --bg-muted:     var(--neutral-100);
  --bg-subtle:    var(--neutral-200);
  --bg-overlay:   rgba(15, 23, 42, 0.6);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-link:      var(--brand-600);

  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-100);
  --border-focus:   var(--brand-500);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-thai:    "Noto Sans Thai", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — uses clamp() for fluid responsive sizing */
  --text-display-xl: clamp(3rem, 5vw + 1rem, 4.5rem);    /* 48–72px */
  --text-display-lg: clamp(2.25rem, 4vw + 0.5rem, 3.5rem); /* 36–56px */
  --text-display-md: clamp(1.875rem, 3vw + 0.5rem, 2.75rem); /* 30–44px */
  --text-h1: clamp(1.75rem, 2vw + 0.5rem, 2.25rem);     /* 28–36px */
  --text-h2: clamp(1.5rem, 1.5vw + 0.5rem, 1.875rem);    /* 24–30px */
  --text-h3: clamp(1.25rem, 1vw + 0.5rem, 1.5rem);      /* 20–24px */
  --text-h4: 1.25rem;  /* 20px */
  --text-h5: 1.125rem; /* 18px */
  --text-h6: 1rem;     /* 16px */
  --text-body-lg: 1.125rem; /* 18px */
  --text-body:    1rem;     /* 16px */
  --text-body-sm: 0.875rem; /* 14px */
  --text-caption: 0.75rem;  /* 12px */
  --text-overline: 0.6875rem; /* 11px */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-widest:   0.1em;

  /* --------------------------------------------------------------------------
     SPACING (8px base, 4px micro)
     -------------------------------------------------------------------------- */
  --space-0:   0;
  --space-px:  1px;
  --space-0_5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-1_5: 0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-2_5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-3_5: 0.875rem;  /* 14px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */

  /* --------------------------------------------------------------------------
     RADIUS
     -------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   0.25rem;  /* 4px */
  --radius-sm:   0.375rem; /* 6px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.25rem;  /* 20px */
  --radius-3xl:  1.5rem;   /* 24px */
  --radius-4xl:  2rem;     /* 32px */
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     SHADOWS — multi-layer elevation + glow variants
     -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.20);
  --shadow-3xl: 0 35px 60px -15px rgba(15, 23, 42, 0.25);

  /* Glow variants — colored */
  --shadow-glow-indigo: 0 0 0 0 rgba(99,102,241,0), 0 8px 30px -4px rgba(99,102,241,0.45);
  --shadow-glow-violet: 0 8px 30px -4px rgba(139,92,246,0.45);
  --shadow-glow-cyan:   0 8px 30px -4px rgba(6,182,212,0.45);
  --shadow-glow-success: 0 8px 30px -4px rgba(16,185,129,0.45);
  --shadow-glow-warning: 0 8px 30px -4px rgba(245,158,11,0.45);
  --shadow-glow-danger:  0 8px 30px -4px rgba(244,63,94,0.45);
  --shadow-glow-brand:   0 10px 40px -10px rgba(99,102,241,0.55), 0 4px 20px -4px rgba(139,92,246,0.40);

  /* Inset / focus */
  --shadow-inset: inset 0 2px 4px 0 rgba(15, 23, 42, 0.06);
  --shadow-ring: 0 0 0 3px rgba(99,102,241,0.18);
  --shadow-ring-success: 0 0 0 3px rgba(16,185,129,0.18);
  --shadow-ring-danger:  0 0 0 3px rgba(244,63,94,0.18);

  /* Glass shadows */
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
  --shadow-glass-lg: 0 16px 48px 0 rgba(31, 38, 135, 0.18);

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --ease-linear:    cubic-bezier(0, 0, 1, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-soft:      cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --duration-instant: 75ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 1000ms;

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  --transition-spring: var(--duration-base) var(--ease-spring);

  /* --------------------------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------------------------- */
  --z-hide:        -1;
  --z-base:         0;
  --z-raised:       1;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-overlay:     300;
  --z-header:      500;
  --z-modal:       1000;
  --z-popover:     1100;
  --z-tooltip:     1200;
  --z-toast:       1300;
  --z-max:         9999;

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-fluid: 1536px;

  --header-height: 64px;
  --header-height-lg: 72px;
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --bottom-nav-height: 64px;

  --content-max-width: 1280px;
  --prose-max-width: 68ch;

  /* --------------------------------------------------------------------------
     BLUR (for glassmorphism)
     -------------------------------------------------------------------------- */
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* --------------------------------------------------------------------------
     BORDERS
     -------------------------------------------------------------------------- */
  --border-width: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-glass: 1px solid rgba(255, 255, 255, 0.18);
  --border-glass-strong: 1px solid rgba(255, 255, 255, 0.30);
}

/* ==========================================================================
   DARK MODE — token overrides
   Set [data-theme="dark"] on <html> or <body>
   ========================================================================== */
[data-theme="dark"] {
  /* Brand stays vibrant, slightly desaturated for dark UI */
  --brand-50:  var(--brand-indigo-950);
  --brand-100: var(--brand-indigo-900);
  --brand-200: var(--brand-indigo-800);
  --brand-300: var(--brand-indigo-700);
  --brand-400: var(--brand-indigo-500);
  --brand-500: var(--brand-indigo-400);
  --brand-600: var(--brand-indigo-300);
  --brand-700: var(--brand-indigo-200);
  --brand-800: var(--brand-indigo-100);
  --brand-900: var(--brand-indigo-50);

  /* Semantic surfaces */
  --bg-page:      #0a0a1a;
  --bg-surface:   #131325;
  --bg-elevated:  #1a1a2e;
  --bg-muted:     #1f1f3a;
  --bg-subtle:    #252544;
  --bg-overlay:   rgba(0, 0, 0, 0.75);

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary:  #94a3b8;
  --text-disabled:  #64748b;
  --text-inverse:   #0f172a;
  --text-link:      var(--brand-indigo-400);

  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-focus:   var(--brand-indigo-400);

  /* Neutral mapping for shadows on dark */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.9);

  --gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.08) 50%, rgba(6,182,212,0.10) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);

  --border-glass: 1px solid rgba(255, 255, 255, 0.10);
  --border-glass-strong: 1px solid rgba(255, 255, 255, 0.18);
}

/* Auto dark mode via system preference if user has not chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

/* Respect user choice — prevent auto-flash */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }