/* colors.css — OKLCH. Base ramps (raw material) + semantic aliases (what UI uses).
   Aesthetic: Gundam 00 Veda/CBS command-console HUD. Accent = brand #0186d1,
   substituted for the anime's teal highlight. */

:root{
  /* ---- base: brand ramp (constant H=244.4, perceptually-even L) ---- */
  --brand-50: oklch(97.5% 0.022 244.4);
  --brand-100:oklch(94.0% 0.050 244.4);
  --brand-200:oklch(88.0% 0.100 244.4);
  --brand-300:oklch(80.0% 0.150 244.4);
  --brand-400:oklch(68.0% 0.180 244.4);
  --brand-500:oklch(59.8% 0.149 244.4);   /* = #0186d1 (anchor) */
  --brand-600:oklch(55.0% 0.150 244.4);
  --brand-700:oklch(47.0% 0.130 244.4);
  --brand-800:oklch(39.0% 0.100 244.4);
  --brand-900:oklch(30.0% 0.070 244.4);

  /* ---- base: cool neutrals (hue-biased toward brand, very low chroma) ---- */
  --n-0:  oklch(100%  0     0);
  --n-50: oklch(98.5% 0.004 244.4);
  --n-100:oklch(96.5% 0.006 244.4);
  --n-200:oklch(92.0% 0.008 244.4);
  --n-300:oklch(86.0% 0.010 244.4);
  --n-400:oklch(74.0% 0.012 244.4);
  --n-500:oklch(62.0% 0.012 244.4);
  --n-600:oklch(52.0% 0.012 244.4);
  --n-700:oklch(42.0% 0.013 244.4);
  --n-800:oklch(30.0% 0.014 244.4);
  --n-900:oklch(21.0% 0.016 244.4);
  --n-950:oklch(14.5% 0.018 244.4);

  /* ---- base: semantic hues (kept far from brand so they never read as brand) ---- */
  --green-500: oklch(64% 0.14 155);
  --amber-500: oklch(75% 0.14 75);
  --red-500:   oklch(58% 0.19 25);

  /* ================= semantic aliases — UI + downstream bind ONLY these ================= */
  /* surfaces: light command-panel is the default face */
  --surface-page:   var(--n-100);   /* the console backplate */
  --surface-panel:  var(--n-0);     /* a light data panel */
  --surface-alt:    var(--n-50);    /* zebra / subpanel */
  --surface-inset:  var(--n-200);   /* meter track, wells */
  --surface-invert: var(--n-950);   /* the black data panel (radial-chart style) */

  /* text */
  --text-primary:   var(--n-900);
  --text-secondary: var(--n-600);
  --text-faint:     var(--n-500);
  --text-on-invert: var(--n-100);
  --text-on-accent: var(--n-0);

  /* hairlines & frames */
  --line-hairline:  oklch(86% 0.010 244.4 / 0.9);
  --line-strong:    var(--n-300);
  --line-bracket:   var(--n-400);   /* corner-bracket frames */

  /* accent = data highlight / selection / meter fill (the anime's teal role) */
  --accent:         var(--brand-500);
  --accent-hover:   var(--brand-600);
  --accent-press:   var(--brand-700);
  --accent-bg:      var(--brand-50);
  --accent-line:    var(--brand-300);
  --data-highlight: var(--brand-500);
  --data-track:     var(--surface-inset);
  --row-selected:   oklch(88% 0.100 244.4 / 0.55);

  /* states */
  --state-good:     var(--green-500);
  --state-warn:     var(--amber-500);
  --state-critical: var(--red-500);
}

/* ---- dark-panel mode: the black CBS/Veda console face ---- */
:root[data-theme="dark"]{
  --surface-page:   var(--n-950);
  --surface-panel:  var(--n-900);
  --surface-alt:    var(--n-800);
  --surface-inset:  oklch(26% 0.014 244.4);
  --surface-invert: var(--n-0);

  --text-primary:   var(--n-100);
  --text-secondary: var(--n-400);
  --text-faint:     var(--n-500);
  --text-on-invert: var(--n-900);

  --line-hairline:  oklch(42% 0.013 244.4 / 0.7);
  --line-strong:    var(--n-700);
  --line-bracket:   var(--n-600);

  --accent:         var(--brand-400);
  --accent-hover:   var(--brand-300);
  --accent-press:   var(--brand-500);
  --accent-bg:      oklch(39% 0.100 244.4 / 0.35);
  --accent-line:    var(--brand-600);
  --data-highlight: var(--brand-400);
  --row-selected:   oklch(68% 0.180 244.4 / 0.28);
}