/* ==========================================================================
   TIDELINE DESIGN SYSTEM — tokens
   Civic, calm, trustworthy. Every colour pair used for text meets WCAG AA.
   Layers: primitives (raw ramps) -> semantic roles -> component tokens.
   Components reference ONLY semantic roles, so themes swap in one place.
   ========================================================================== */

:root {
  /* ---- Primitives ------------------------------------------------------ */
  --ocean-950: #061B28;
  --ocean-900: #0B2A3C;
  --ocean-800: #0F3A55;
  --ocean-700: #12466A;
  --ocean-600: #175A87;
  --ocean-500: #1E6A99;
  --ocean-300: #7FB3D5;
  --ocean-200: #B9D6EA;
  --ocean-100: #E3EFF7;
  --ocean-50:  #F2F8FC;

  --cedar-700: #24543E;
  --cedar-600: #2F6B4F;
  --cedar-400: #5FA383;
  --cedar-100: #E2F0E8;

  --gold-600: #A86F0E;
  --gold-500: #E3A12F;
  --gold-300: #F2C878;
  --gold-100: #FBF0D9;

  --coral-700: #9E3520;
  --coral-600: #C2462B;
  --coral-400: #E8826A;
  --coral-100: #FBE6E0;

  --amber-700: #8A5A0B;
  --amber-100: #FCEFD5;

  --ink-950: #0C141B;
  --ink-900: #14202B;
  --ink-800: #1C2A36;
  --ink-750: #233441;
  --ink-700: #334452;
  --ink-500: #5B6B78;
  --ink-400: #7E8D99;
  --ink-300: #A9B5BE;
  --ink-200: #D5DDE3;
  --ink-100: #EEF2F5;
  --ink-50:  #F7F9FA;
  --white:   #FFFFFF;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 — captions, source chips */
  --text-sm: 0.875rem;   /* 14 — secondary body, table cells */
  --text-md: 1rem;       /* 16 — body */
  --text-lg: 1.125rem;   /* 18 — card titles */
  --text-xl: 1.375rem;   /* 22 — section titles */
  --text-2xl: 1.75rem;   /* 28 — page titles */
  --text-3xl: 2.25rem;   /* 36 — hero, stat values */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 700;
  --tracking-caps: 0.06em;

  /* ---- Space (4px grid) ------------------------------------------------ */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ---------------------------------------------------------- */
  --rail-w: 88px;
  --tabbar-h: 64px;
  --content-max: 1200px;
  --tap: 44px;              /* minimum touch target */

  /* ---- Elevation order ------------------------------------------------- */
  --z-map: 1;
  --z-overlay: 500;
  --z-nav: 800;
  --z-sheet: 900;
  --z-toast: 1000;

  /* ---- Semantic roles: LIGHT (default) --------------------------------- */
  color-scheme: light;
  --bg: var(--ink-50);
  --surface: var(--white);
  --surface-2: var(--ink-100);
  --surface-sunk: #EDF1F4;
  --border: var(--ink-200);
  --border-strong: var(--ink-300);

  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);

  --primary: var(--ocean-700);
  --primary-hover: var(--ocean-800);
  --primary-soft: var(--ocean-100);
  --on-primary: var(--white);
  --brand-band: var(--ocean-900);

  --accent: var(--gold-500);
  --accent-soft: var(--gold-100);
  --on-accent: var(--ink-950);

  /* Status — reserved, always shipped with icon + label */
  --ok: var(--cedar-600);        --ok-soft: var(--cedar-100);
  --warn: var(--amber-700);      --warn-soft: var(--amber-100);
  --danger: var(--coral-600);    --danger-soft: var(--coral-100);
  --info: var(--ocean-600);      --info-soft: var(--ocean-100);

  --focus: var(--gold-500);
  --scrim: rgba(6, 27, 40, .45);

  --shadow-sm: 0 1px 2px rgba(12, 20, 27, .06), 0 1px 1px rgba(12, 20, 27, .04);
  --shadow-md: 0 4px 12px rgba(12, 20, 27, .08), 0 1px 3px rgba(12, 20, 27, .06);
  --shadow-lg: 0 16px 40px rgba(12, 20, 27, .16);

  /* Data-viz roles (validated reference palette, slot 1 for single series) */
  --viz-surface: var(--surface);
  --viz-series-1: #2a78d6;
  --viz-series-2: #eb6834;
  --viz-series-3: #1baf7a;
  --viz-grid: var(--ink-200);
  --viz-axis: var(--ink-500);
}

/* ---- Semantic roles: DARK ---------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--ink-950);
    --surface: var(--ink-900);
    --surface-2: var(--ink-800);
    --surface-sunk: #0A1117;
    --border: var(--ink-750);
    --border-strong: var(--ink-700);
    --text: #E8EEF2;
    --text-muted: #9AA9B4;
    --text-inverse: var(--ink-950);
    --primary: var(--ocean-300);
    --primary-hover: var(--ocean-200);
    --primary-soft: #12324A;
    --on-primary: var(--ink-950);
    --brand-band: var(--ocean-950);
    --accent: var(--gold-300);
    --accent-soft: #3A2E14;
    --ok: var(--cedar-400);   --ok-soft: #173327;
    --warn: var(--gold-300);  --warn-soft: #3A2E14;
    --danger: var(--coral-400); --danger-soft: #3D1D16;
    --info: var(--ocean-300); --info-soft: #12324A;
    --scrim: rgba(0, 0, 0, .6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
    --viz-series-1: #3987e5;
    --viz-series-2: #d95926;
    --viz-series-3: #199e70;
    --viz-grid: var(--ink-750);
    --viz-axis: #9AA9B4;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-2: var(--ink-800);
  --surface-sunk: #0A1117;
  --border: var(--ink-750);
  --border-strong: var(--ink-700);
  --text: #E8EEF2;
  --text-muted: #9AA9B4;
  --text-inverse: var(--ink-950);
  --primary: var(--ocean-300);
  --primary-hover: var(--ocean-200);
  --primary-soft: #12324A;
  --on-primary: var(--ink-950);
  --brand-band: var(--ocean-950);
  --accent: var(--gold-300);
  --accent-soft: #3A2E14;
  --ok: var(--cedar-400);   --ok-soft: #173327;
  --warn: var(--gold-300);  --warn-soft: #3A2E14;
  --danger: var(--coral-400); --danger-soft: #3D1D16;
  --info: var(--ocean-300); --info-soft: #12324A;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  --viz-series-1: #3987e5;
  --viz-series-2: #d95926;
  --viz-series-3: #199e70;
  --viz-grid: var(--ink-750);
  --viz-axis: #9AA9B4;
}

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