/* ── Design tokens ──────────────────────────────────────────────────────────── */

:root {
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: clamp(0.75rem, 0.72rem + 0.12vw, 0.8rem);
  --step-0: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --step-1: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.35rem + 1.1vw, 2.35rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 560ms;

  --header-h: auto;
  --transport-h: 92px;
  --rail-w: 380px;
}

/* ── Page themes ───────────────────────────────────────────────────────────── */

[data-theme="light"] {
  --paper: #faf9f6;
  --paper-2: #f3f1ec;
  --ink: #14110e;
  --ink-soft: #38332c;
  --muted: #726c62;
  --line: #e2ded5;
  --line-strong: #cfc9bd;
  --panel: #ffffff;
  --panel-2: #f6f4ef;
  --accent: #d52b1e;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgba(20, 17, 14, 0.04), 0 12px 32px -12px rgba(20, 17, 14, 0.18);
  --scrim: rgba(20, 17, 14, 0.28);
  --tooltip-bg: #14110e;
  --tooltip-ink: #faf9f6;
}

[data-theme="dark"] {
  --paper: #0d0e0e;
  --paper-2: #131514;
  --ink: #f2f0eb;
  --ink-soft: #d6d2c9;
  --muted: #948f85;
  --line: #262725;
  --line-strong: #3a3b38;
  --panel: #161817;
  --panel-2: #1c1e1d;
  --accent: #ff5a47;
  --accent-ink: #140d0b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 48px -16px rgba(0, 0, 0, 0.8);
  --scrim: rgba(0, 0, 0, 0.6);
  --tooltip-bg: #f2f0eb;
  --tooltip-ink: #14110e;
}

/* ── Donut palettes ────────────────────────────────────────────────────────── */

[data-palette="deal"] {
  --ring: #227443;
  --ring-ink: #ffffff;
  --body: #6eb446;
  --body-ink: #0a2a14;
  --alarm: #cc0243;
  --alarm-strong: #f30250;
  --alarm-ink: #ffffff;
  --wash: rgba(204, 2, 67, 0.085);
  --wash-strong: rgba(204, 2, 67, 0.16);
  --missing: #b9b9b9;
  --missing-ink: #3a3a3a;
  --tick: rgba(20, 17, 14, 0.35);
  --label-halo: var(--paper);
}

[data-palette="graphite"] {
  --ring: #141414;
  --ring-ink: #ffffff;
  --body: #d9d5cc;
  --body-ink: #141414;
  --alarm: #141414;
  --alarm-strong: #000000;
  --alarm-ink: #ffffff;
  --wash: rgba(20, 20, 20, 0.05);
  --wash-strong: rgba(20, 20, 20, 0.1);
  --missing: #cfcac0;
  --missing-ink: #4a463f;
  --tick: rgba(20, 17, 14, 0.3);
  --label-halo: var(--paper);
}

[data-palette="ocean"] {
  --ring: #0b4f6c;
  --ring-ink: #ffffff;
  --body: #64a9bf;
  --body-ink: #062b3a;
  --alarm: #d9432a;
  --alarm-strong: #f45b3f;
  --alarm-ink: #ffffff;
  --wash: rgba(217, 67, 42, 0.09);
  --wash-strong: rgba(217, 67, 42, 0.17);
  --missing: #b8c6cb;
  --missing-ink: #33474e;
  --tick: rgba(11, 79, 108, 0.4);
  --label-halo: var(--paper);
}

[data-palette="terracotta"] {
  --ring: #7a3b2e;
  --ring-ink: #ffffff;
  --body: #d9a066;
  --body-ink: #3d2119;
  --alarm: #a4161a;
  --alarm-strong: #c81a1f;
  --alarm-ink: #ffffff;
  --wash: rgba(164, 22, 26, 0.08);
  --wash-strong: rgba(164, 22, 26, 0.16);
  --missing: #cdbfae;
  --missing-ink: #55463a;
  --tick: rgba(122, 59, 46, 0.4);
  --label-halo: var(--paper);
}

