/* ---------------------------------------------------------------------------
   Design tokens.

   Visual direction: a case file on good paper. Warm neutral ground, ink-dark
   text, brass accent (the magnifying glass, not the badge). Red is reserved
   exclusively for urgent safety messaging so that it never loses its meaning.
   --------------------------------------------------------------------------- */

:root {
  /* Surfaces & ink -------------------------------------------------------- */
  --bg: #f6f3ec;
  --bg-grain: #efeae0;
  --surface: #fffdf8;
  --surface-2: #f2ede3;
  --surface-sunk: #ebe5d8;
  --ink: #1b1917;
  --ink-2: #4b463f;
  --ink-3: #7a7368;
  --line: #ded6c6;
  --line-strong: #c7bda9;

  /* Accents --------------------------------------------------------------- */
  --brass: #9a641b;          /* primary action, case chrome */
  --brass-soft: #f3e6cf;
  --brass-ink: #6f4711;
  --teal: #196b64;           /* affirmative / relieving factors */
  --teal-soft: #dcefec;
  --indigo: #3c4a86;         /* nerve-pattern accent */
  --indigo-soft: #e3e6f4;

  /* Urgent — only ever for safety escalation ------------------------------ */
  --urgent: #a92218;
  --urgent-soft: #fbe6e3;
  --urgent-line: #e5b4ae;

  /* Pattern-strength ramp (qualitative, never numeric) -------------------- */
  --s-strong: #14625b;
  --s-moderate: #8a5b12;
  --s-overlap: #5c5a54;
  --s-low: #7a7368;
  --s-more: #6a6f7d;

  /* Type ------------------------------------------------------------------ */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    ui-serif, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    monospace;

  /* Scale — 16px base, generous for one-handed phone reading -------------- */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 1.875rem;
  --t-3xl: 2.375rem;

  /* Space, radius, depth -------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgb(40 30 10 / 0.06), 0 2px 8px rgb(40 30 10 / 0.05);
  --shadow-2: 0 2px 4px rgb(40 30 10 / 0.07), 0 10px 28px rgb(40 30 10 / 0.09);

  /* Layout ---------------------------------------------------------------- */
  --measure: 40rem;          /* comfortable reading column */
  --measure-wide: 56rem;
  --tap: 48px;               /* minimum interactive target */
}

/* Dark mode: cool slate rather than pure black, so the brass stays warm and
   the paper metaphor survives. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131519;
    --bg-grain: #171a1f;
    --surface: #1c1f25;
    --surface-2: #23272f;
    --surface-sunk: #101216;
    --ink: #eef0f4;
    --ink-2: #b6bcc7;
    --ink-3: #868d9a;
    --line: #2f353f;
    --line-strong: #414956;

    --brass: #e0ad61;
    --brass-soft: #33291a;
    --brass-ink: #f0cf9d;
    --teal: #63c1b5;
    --teal-soft: #16302e;
    --indigo: #98a4e0;
    --indigo-soft: #1e2340;

    --urgent: #ff8a7d;
    --urgent-soft: #3a1c19;
    --urgent-line: #6d3129;

    --s-strong: #63c1b5;
    --s-moderate: #e0ad61;
    --s-overlap: #a8aebb;
    --s-low: #868d9a;
    --s-more: #9aa3b6;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.25);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 10px 28px rgb(0 0 0 / 0.4);
  }
}

/* Explicit override from the theme toggle wins in both directions. */
:root[data-theme="dark"] {
  --bg: #131519;
  --bg-grain: #171a1f;
  --surface: #1c1f25;
  --surface-2: #23272f;
  --surface-sunk: #101216;
  --ink: #eef0f4;
  --ink-2: #b6bcc7;
  --ink-3: #868d9a;
  --line: #2f353f;
  --line-strong: #414956;

  --brass: #e0ad61;
  --brass-soft: #33291a;
  --brass-ink: #f0cf9d;
  --teal: #63c1b5;
  --teal-soft: #16302e;
  --indigo: #98a4e0;
  --indigo-soft: #1e2340;

  --urgent: #ff8a7d;
  --urgent-soft: #3a1c19;
  --urgent-line: #6d3129;

  --s-strong: #63c1b5;
  --s-moderate: #e0ad61;
  --s-overlap: #a8aebb;
  --s-low: #868d9a;
  --s-more: #9aa3b6;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.25);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 10px 28px rgb(0 0 0 / 0.4);
}