/* The ratified design system — DESIGN.md made real, served to the app.
   Every value here traces to a table in DESIGN.md; change it there first.
   This is the token block of design/tokens.css; the component styles live
   with the markup they style (the HTML strings in api.py, for now).
   Dark follows the OS (ratified: the customer's phone decides, no toggle). */

:root {
  /* colour — light */
  --surface: #faf6ef;
  --ink: #23201b;
  --ink-dim: #6d6459;
  --ink-placeholder: #6d6459;
  --ink-checked: #a89e91;        /* D2: dim by intent; pending items never wear this */
  --accent: #c2410c;             /* D3: only where tapping does something */
  --on-accent: #fff;
  --chip: #efe7d9;
  --rule: #e5dbc9;
  --edge: #e2d8c6;
  --box-line: #c4b8a4;
  --input-bg: #fff;
  --input-edge: #ddd0b8;
  --cat-ink: #6f6353;            /* corrected from A1's #857763, which measured 4.05:1 */

  /* type — D4: the serif is the voice everywhere */
  --font: "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* space & shape */
  --pad: 18px;
  --radius: 8px;

  /* motion — D6: check-off repeats, the finish fires once, nothing else pleases */
  --t-check: 180ms;
  --t-finish: 450ms;
  --t-flash: 600ms;
  --t-toast: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1c1a17;
    --ink: #f0e9dd;
    --ink-dim: #a89e8e;
    --ink-placeholder: #a89e8e;
    --ink-checked: #6f6759;
    --accent: #f97316;
    --on-accent: #1c1a17;
    --chip: #2b2823;
    --rule: #2e2a24;
    --edge: #322e28;
    --box-line: #554f45;
    --input-bg: #262320;
    --input-edge: #3a352e;
    --cat-ink: #9a8d78;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-check: 0ms; --t-finish: 0ms; --t-flash: 0ms; --t-toast: 0ms; }
}