[data-palette="contrast"] {
  --ring: #000000;
  --ring-ink: #ffffff;
  --body: #ffffff;
  --body-ink: #000000;
  --alarm: #c4005c;
  --alarm-strong: #e6006d;
  --alarm-ink: #ffffff;
  --wash: rgba(196, 0, 92, 0.07);
  --wash-strong: rgba(196, 0, 92, 0.15);
  --missing: #ffffff;
  --missing-ink: #000000;
  --tick: rgba(0, 0, 0, 0.55);
  --label-halo: var(--paper);
  --ring-stroke: #000000;
  --body-stroke: #000000;
}

/* Dark variants */
[data-theme="dark"][data-palette="deal"],
[data-theme="dark"] [data-palette="deal"] {
  --ring: #3a9c62;
  --ring-ink: #06180e;
  --body: #4d7c36;
  --body-ink: #f0f8ea;
  --alarm: #ff3d6e;
  --alarm-strong: #ff6b8f;
  --alarm-ink: #1a0410;
  --wash: rgba(255, 61, 110, 0.085);
  --wash-strong: rgba(255, 61, 110, 0.16);
  --missing: #55575a;
  --missing-ink: #d8d8d8;
  --tick: rgba(242, 240, 235, 0.38);
}

[data-theme="dark"][data-palette="graphite"],
[data-theme="dark"] [data-palette="graphite"] {
  --ring: #e8e4dc;
  --ring-ink: #0d0e0e;
  --body: #2b2c2a;
  --body-ink: #e8e4dc;
  --alarm: #ffffff;
  --alarm-strong: #ffffff;
  --alarm-ink: #000000;
  --wash: rgba(255, 255, 255, 0.045);
  --wash-strong: rgba(255, 255, 255, 0.09);
  --missing: #4e4f4c;
  --missing-ink: #d8d5cd;
  --tick: rgba(242, 240, 235, 0.35);
}

[data-theme="dark"][data-palette="ocean"],
[data-theme="dark"] [data-palette="ocean"] {
  --ring: #2f8fb3;
  --ring-ink: #04161d;
  --body: #3c7f93;
  --body-ink: #eaf6f9;
  --alarm: #ff7a52;
  --alarm-strong: #ff9675;
  --alarm-ink: #2a0a04;
  --wash: rgba(255, 122, 82, 0.09);
  --wash-strong: rgba(255, 122, 82, 0.17);
  --missing: #4d5d63;
  --missing-ink: #d6e2e6;
  --tick: rgba(214, 231, 236, 0.38);
}

[data-theme="dark"][data-palette="terracotta"],
[data-theme="dark"] [data-palette="terracotta"] {
  --ring: #b5654f;
  --ring-ink: #1e0d08;
  --body: #a97f52;
  --body-ink: #fbf3e8;
  --alarm: #ff5a4d;
  --alarm-strong: #ff7f72;
  --alarm-ink: #2a0a08;
  --wash: rgba(255, 90, 77, 0.09);
  --wash-strong: rgba(255, 90, 77, 0.17);
  --missing: #64544a;
  --missing-ink: #e9ded3;
  --tick: rgba(251, 243, 232, 0.38);
}

[data-theme="dark"][data-palette="contrast"],
[data-theme="dark"] [data-palette="contrast"] {
  --ring: #ffffff;
  --ring-ink: #000000;
  --body: #000000;
  --body-ink: #ffffff;
  --alarm: #ff5fa2;
  --alarm-strong: #ff8bbd;
  --alarm-ink: #1a0010;
  --wash: rgba(255, 95, 162, 0.08);
  --wash-strong: rgba(255, 95, 162, 0.16);
  --missing: #000000;
  --missing-ink: #ffffff;
  --tick: rgba(255, 255, 255, 0.55);
  --ring-stroke: #ffffff;
  --body-stroke: #ffffff;
}