/* Design tokens for OPD Flow: deep navy glass instruments over a bright 3D floor.
   One palette, one type scale, one spacing/radius/shadow set; components use roles, never raw hex. */

:root {
  /* Surfaces */
  --ink-950: #061420;
  --ink-900: #0a1c2c;
  --ink-850: #0d2236;
  --ink-800: #112a40;
  --ink-700: #18374f;
  --ink-600: #21475f;
  --glass: rgba(8, 24, 38, 0.8);
  --glass-strong: rgba(8, 22, 35, 0.94);
  --glass-blur: blur(16px) saturate(150%);
  --scrim: rgba(3, 11, 19, 0.45);

  /* Lines */
  --line: rgba(150, 196, 226, 0.14);
  --line-strong: rgba(150, 196, 226, 0.28);
  --line-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Ink */
  --text-1: #f1f6fa;
  --text-2: #b5c7d4;
  --text-3: #8199aa;
  --text-on-accent: #04121c;

  /* Brand: CK Doctor sky and signal red */
  --sky: #38b6ec;
  --sky-strong: #67cbf5;
  --sky-wash: rgba(56, 182, 236, 0.16);
  --sky-line: rgba(56, 182, 236, 0.55);
  --signal: #f04b44;
  --signal-wash: rgba(240, 75, 68, 0.16);

  /* People states: app.js overwrites these from world/palette.js (PERSON_STATE_COLORS), the single
     source of truth; the values here only cover the first paint. */
  --state-waiting: #efa21b;
  --state-service: #2167c5;
  --state-walking: #0e9f7a;
  --state-left: #8199aa;
  /* Staff on the floor: neutral, never a patient-state hue (world/palette.js STAFF_COLORS): the
     white coat, ringed in the slate trousers so the swatch never disappears on a light surface. */
  --staff-coat: #f2f4f6;
  --staff-ring: #566170;

  /* Severity: always paired with a text label, never colour alone */
  --sev-good: #2fc27a;
  --sev-warning: #fab219;
  --sev-serious: #ec835a;
  --sev-critical: #ff6b63;

  /* Charts */
  --chart-1: #38b6ec;
  --chart-1-wash: rgba(56, 182, 236, 0.14);
  --chart-1-muted: rgba(56, 182, 236, 0.42);
  --chart-2: var(--state-waiting);
  --chart-grid: rgba(150, 196, 226, 0.12);
  --chart-axis: rgba(150, 196, 226, 0.3);
  /* A two-series pair (arrivals and departures), validated on the navy surface: OKLCH L 0.48–0.67,
     CVD ΔE 13.1 (deutan), normal-vision ΔE 23.8, contrast ≥ 3:1. */
  --chart-pair-1: #2a9fd8;
  --chart-pair-2: #d06788;

  /* Heat layer: app.js overwrites these from world/palette.js (HEAT_COLORS), the single source of
     truth, so the legend matches the floor; the values here only cover the first paint. */
  --heat-ok: #1f9d6b;
  --heat-warn: #e09a0b;
  --heat-over: #dd4b39;

  /* Type */
  --font-ui:
    "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-44: 2.75rem;
  --lh-tight: 1.15;
  --lh-ui: 1.45;
  --lh-text: 1.6;

  /* Spacing (4 px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --gutter: 12px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-panel:
    0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 30px rgba(2, 10, 18, 0.38);
  --shadow-float:
    0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 56px rgba(2, 10, 18, 0.55);
  --focus-ring: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--sky-strong);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;

  /* Layout */
  --topbar-h: 60px;
  --rail-w: 320px;
  --detail-w: 360px;
  --drawer-w: 580px;
  --tabbar-h: 0px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid: 0ms;
    --dur-slow: 0ms;
  }
}