/* ============================================================================
   The Distillery — design tokens
   Authored against the semantic names from the handoff so dark mode is a single
   `.theme-dark` re-point (see bottom). Light = "Clinical", the default app theme.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surfaces & borders ---- */
  --surface-page: #F6F7F9;
  --surface-card: #FFFFFF;
  --surface-sunken: #F4F6F8;
  --border: #E6E9ED;
  --border-soft: #EDEFF2;

  /* ---- Ink (text) ---- */
  --ink: #11171E;
  --ink-2: #5A6573;
  --ink-3: #98A1AD;
  --ink-dim: #C2C9D1;     /* dimmed nav / muted glyphs */

  /* ---- Accent (Reagent teal) ---- */
  --accent: #0E9C8E;
  --accent-ink: #0B7E73;
  --accent-tint: #E6F6F4;
  --accent-tint-border: #BFE8E2;

  /* ---- CTA / status ---- */
  --ink-button: #11171E;       /* near-black "Run on Boilerplate" */
  --status-ok: #2E9E5B;        /* in spec */
  --status-off: #7C5CFC;       /* indicator violet — under target */
  --status-off-tint: #EFEAFE;
  --status-off-tint-border: #D8CCFB;
  --status-off-ink: #5B3FD6;
  --status-over: #DB2777;      /* magenta — over target */

  /* ---- Spectrum (data) ---- */
  --spectrum-from: #22D3EE;
  --spectrum-to: #0E9C8E;

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radius ---- */
  --r-card: 12px;
  --r-card-sm: 11px;
  --r-control: 9px;
  --r-control-sm: 8px;
  --r-chip: 6px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-card: 0 1px 3px rgba(16,23,30,.07);
  --shadow-card-sm: 0 1px 2px rgba(16,23,30,.05);
  --shadow-cta-ink: 0 6px 18px rgba(17,23,30,.22);
  --shadow-cta-teal: 0 6px 16px rgba(14,156,142,.3);
  --ring-teal: 0 0 0 3px rgba(14,156,142,.12);

  /* ---- Magic color pips (data, not brand) ---- */
  --pip-w-bg: #EAE2C3;  --pip-w-fg: #7A6B36;
  --pip-u-bg: #3B7DD8;  --pip-u-fg: #FFFFFF;
  --pip-b-bg: #4B4658;  --pip-b-fg: #FFFFFF;
  --pip-r-bg: #D6503F;  --pip-r-fg: #FFFFFF;
  --pip-g-bg: #3C9A5C;  --pip-g-fg: #FFFFFF;
  --pip-c-bg: #C9CDD3;  --pip-c-fg: #3A424C;
  --pip-num-bg: #D5D9DE; --pip-num-fg: #3A424C;
}

/* ---- Dark theme (Instrument) — reserved; flips the tokens above ---- */
.theme-dark {
  --surface-page: #0D1117;
  --surface-card: #11171E;
  --surface-sunken: #161D26;
  --border: #1E2630;
  --border-soft: #1E2630;
  --ink: #F4F6F8;
  --ink-2: #9AA6B2;
  --ink-3: #6B7785;
  --ink-dim: #4A5562;
  --accent: #34E07F;          /* status/live green */
  --accent-ink: #7DD3FC;      /* data/numerals sky */
  --accent-tint: #11261F;
  --accent-tint-border: #1E3A2C;
  --spectrum-from: #7DD3FC;
  --spectrum-to: #34E07F;
  --shadow-card: 0 1px 3px rgba(0,0,0,.4);
}