/* Design tokens. Adapted from uxrhimanshu.com's system:
   Sans navigates. Serif argues. Mono labels.
   Severity is never carried by colour alone: every level also has an icon
   shape and a text label (see component/index.html#severity). */

:root {
  color-scheme: light dark;
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #efefe9;
  --text: #151513;
  --muted: #5b5b57;
  --faint: #6c6c67;
  --border: #d9d8d0;
  --border-strong: #b9b8b0;
  --accent: #2036c8;
  --accent-soft: #dde6f6;
  --focus: #2036c8;

  /* Severity. Each pair passes 4.5:1 text on its soft background. */
  --notice: #3f6a52;   --notice-soft: #e2eee6;
  --caution: #7a4f00;  --caution-soft: #f5e7c8;
  --stop: #a3333d;     --stop-soft: #f3dcdf;

  /* Neutral chrome for "today" recreations. Deliberately generic. */
  --chrome: #dedcd5;
  --chrome-text: #3d3d3a;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.25rem;
  --step-3: clamp(1.1875rem, 2.4vw, 1.4375rem);
  --step-4: clamp(1.5rem, 3.2vw, 1.875rem);
  --step-6: clamp(2.125rem, 5.4vw, 3.25rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-mid: 1.5;
  --lh-prose: 1.65;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;  --s-9: 6rem;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 99px;
  --shadow: 0 1px 3px rgb(0 0 0 / .08);
  --shadow-lg: 0 8px 28px rgb(0 0 0 / .14);
  --t-fast: .15s ease;
  --t-mid: .24s cubic-bezier(.2, .7, .2, 1);
  --measure: 64ch;
  --maxw: 1120px;
  --target: 44px; /* minimum hit target */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121214; --surface: #1e1f23; --surface-2: #1a1a1e;
    --text: #e9e9e3; --muted: #a9a79f; --faint: #8f8d85;
    --border: #2c2c30; --border-strong: #4a4b52;
    --accent: #93a2ff; --accent-soft: #252f52; --focus: #93a2ff;
    --notice: #8fcaa4; --notice-soft: #1d2e24;
    --caution: #e8bd6a; --caution-soft: #34291a;
    --stop: #ef9aa2;    --stop-soft: #3d2327;
    --chrome: #2a2a2e; --chrome-text: #c9c8c0;
    --shadow-lg: 0 8px 28px rgb(0 0 0 / .5);
  }
}

:root[data-theme="dark"] {
  --bg: #121214; --surface: #1e1f23; --surface-2: #1a1a1e;
  --text: #e9e9e3; --muted: #a9a79f; --faint: #8f8d85;
  --border: #2c2c30; --border-strong: #4a4b52;
  --accent: #93a2ff; --accent-soft: #252f52; --focus: #93a2ff;
  --notice: #8fcaa4; --notice-soft: #1d2e24;
  --caution: #e8bd6a; --caution-soft: #34291a;
  --stop: #ef9aa2;    --stop-soft: #3d2327;
  --chrome: #2a2a2e; --chrome-text: #c9c8c0;
  --shadow-lg: 0 8px 28px rgb(0 0 0 / .5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-mid: 0s; }
}