/* ═══════════════════════════════════════════════════════════════════
   Design Tokens — the ONLY file where raw color/size values are allowed.
   Everything below :root is in styles.css and must use var(--*) only.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Hue palette ── */
  --_hue-base: 283;
  --_hue-green: 152;
  --_hue-red: 15;
  --_hue-yellow: 80;
  --_hue-cyan: 214;
  --_hue-pink: 346;
  --_hue-orange: 56;

  /* ══════════════════════════════════════════════
     DARK THEME (default)
     ══════════════════════════════════════════════ */

  /* ── Primitive colors (private) ── */
  --_navy-950:   oklch(0.174 0.023 var(--_hue-base));
  --_navy-900:   oklch(0.228 0.038 var(--_hue-base));
  --_navy-850:   oklch(0.264 0.044 var(--_hue-base));
  --_navy-800:   oklch(0.318 0.060 var(--_hue-base));
  --_navy-600:   oklch(0.383 0.044 var(--_hue-base));
  --_navy-400:   oklch(0.591 0.049 var(--_hue-base));
  --_snow-100:   oklch(0.917 0.019 var(--_hue-base));
  --_violet-500: oklch(0.615 0.203 var(--_hue-base));
  --_violet-600: oklch(0.519 0.199 var(--_hue-base));

  /* ── Semantic colors ── */
  --color-bg:           var(--_navy-950);
  --color-surface:      var(--_navy-900);
  --color-surface-alt:  var(--_navy-850);
  --color-border:       var(--_navy-800);
  --color-accent:       var(--_violet-500);
  --color-accent-hover: var(--_violet-600);
  --color-text:         var(--_snow-100);
  --color-text-muted:   var(--_navy-400);
  --color-text-faint:   var(--_navy-600);
  --color-success:      oklch(0.876 0.180 var(--_hue-green));
  --color-error:        oklch(0.702 0.173 var(--_hue-red));
  --color-error-text:   oklch(0.795 0.104 12);
  --color-warning:      oklch(0.848 0.123 var(--_hue-yellow));
  --color-info:         oklch(0.843 0.110 var(--_hue-cyan));
  --color-white:        oklch(1.000 0 0);

  /* ── Alpha variants (color-mix — auto-adapts to theme) ── */
  --color-accent-a3:    color-mix(in oklch, var(--color-accent) 3%, transparent);
  --color-accent-a6:    color-mix(in oklch, var(--color-accent) 6%, transparent);
  --color-accent-a8:    color-mix(in oklch, var(--color-accent) 8%, transparent);
  --color-accent-a10:   color-mix(in oklch, var(--color-accent) 10%, transparent);
  --color-accent-a15:   color-mix(in oklch, var(--color-accent) 15%, transparent);
  --color-success-a8:   color-mix(in oklch, var(--color-success) 8%, transparent);
  --color-success-a10:  color-mix(in oklch, var(--color-success) 10%, transparent);
  --color-success-a25:  color-mix(in oklch, var(--color-success) 25%, transparent);
  --color-success-a30:  color-mix(in oklch, var(--color-success) 30%, transparent);
  --color-error-a12:    color-mix(in oklch, var(--color-error) 12%, transparent);
  --color-error-a40:    color-mix(in oklch, var(--color-error) 40%, transparent);
  --color-info-a15:     color-mix(in oklch, var(--color-info) 15%, transparent);
  --color-info-a20:     color-mix(in oklch, var(--color-info) 20%, transparent);
  --color-info-a30:     color-mix(in oklch, var(--color-info) 30%, transparent);
  --color-info-a35:     color-mix(in oklch, var(--color-info) 35%, transparent);
  --color-black-a30:    oklch(0 0 0 / 0.30);
  --color-black-a50:    oklch(0 0 0 / 0.50);
  --color-white-a30:    oklch(1 0 0 / 0.30);

  /* ── Shadow ── */
  --shadow-md: 0 4px 24px oklch(0 0 0 / 0.50);

  /* ── Syntax highlighting ── */
  --syntax-keyword: oklch(0.709 0.159 293);
  --syntax-type:    var(--color-info);
  --syntax-agg:     var(--color-warning);
  --syntax-punct:   var(--color-text-muted);
  --syntax-string:  var(--color-success);
  --syntax-comment: var(--color-text-faint);
  --syntax-var:     oklch(0.823 0.110 var(--_hue-pink));
  --syntax-num:     oklch(0.758 0.159 var(--_hue-orange));

  /* ══════════════════════════════════════════════
     SCALE TOKENS (shared across themes)
     ══════════════════════════════════════════════ */

  /* ── Spacing scale (base: 4px) ── */
  --space-0:    0;
  --space-px:   1px;
  --space-0p5:  2px;
  --space-1:    4px;
  --space-1p5:  6px;
  --space-2:    8px;
  --space-2p5:  10px;
  --space-3:    12px;
  --space-3p5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;

  /* ── Typography ── */
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-root: 15px;
  --text-2xs:   0.65rem;
  --text-xs:    0.7rem;
  --text-sm:    0.75rem;
  --text-base:  0.82rem;
  --text-md:    0.875rem;
  --text-lg:    0.95rem;
  --text-xl:    1.1rem;
  --text-2xl:   1.4rem;
  --text-3xl:   1.75rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;

  --leading-snug:    1.4;
  --leading-tight:   1.45;
  --leading-normal:  1.6;
  --leading-code:    1.65;
  --leading-loose:   1.7;

  /* ── Letter spacing ── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0.04em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.07em;
  --tracking-widest:  0.08em;

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   5px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 999px;

  /* ── Decorative sizes ── */
  --size-dot:      7px;
  --size-stripe:   3px;
  --size-skeleton: 12px;
  --size-spinner:  16px;

  /* ── Shared OKLCH control knobs ── */
  --text-highlight-lightness: 0.78;
}

