/* =========================================================================
   mcvibe console v2 — Design Tokens
   "Operations / Precision Light"
   Cool neutral surfaces · ink-black primary · indigo accent
   Light-first, with a refined cool-graphite dark mode ([data-theme="dark"])
   Token NAMES are kept stable so all screens re-skin via this file alone.
   Canonical accent = --accent (legacy --gold aliases retained).
   ========================================================================= */

:root {
  /* ---------- Surfaces (cool neutral, hue ~262) ---------- */
  --bg:            oklch(0.972 0.003 262);   /* app canvas (light gray) */
  --bg-rail:       oklch(0.995 0.001 262);   /* sidebar (near white) */
  --bg-topbar:     oklch(0.995 0.001 262);
  --panel:         oklch(1 0 0);             /* cards / panels (white) */
  --panel-2:       oklch(0.968 0.004 262);   /* nested / hover */
  --panel-3:       oklch(0.950 0.005 262);
  --inset:         oklch(0.966 0.004 262);   /* wells, inputs, code */
  --inset-2:       oklch(0.945 0.005 262);

  --line:          oklch(0.905 0.006 262);   /* crisp hairline */
  --line-strong:   oklch(0.840 0.008 262);
  --line-faint:    oklch(0.934 0.005 262);

  --text:          oklch(0.270 0.014 264);   /* ink */
  --text-2:        oklch(0.455 0.014 264);
  --text-3:        oklch(0.595 0.012 264);
  --text-4:        oklch(0.715 0.010 264);

  /* ---------- Accent: indigo (canonical) ---------- */
  --accent:        oklch(0.520 0.175 264);
  --accent-2:      oklch(0.455 0.175 264);   /* hover/darker */
  --accent-fg:     oklch(0.995 0.005 264);
  --accent-soft:   oklch(0.640 0.140 264);
  --accent-fill:   color-mix(in oklch, var(--accent) 10%, transparent);
  --accent-line:   color-mix(in oklch, var(--accent) 34%, transparent);

  /* legacy aliases (v1 markup uses --gold*) -> now indigo accent */
  --gold:          var(--accent);
  --gold-2:        var(--accent-2);
  --gold-fg:       var(--accent-fg);
  --gold-soft:     var(--accent-soft);
  --gold-fill:     var(--accent-fill);
  --gold-line:     var(--accent-line);

  /* ---------- Ink (primary buttons / strong fills) ---------- */
  --ink:           oklch(0.270 0.014 264);
  --ink-2:         oklch(0.330 0.014 264);   /* hover */
  --ink-fg:        oklch(0.995 0.002 262);

  /* ---------- Data viz / status (tuned for light bg) ---------- */
  --violet:        oklch(0.545 0.180 286);
  --violet-2:      oklch(0.620 0.165 286);
  --green:         oklch(0.605 0.135 156);
  --amber:         oklch(0.700 0.135 66);
  --red:           oklch(0.580 0.205 25);
  --blue:          oklch(0.560 0.150 244);
  --cyan:          oklch(0.640 0.105 202);

  /* tier semantics */
  --tier-free:     var(--green);
  --tier-basic:    var(--amber);
  --tier-premium:  var(--violet);

  /* tinted fills */
  --violet-fill:   color-mix(in oklch, var(--violet) 12%, transparent);
  --green-fill:    color-mix(in oklch, var(--green) 13%, transparent);
  --amber-fill:    color-mix(in oklch, var(--amber) 16%, transparent);
  --red-fill:      color-mix(in oklch, var(--red) 12%, transparent);
  --blue-fill:     color-mix(in oklch, var(--blue) 12%, transparent);

  /* ---------- Type ---------- */
  --font-ui:      "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; /* big numerals, tight */

  --tr-eyebrow:  0.14em;
  --tr-label:    0.03em;
  --tr-tight:   -0.018em;
  --tr-tighter: -0.032em;

  /* ---------- Radius (precision = slightly tight) ---------- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 9px;
  --r-4: 14px;
  --r-pill: 999px;

  /* ---------- Shadow (light, restrained) ---------- */
  --sh-1: 0 1px 2px 0 oklch(0.27 0.02 264 / 0.05);
  --sh-2: 0 4px 16px -4px oklch(0.27 0.04 264 / 0.10), 0 1px 3px oklch(0.27 0.02 264 / 0.06);
  --sh-3: 0 14px 36px -10px oklch(0.27 0.05 264 / 0.18), 0 2px 8px oklch(0.27 0.02 264 / 0.06);
  --sh-pop: 0 10px 30px -8px oklch(0.27 0.05 264 / 0.20), 0 0 0 1px var(--line);
  --ring: 0 0 0 3px var(--accent-fill);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1.04, 0.4, 1.0);
  --d1: 110ms; --d2: 180ms; --d3: 300ms;

  /* ---------- Layout ---------- */
  --rail-w: 244px;
  --topbar-h: 56px;
  --pad: 20px;
  --gap: 16px;
  --row-h: 48px;

  color-scheme: light;
}

