/* Turnsby design tokens (R7 "Kraft", owner-approved 2026-10-25).
   Kraft paper and a plywood table edge, umber accent. Light is the default; dark follows the
   device (prefers-color-scheme) unless the page sets data-theme="light" or data-theme="dark"
   on <html>. Every pair used for text meets WCAG AA in both schemes (see tokens/README.md). */

:root {
  /* colour: surfaces */
  --bg: #e6dfd1;          /* the page: kraft */
  --paper: #f3eee4;       /* boxes, fields, panels */
  --paper2: #d3c8b3;      /* avatars, small fills */
  --table: #d9cdb6;       /* the table edge under boards, box headers */
  --hl: #e0d8c8;          /* the picked row */
  --line: #c4b8a3;        /* hairlines and quiet borders (decorative, never the only cue) */
  --frame: #b2a58e;
  /* colour: text and marks */
  --ink: #231f1a;
  --muted: #574e43;
  --link: var(--ink);
  --acc: #5b4636;         /* umber: primary buttons, the turn dot, the logo stone */
  --on-acc: #ffffff;
  --scrim: rgba(29, 26, 22, .45);

  /* turn marks: a shape plus a word, never colour alone */
  --mark-you: var(--acc);     /* filled dot: your turn */
  --mark-wait: var(--muted);  /* hourglass: waiting, invited */
  --mark-done: var(--muted);  /* check: finished, joined */
  --mark-size: 20px;

  /* focus */
  --focus: var(--acc);
  --focus-width: 3px;
  --focus-offset: 3px;

  /* type: vendored faces only (assets/fonts) */
  --head: 'Zilla Slab', Rockwell, serif;
  --body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --fs: 19px;             /* body text */
  --fs-min: 18px;         /* the smallest text anywhere */
  --fs-h1: 40px;
  --fs-h1-phone: 30px;
  --fs-h2: 28px;
  --fs-h2-phone: 24px;
  --fs-h3: 20px;
  --lh: 1.4;

  /* space (4px steps) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 44px;
  --gutter: 40px;
  --gutter-phone: 16px;
  --measure: 1060px;
  --measure-narrow: 640px;

  /* targets */
  --target: 44px;         /* the smallest control */
  --target-row: 48px;
  --target-btn: 52px;

  /* radius: square-cut, like card stock */
  --rad: 2px;
  --rad-frame: 4px;

  /* rules: the signature double rule and the table edge */
  --rule: 2px solid var(--ink);
  --rule-double: 6px double var(--ink);
  --edge: 5px solid var(--ink);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1a16;
    --paper: #29251f;
    --paper2: #3a342b;
    --table: #2f2a23;
    --hl: #322d26;
    --line: #4b443a;
    --frame: #4b443a;
    --ink: #eee7da;
    --muted: #bbaf9d;
    --acc: #dcc3a0;
    --on-acc: #1d1a16;
    --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1d1a16;
  --paper: #29251f;
  --paper2: #3a342b;
  --table: #2f2a23;
  --hl: #322d26;
  --line: #4b443a;
  --frame: #4b443a;
  --ink: #eee7da;
  --muted: #bbaf9d;
  --acc: #dcc3a0;
  --on-acc: #1d1a16;
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}