/**
 * tokens.css — Meridian design tokens (light + dark).
 * Component CSS must reference these tokens only — never hardcode palette hex.
 */
:root {
  /* Chrome (navy rail) — stable across themes */
  --chrome-900: #0b1220;
  --chrome-800: #101a2e;
  --chrome-700: #16233c;
  --chrome-600: #1e2f4d;
  --chrome-text: #cbd5e4;
  --chrome-active: #ffffff;
  --chrome-muted: #8494ac;
  --chrome-accent: #8e97f0;

  /* Canvas & surfaces (warm paper) */
  --canvas: #f7f7f5;
  --surface: #ffffff;
  --surface-alt: #fafaf8;
  --inset: #f0efea;
  --border: #e5e3dc;
  --border-strong: #cfcbc0;

  /* Text */
  --text: #1a1d23;
  --text-secondary: #4a4f58;
  --text-muted: #6e7480;
  --text-disabled: #9ba0a9;

  /* Accent (indigo) */
  --accent: #4a56d2;
  --accent-hover: #3a46b8;
  --accent-subtle: #eef0fd;
  --accent-border: #c7ccf5;

  /* Status */
  --danger: #c0362c;
  --danger-bg: #fbf0ee;
  --danger-border: #f0cfc9;
  --warn: #a96b0c;
  --warn-bg: #fdf6e9;
  --warn-border: #f0ddb4;
  --success: #1f7a4d;
  --success-bg: #edf6f1;
  --success-border: #bfe0cd;
  --info: #0e6e8c;
  --info-bg: #ebf5f8;
  --info-border: #bfdce6;
  --neutral: #6e7480;
  --neutral-bg: #f2f1ee;

  /* Chart */
  --chart-1: #4a56d2;
  --chart-2: #1e2f4d;
  --chart-3: #0e6e8c;
  --chart-4: #8a6bb1;
  --chart-5: #b08341;
  --chart-6: #4f7c6e;
  --chart-resolved: #a8a6a0;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26, 29, 35, 0.05);
  --shadow-md: 0 6px 16px rgba(26, 29, 35, 0.08);
  --shadow-drawer: -10px 0 28px rgba(26, 29, 35, 0.14);
  --overlay: rgba(11, 18, 32, 0.5);

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Spacing & radius */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --radius-control: 6px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Layout */
  --rail-collapsed: 72px;
  --rail-expanded: 260px;
  --topbar-h: 60px;
  --ribbon-h: 36px;
  --content-max: 1600px;
  --drawer-filters: 440px;
  --drawer-detail: 760px;

  /* Motion */
  --ease: 120ms ease;
  --ease-drawer: 180ms ease;
}

[data-theme="dark"] {
  --canvas: #0b1220;
  --surface: #121a2a;
  --surface-alt: #162033;
  --inset: #1b2740;
  --border: #22304a;
  --border-strong: #334562;
  --text: #e8ebf2;
  --text-secondary: #aeb8ca;
  --text-muted: #8492a8;
  --text-disabled: #5c6a82;
  --accent: #8e97f0;
  --accent-hover: #a4abf5;
  --accent-subtle: rgba(142, 151, 240, 0.14);
  --accent-border: rgba(142, 151, 240, 0.35);
  --danger: #e8796c;
  --danger-bg: rgba(232, 121, 108, 0.14);
  --danger-border: rgba(232, 121, 108, 0.35);
  --warn: #e0a94a;
  --warn-bg: rgba(224, 169, 74, 0.14);
  --warn-border: rgba(224, 169, 74, 0.35);
  --success: #5fbf8b;
  --success-bg: rgba(95, 191, 139, 0.14);
  --success-border: rgba(95, 191, 139, 0.35);
  --info: #5ab6d4;
  --info-bg: rgba(90, 182, 212, 0.14);
  --info-border: rgba(90, 182, 212, 0.35);
  --neutral: #8492a8;
  --neutral-bg: rgba(132, 146, 168, 0.14);
  --chart-resolved: #8492a8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-drawer: -10px 0 28px rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: 0ms;
    --ease-drawer: 0ms;
  }
}