/* ============================================================
   tokens.css — Chromatography Calculators design tokens
   ------------------------------------------------------------
   Single source of truth for color, typography, and elevation
   tokens across every page in the suite. Linked BEFORE base.css
   and any page-specific <style> so pages can override freely.

   This is the superset of every token used anywhere in the app:
     · core palette + clinical canvas (light & dark)
     · derived tints/softs/shadows (via color-mix, so they
       auto-adapt in dark mode without re-declaration)
     · calc-* helper tokens (shared by 02/04/05 calculated cells)
     · typography stacks
   Variable NAMES match V8/V9 so every existing var() resolves.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Tool signal colors (deeper, slightly desaturated — "instrument" not "SaaS") */
  --blue:   #2854C8;
  --green:  #1E7A4E;
  --orange: #B8651E;
  --purple: #6D3FB8;
  --teal:   #0E7A8A;
  --red:    #C2362B;

  /* Clinical canvas */
  --bg: #FAFAF7;
  --card-bg: #FFFFFF;
  --text: #1A1A17;
  --muted: #6B6B63;
  --border: #E6E4DD;
  --radius: 10px;
  --header-height: 64px;
  --input-bg: #F4F2EC;
  --input-focus-bg: #FFFFFF;
  --select-bg: #F1EFE7;

  /* Derived — color-mix so they auto-adapt in dark mode */
  --blue-soft:   color-mix(in srgb, var(--blue)   10%, var(--card-bg));
  --green-soft:  color-mix(in srgb, var(--green)  10%, var(--card-bg));
  --orange-soft: color-mix(in srgb, var(--orange) 10%, var(--card-bg));
  --purple-soft: color-mix(in srgb, var(--purple) 10%, var(--card-bg));
  --teal-soft:   color-mix(in srgb, var(--teal)   10%, var(--card-bg));
  --blue-tint:   color-mix(in srgb, var(--blue)   10%, transparent);

  /* Calculated-cell tokens (used by 02/04/05) */
  --calc-bg:     color-mix(in srgb, var(--blue) 9%, var(--card-bg));
  --calc-border: color-mix(in srgb, var(--blue) 32%, var(--border));
  --calc-text:   var(--blue);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26, 26, 23, 0.06);
  --shadow-md: 0 6px 24px rgba(26, 26, 23, 0.10);
  --shadow-lg: 0 18px 48px rgba(26, 26, 23, 0.16);
  --blue-glow: 0 12px 32px color-mix(in srgb, var(--blue) 32%, transparent);
  --grid-line: color-mix(in srgb, var(--text) 6%, transparent);

  /* Typography */
  --font-display: 'Inter Tight', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-formula: 'Cambria Math', 'Latin Modern Math', 'Times New Roman', 'Georgia', serif;
}

[data-theme="dark"] {
  /* Instrument readout — near-black, cool, backlit-LCD ink */
  --bg: #0A0E12;
  --card-bg: #12181F;
  --text: #D8DEE5;
  --muted: #7C8794;
  --border: #1E2630;
  --input-bg: #0F141A;
  --input-focus-bg: #161D25;
  --select-bg: #0F141A;
  /* tool colors kept (wayfinding), slightly brighter for glow */
  --blue:   #4F7BE8;
  --green:  #3E9F6B;
  --orange: #D98436;
  --purple: #9163D8;
  --teal:   #2BA0B2;
  --red:    #E05A4D;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
  --grid-line: color-mix(in srgb, var(--text) 7%, transparent);
  /* derived soft/tint/calc tokens re-derive automatically via color-mix
     because they reference --blue/--card-bg/etc. which were just overridden. */
}