/* ===== Design tokens ===================================================== */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f5f5f2;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --surface-sunken: #f0efeb;
  --overlay: rgba(17, 17, 16, 0.36);

  /* Ink (all ≥ 4.5:1 on --surface) */
  --ink: #111110;
  --ink-2: #4a4945;
  --ink-3: #6b6a65;
  --ink-inverse: #ffffff;

  /* Lines */
  --line: #e4e3dc;
  --line-strong: #cbcac2;
  --focus: #1c5cab;

  /* Accent (brand) */
  --accent: #2a78d6;
  --accent-hover: #256abf;
  --accent-ink: #1c5cab;
  --accent-soft: #e9f1fb;

  /* Semantic – always paired with a text label or icon */
  --plan: #52514e;
  --plan-soft: #eeede9;
  --fact: #006300;
  --fact-soft: #e5f3e5;
  --over: #c62f2f;
  --over-soft: #fcebea;
  --pending: #8a5a00;
  --pending-mark: #fab219;
  --pending-soft: #fff4dc;

  /* Pyramid: one sequential hue, saturation = share (light → dark) */
  --seq-1: #cde2fb; --seq-2: #b7d3f6; --seq-3: #9ec5f4; --seq-4: #6da7ec;
  --seq-5: #3987e5; --seq-6: #2a78d6; --seq-7: #1c5cab; --seq-8: #104281;
  --seq-t-1: #0d2f5c; --seq-t-2: #0d2f5c; --seq-t-3: #0d2f5c; --seq-t-4: #0d2f5c;
  --seq-t-5: #0b0b0b; --seq-t-6: #ffffff; --seq-t-7: #ffffff; --seq-t-8: #ffffff;

  /* Type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-hero: clamp(2rem, 1.2rem + 3vw, 3rem);

  /* Shape & depth */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(17, 17, 16, 0.05);
  --shadow-2: 0 2px 6px rgba(17, 17, 16, 0.06), 0 1px 2px rgba(17, 17, 16, 0.04);
  --shadow-pop: 0 18px 48px rgba(17, 17, 16, 0.18);

  /* Spacing */
  --gutter: 16px;
  --sidebar-w: 240px;
  --content-max: 1480px;
  --row-h: 56px;
  --touch: 44px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
}

/* Dark theme: OS preference unless the user forced light ... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0f0e;
    --surface: #1a1a19;
    --surface-2: #1f1f1d;
    --surface-sunken: #141413;
    --overlay: rgba(0, 0, 0, 0.6);
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --ink-3: #a3a29a;
    --ink-inverse: #111110;
    --line: #2c2c2a;
    --line-strong: #43433f;
    --focus: #86b6ef;
    --accent: #3987e5;
    --accent-hover: #5598e7;
    --accent-ink: #86b6ef;
    --accent-soft: #15253a;
    --plan: #c3c2b7;
    --plan-soft: #262624;
    --fact: #4cc24c;
    --fact-soft: #142614;
    --over: #f07a7a;
    --over-soft: #2e1616;
    --pending: #fab219;
    --pending-soft: #2c2310;
    --seq-1: #0d366b; --seq-2: #104281; --seq-3: #184f95; --seq-4: #1c5cab;
    --seq-5: #256abf; --seq-6: #2a78d6; --seq-7: #5598e7; --seq-8: #86b6ef;
    --seq-t-1: #f0efec; --seq-t-2: #f0efec; --seq-t-3: #f0efec; --seq-t-4: #f0efec;
    --seq-t-5: #ffffff; --seq-t-6: #ffffff; --seq-t-7: #0b1a2e; --seq-t-8: #0b1a2e;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.6);
  }
}
/* ... or the user explicitly chose dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0e;
  --surface: #1a1a19;
  --surface-2: #1f1f1d;
  --surface-sunken: #141413;
  --overlay: rgba(0, 0, 0, 0.6);
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --ink-3: #a3a29a;
  --ink-inverse: #111110;
  --line: #2c2c2a;
  --line-strong: #43433f;
  --focus: #86b6ef;
  --accent: #3987e5;
  --accent-hover: #5598e7;
  --accent-ink: #86b6ef;
  --accent-soft: #15253a;
  --plan: #c3c2b7;
  --plan-soft: #262624;
  --fact: #4cc24c;
  --fact-soft: #142614;
  --over: #f07a7a;
  --over-soft: #2e1616;
  --pending: #fab219;
  --pending-soft: #2c2310;
  --seq-1: #0d366b; --seq-2: #104281; --seq-3: #184f95; --seq-4: #1c5cab;
  --seq-5: #256abf; --seq-6: #2a78d6; --seq-7: #5598e7; --seq-8: #86b6ef;
  --seq-t-1: #f0efec; --seq-t-2: #f0efec; --seq-t-3: #f0efec; --seq-t-4: #f0efec;
  --seq-t-5: #ffffff; --seq-t-6: #ffffff; --seq-t-7: #0b1a2e; --seq-t-8: #0b1a2e;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.6);
}