/* Density variants */
:root[data-density="compact"] { --pad: 15px; --gap: 12px; --row-h: 40px; }
:root[data-density="roomy"]   { --pad: 24px; --gap: 20px; --row-h: 54px; }

/* Accent variants (swap canonical accent only) */
:root[data-accent="indigo"] { --accent: oklch(0.520 0.175 264); --accent-2: oklch(0.455 0.175 264); }
:root[data-accent="cobalt"] { --accent: oklch(0.530 0.150 244); --accent-2: oklch(0.460 0.150 244); }
:root[data-accent="teal"]   { --accent: oklch(0.560 0.110 192); --accent-2: oklch(0.490 0.110 192); }
:root[data-accent="violet"] { --accent: oklch(0.545 0.180 292); --accent-2: oklch(0.475 0.180 292); }

/* =========================================================================
   DARK MODE — refined cool graphite (distinct from v1's warm graphite)
   ========================================================================= */
:root[data-theme="dark"] {
  --bg:            oklch(0.205 0.010 264);
  --bg-rail:       oklch(0.180 0.010 264);
  --bg-topbar:     oklch(0.195 0.010 264);
  --panel:         oklch(0.245 0.012 264);
  --panel-2:       oklch(0.285 0.013 264);
  --panel-3:       oklch(0.320 0.014 264);
  --inset:         oklch(0.222 0.011 264);
  --inset-2:       oklch(0.195 0.010 264);

  --line:          oklch(0.360 0.012 264);
  --line-strong:   oklch(0.460 0.014 264);
  --line-faint:    oklch(0.305 0.011 264);

  --text:          oklch(0.965 0.004 264);
  --text-2:        oklch(0.740 0.012 264);
  --text-3:        oklch(0.575 0.012 264);
  --text-4:        oklch(0.445 0.012 264);

  --accent:        oklch(0.680 0.150 264);
  --accent-2:      oklch(0.740 0.140 264);
  --accent-fg:     oklch(0.180 0.020 264);
  --accent-fill:   color-mix(in oklch, var(--accent) 18%, transparent);
  --accent-line:   color-mix(in oklch, var(--accent) 42%, transparent);

  --ink:           oklch(0.965 0.004 264);   /* primary buttons become light in dark mode */
  --ink-2:         oklch(0.880 0.006 264);
  --ink-fg:        oklch(0.200 0.012 264);

  --violet:        oklch(0.660 0.165 286);
  --violet-2:      oklch(0.730 0.150 286);
  --green:         oklch(0.730 0.150 156);
  --amber:         oklch(0.790 0.140 72);
  --red:           oklch(0.665 0.205 25);
  --blue:          oklch(0.700 0.135 240);
  --cyan:          oklch(0.760 0.110 200);

  --violet-fill:   color-mix(in oklch, var(--violet) 18%, transparent);
  --green-fill:    color-mix(in oklch, var(--green) 17%, transparent);
  --amber-fill:    color-mix(in oklch, var(--amber) 17%, transparent);
  --red-fill:      color-mix(in oklch, var(--red) 18%, transparent);
  --blue-fill:     color-mix(in oklch, var(--blue) 17%, transparent);

  --sh-1: 0 1px 0 0 oklch(1 0 0 / 0.02) inset, 0 1px 2px 0 oklch(0 0 0 / 0.4);
  --sh-2: 0 8px 24px -10px oklch(0 0 0 / 0.6);
  --sh-3: 0 18px 48px -16px oklch(0 0 0 / 0.72);
  --sh-pop: 0 14px 40px -12px oklch(0 0 0 / 0.7), 0 0 0 1px var(--line);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}