/* ============================================================================
   DESIGN TOKENS — "clinical instrument panel"
   ----------------------------------------------------------------------------
   Surfaces in this app:
     Today        Monitor + Operate   (glanceable state, then act on it)
     Logger       Operate             (repeat the last action fast)
     Calculator   Operate             (inputs left, readout right)
     Journal      Configure + Monitor (form plus trend)
     Protocols    Operate
     Library      Explore + Compare
     Handbook     Decide / Learn
   No hero, no centred stack, no equal-weight feature tiles anywhere.
   ========================================================================== */

:root {
  /* --- surfaces: near-black with a cool, slightly blue cast -------------- */
  --bg:            oklch(15.5% 0.008 245);
  --bg-sunken:     oklch(13%   0.008 245);
  --surface:       oklch(19.5% 0.010 245);
  --surface-2:     oklch(23%   0.011 245);
  --surface-3:     oklch(27%   0.012 245);

  --border:        oklch(30%   0.012 245);
  --border-strong: oklch(39%   0.014 245);

  /* --- ink --------------------------------------------------------------- */
  --ink:           oklch(95%   0.004 245);
  --ink-2:         oklch(80%   0.008 245);
  --muted:         oklch(63%   0.010 245);
  --faint:         oklch(48%   0.010 245);

  /* --- the single accent: an instrument readout cyan --------------------- */
  --accent:        oklch(80%   0.128 197);
  --accent-strong: oklch(86%   0.140 197);
  --accent-dim:    oklch(52%   0.075 197);
  --accent-wash:   oklch(30%   0.045 197);
  --on-accent:     oklch(18%   0.030 197);

  /* --- semantic (used only where meaning is carried) --------------------- */
  --ok:            oklch(78%   0.145 158);
  --ok-wash:       oklch(28%   0.050 158);
  --warn:          oklch(82%   0.140 82);
  --warn-wash:     oklch(30%   0.048 82);
  --danger:        oklch(70%   0.180 25);
  --danger-wash:   oklch(30%   0.070 25);
  --info:          oklch(76%   0.095 255);
  --info-wash:     oklch(30%   0.040 255);

  /* --- geometry: tight radii read as "instrument", not "consumer app" ---- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* --- type ------------------------------------------------------------- */
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-micro: 10px;   /* uppercase field labels, table headers */
  --fs-xs:    11.5px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-md:    15.5px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   34px;

  --lh-tight: 1.2;
  --lh-base:  1.55;

  --track-micro: 0.09em;
  --track-tight: -0.011em;

  /* --- elevation: only modals float ------------------------------------- */
  --shadow-modal: 0 18px 50px oklch(0% 0 0 / 0.55), 0 2px 8px oklch(0% 0 0 / 0.4);
  --shadow-pop:   0 6px 20px oklch(0% 0 0 / 0.45);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-dim);

  --rail-w: 212px;
  --rail-w-compact: 62px;
  --topbar-h: 52px;

  /* Motion is functional only; everything collapses under reduced-motion. */
  --t-fast: 110ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-base: 190ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}