/* ══════════════════════════════════════════════
   LIGHT THEME
   Activated by:
   - data-theme="light" (explicit user choice)
   - prefers-color-scheme: light when no explicit choice
   ══════════════════════════════════════════════ */

:root[data-theme="light"] {
  --color-bg:           oklch(0.985 0.005 var(--_hue-base));
  --color-surface:      oklch(0.965 0.010 var(--_hue-base));
  --color-surface-alt:  oklch(0.945 0.015 var(--_hue-base));
  --color-border:       oklch(0.880 0.022 var(--_hue-base));
  --color-accent:       oklch(0.485 0.230 var(--_hue-base));
  --color-accent-hover: oklch(0.435 0.240 var(--_hue-base));
  --color-text:         oklch(0.200 0.030 var(--_hue-base));
  --color-text-muted:   oklch(0.440 0.040 var(--_hue-base));
  --color-text-faint:   oklch(0.650 0.025 var(--_hue-base));
  --color-success:      oklch(0.520 0.160 var(--_hue-green));
  --color-error:        oklch(0.530 0.180 var(--_hue-red));
  --color-error-text:   oklch(0.480 0.160 12);
  --color-warning:      oklch(0.560 0.140 var(--_hue-yellow));
  --color-info:         oklch(0.500 0.120 var(--_hue-cyan));

  /* Boost alpha percentages — subtle tints need more opacity on white */
  --color-accent-a3:    color-mix(in oklch, var(--color-accent) 5%, transparent);
  --color-accent-a6:    color-mix(in oklch, var(--color-accent) 8%, transparent);
  --color-accent-a8:    color-mix(in oklch, var(--color-accent) 12%, transparent);
  --color-accent-a10:   color-mix(in oklch, var(--color-accent) 15%, transparent);
  --color-accent-a15:   color-mix(in oklch, var(--color-accent) 20%, transparent);
  --color-success-a8:   color-mix(in oklch, var(--color-success) 12%, transparent);
  --color-success-a10:  color-mix(in oklch, var(--color-success) 15%, transparent);
  --color-success-a25:  color-mix(in oklch, var(--color-success) 30%, transparent);
  --color-success-a30:  color-mix(in oklch, var(--color-success) 35%, transparent);
  --color-error-a12:    color-mix(in oklch, var(--color-error) 15%, transparent);
  --color-error-a40:    color-mix(in oklch, var(--color-error) 45%, transparent);
  --color-info-a15:     color-mix(in oklch, var(--color-info) 20%, transparent);
  --color-info-a20:     color-mix(in oklch, var(--color-info) 25%, transparent);
  --color-info-a30:     color-mix(in oklch, var(--color-info) 35%, transparent);
  --color-info-a35:     color-mix(in oklch, var(--color-info) 40%, transparent);
  --color-black-a30:    oklch(0 0 0 / 0.10);
  --color-black-a50:    oklch(0 0 0 / 0.15);
  --color-white-a30:    oklch(0 0 0 / 0.08);

  /* Lighter shadow for light mode */
  --shadow-md: 0 2px 16px oklch(0 0 0 / 0.10);

  /* Darker syntax colors for light backgrounds */
  --syntax-keyword: oklch(0.480 0.200 293);
  --syntax-type:    oklch(0.420 0.120 var(--_hue-cyan));
  --syntax-agg:     oklch(0.530 0.140 var(--_hue-yellow));
  --syntax-string:  oklch(0.420 0.160 var(--_hue-green));
  --syntax-var:     oklch(0.530 0.140 var(--_hue-pink));
  --syntax-num:     oklch(0.530 0.160 var(--_hue-orange));

  /* Keep highlight tones perceptually balanced on light backgrounds */
  --text-highlight-lightness: 0.54;
}