/* =============================================================
   MDD DESIGN SYSTEM — TOKENS
   Single source of truth for all design decisions.
   Import order: tokens → components → application
   ============================================================= */

/* ── 1. PRIMITIVES ───────────────────────────────────────────── */
:root {
  /* Neutral */
  --primitive-neutral-950: #020711;
  --primitive-neutral-900: #0E0F14;
  --primitive-neutral-800: #16181F;
  --primitive-neutral-700: #1E2028;
  --primitive-neutral-600: #252830;
  --primitive-neutral-500: #2A2D38;
  --primitive-neutral-400: #363944;
  --primitive-neutral-300: #9599A8;
  --primitive-neutral-200: #F0F1F5;
  --primitive-neutral-100: #FFFFFF;

  /* Electric Blue (s1) — brand primary accent */
  --primitive-blue-500: #6390ff;
  --primitive-blue-300: #7baeff;
  --primitive-blue-900: #0d1a2e;

  /* System Teal (s2) */
  --primitive-teal-500: #3fe0a8;
  --primitive-teal-300: #6fefc0;
  --primitive-teal-900: #0a2018;

  /* Focus Amber (s3) */
  --primitive-amber-500: #ffbe5c;
  --primitive-amber-300: #ffd08a;
  --primitive-amber-900: #241900;

  /* Logic Lavender (s4) */
  --primitive-lavender-500: #b899ff;
  --primitive-lavender-300: #ceb6ff;
  --primitive-lavender-900: #1c1234;

  /* Study Pink (s5) */
  --primitive-pink-500: #ff7eb3;
  --primitive-pink-300: #ff9ec9;
  --primitive-pink-900: #2a0c1f;

  /* Brand — CRC-RO */
  --primitive-brand-blue:     #1f3f70;
  --primitive-brand-blue-end: #143250;
  --primitive-brand-accent:   #2a5494;

  /* CRC-RO palette */
  --crcro-navy:       #1f3f70;
  --crcro-navy-dark:  #143250;
  --crcro-navy-light: #2a5494;
  --crcro-gold:       #b8941f;
  --crcro-gold-light: #d4aa30;
  --crcro-gold-dim:   rgba(184,148,31,.15);

  /* Status primitives */
  --primitive-success:    #22C77A;
  --primitive-error:      #ef4444;
  --primitive-error-dark: #b91c1c;
  --primitive-info:       #2563eb;
  --primitive-warning:    #F5A623;
}

/* ── 2. SEMANTIC TOKENS — Dark (default) ─────────────────────── */
:root {
  color-scheme: dark;

  /* Surfaces — DSD brand dark palette */
  --bg:            #08091c;
  --surface-1:     #10111a;
  --surface-2:     #14151f;
  --surface-3:     #1a1b2a;
  --surface-inset: #060712;

  /* Text */
  --text:        #eef0ff;
  --text-strong: #f0f2ff;
  --text-muted:  rgba(140,150,220,.7);
  --text-soft:   rgba(100,110,170,.55);

  /* Borders */
  --border:        rgba(99,144,255,.12);
  --border-strong: rgba(99,144,255,.22);

  /* Navigation */
  --nav-bg:     #10111a;
  --nav-active: rgba(99,144,255,.12);

  /* Elevation */
  --shadow:      0 2px 12px rgba(0,0,0,0.5);
  --shadow-md:   0 8px 20px rgba(2,6,23,.18);
  --shadow-lg:   0 12px 30px rgba(0,0,0,.22);
  --shadow-xl:   0 20px 52px rgba(2,6,23,.42);
  --shadow-menu: 0 18px 40px rgba(15,23,42,.28);

  /* Subject accents — DSD brand palette */
  --s1: var(--primitive-blue-500);     --s1-dim: var(--primitive-blue-900);     --s1-text: var(--primitive-blue-300);
  --s2: var(--primitive-teal-500);     --s2-dim: var(--primitive-teal-900);     --s2-text: var(--primitive-teal-300);
  --s3: var(--primitive-amber-500);    --s3-dim: var(--primitive-amber-900);    --s3-text: var(--primitive-amber-300);
  --s4: var(--primitive-lavender-500); --s4-dim: var(--primitive-lavender-900); --s4-text: var(--primitive-lavender-300);
  --s5: var(--primitive-pink-500);     --s5-dim: var(--primitive-pink-900);     --s5-text: var(--primitive-pink-300);

  /* Status semantic */
  --color-success:        var(--primitive-success);
  --color-success-bg:     rgba(34,199,122,.10);
  --color-success-border: rgba(34,199,122,.65);
  --color-error:          var(--primitive-error);
  --color-error-dark:     var(--primitive-error-dark);
  --color-error-bg:       rgba(239,68,68,.10);
  --color-error-border:   rgba(239,68,68,.65);
  --color-info:           var(--primitive-info);
  --color-info-bg:        rgba(59,130,246,.10);
  --color-info-border:    rgba(59,130,246,.35);
  --color-warning:        var(--primitive-warning);
  --color-warning-bg:     rgba(245,158,11,.10);
  --color-warning-border: rgba(245,158,11,.50);

  /* Layout */
  --content-max:      1600px;
  --wide-content-max: 1900px;
  --page-pad:         3rem;
  --wide-page-pad:    28px;

  /* Typography */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Type scale */
  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.75rem;   /* 12px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.0625rem; /* 17px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.625rem;  /* 26px */
  --text-4xl:  1.75rem;   /* 28px */

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   9px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-3xl:  18px;
  --radius-full: 999px;

  /* Spacing */
  --space-1:  3px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  14px;
  --space-6:  16px;
  --space-7:  18px;
  --space-8:  20px;
  --space-9:  24px;
  --space-10: 28px;
  --space-11: 32px;
  --space-12: 36px;
  --space-16: 48px;
  --space-20: 64px;

  /* Brand */
  --brand-gradient:    linear-gradient(135deg, var(--primitive-brand-blue), var(--primitive-brand-blue-end));
  --accent-gradient:   linear-gradient(135deg, var(--crcro-gold) 0%, var(--crcro-gold-light) 100%);
  --crcro-purple:      #9C27B0;
  --crcro-footer-bg:   #101d29;
  --font-admin:        var(--font-sans);

  /* Interaction */
  --focus-ring:      0 0 0 3px rgba(91,138,248,.18);
  --ease-default:    cubic-bezier(.2,.8,.2,1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
}

/* ── 3. SEMANTIC TOKENS — Light ──────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;

  --bg:            #edf3fb;
  --surface-1:     #ffffff;
  --surface-2:     #f8fbff;
  --surface-3:     #edf4ff;
  --surface-inset: #eef5ff;

  --text:        #1e293b;
  --text-strong: #0f172a;
  --text-muted:  #475569;
  --text-soft:   #64748b;

  --border:        #dbe7f3;
  --border-strong: #bfd0e4;

  --nav-bg:     #dfe9f7;
  --nav-active: rgba(37,99,235,.12);

  --shadow:      0 10px 24px rgba(15,23,42,.08);
  --shadow-md:   0 8px 20px rgba(15,23,42,.10);
  --shadow-lg:   0 12px 30px rgba(15,23,42,.12);
  --shadow-xl:   0 20px 52px rgba(15,23,42,.15);
  --shadow-menu: 0 18px 40px rgba(15,23,42,.14);

  --focus-ring: 0 0 0 3px rgba(37,99,235,.18);
}