/* Board — tokens.
 *
 * One family, Archivo variable (wght 400-900, wdth 100-125%), self-hosted, OFL 1.1 beside the
 * file. The display role is the same face run wide and heavy: a drive-thru board is lettered in
 * one voice, and a second family would be a second direction.
 *
 * Two figure accents, not one (design notes §8): --cal carries calories and --caf carries
 * caffeine, so the two figures a drink is looked up for are found before the page is read. Each
 * has a board value and a paper-safe value, because those figures are read on both surfaces.
 * Amber as text on paper is 1.86:1 — `--cal` is never set on `--paper`, `--cal-ink` is.
 *
 * Every ratio below is printed by
 * ClaudeAgent/scripts/analysis/design75board_contrast_2026_09_18.py.
 */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/archivo-var-latin.woff2) format('woff2');
}

:root {
  color-scheme: light dark;

  /* surfaces */
  --paper: #FBF6EE;
  --card: #FFFCF6;
  --board: #241809;
  --board-edge: transparent;

  /* ink, light scheme: 17.41 / 7.39 on paper */
  --ink: #17110B;
  --ink-muted: #5B4F42;
  --accent: #A8320C;          /* 6.24 on paper, 6.56 on card */
  --board-ink: #F7EEDF;       /* 15.09 on board */
  --board-muted: #C6B096;     /* 8.31 on board */

  /* the two figure accents */
  --cal: #F2A93B;             /* 8.69 on board */
  --caf: #6FC7E8;             /* 9.10 on board */
  --cal-ink: #8A4A00;         /* 6.38 on paper, 6.70 on card */
  --caf-ink: #0B5A70;         /* 7.20 on paper, 7.57 on card */

  --line: #E3D6C2;
  --line-strong: #7D6C57;     /* 4.70 on paper — control borders need 3.0 */
  --focus: #A8320C;
  --sel: #F7E3C4;

  --font: Archivo, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wide: 'wdth' 118;
  --normal: 'wdth' 100;

  /* Type scale, 1.22 on a phone opening to 1.28 above 768. The board voice is the top three
     steps; everything a table holds is step 0 and step -1. */
  --t--2: 0.6875rem;
  --t--1: 0.8125rem;
  --t-0: 1rem;
  --t-1: 1.125rem;
  --t-2: 1.375rem;
  --t-3: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  --t-4: clamp(1.875rem, 1.25rem + 3.2vw, 3rem);
  --t-fig: clamp(2.375rem, 1.6rem + 3.9vw, 3.5rem);

  /* 4px base. Rows are tight; the entry above them is not. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --r-s: 4px;
  --r-m: 8px;
  --r-pill: 999px;

  --tap: 44px;
  --wrap: 74rem;

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

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15110C;
    --card: #1D1811;
    --board: #0C0906;
    --board-edge: #2E241B;

    --ink: #F4EADA;           /* 15.78 */
    --ink-muted: #B8A894;     /* 8.11 */
    --accent: #FF8B5E;        /* 8.15 */
    --board-ink: #F7EEDF;     /* 17.26 */
    --board-muted: #C6B096;   /* 9.51 */

    --cal: #F2A93B;           /* 9.94 on board */
    --caf: #6FC7E8;           /* 10.41 on board */
    --cal-ink: #F0A83C;       /* 9.28 on paper */
    --caf-ink: #7FD3F0;       /* 11.17 on paper */

    --line: #332920;
    --line-strong: #8C7A64;   /* 4.55 */
    --focus: #FF8B5E;
    --sel: #3A2B18;
  }
}