/*
 * Design tokens: the only place a raw colour, font or size is written down.
 *
 * Everything else (components, admin, the pop-up artwork painted on canvas)
 * takes its values from here. A new colour or size is added here first, shown
 * in the styleguide (/styleguide.html), and only then used.
 * `npm test` fails if a raw colour appears anywhere else in public/css.
 *
 * The palette is the Isle of Thanet: chalk and flint underfoot, a grey-green
 * sea, and Turner's skies — haze, gold and a low ember sun.
 */
:root {
  /* ── Palette: materials ───────────────────────────────────────────────── */
  --c-paper: #f3ead6;        /* the page */
  --c-paper-deep: #e6d8b8;   /* page edges, pressed areas */
  --c-chalk: #fbf8f1;        /* chalk cliffs, chalk lines on the pavement */
  --c-chalk-shade: #ddd5c4;  /* chalk in shadow */
  --c-flint: #3f3c3b;        /* flint nodules, pavement */
  --c-flint-light: #6c6763;
  --c-ink: #2a221d;          /* printed text */
  --c-ink-soft: #5f5248;
  --c-ink-faint: #9a8b7c;
  --c-sea: #6f8d8e;          /* Margate sea, grey-green */
  --c-sea-deep: #3d5c63;
  --c-sky: #bcd0d4;          /* the cool part of a Turner sky */
  --c-haze: #f5e3b3;         /* the warm haze */
  --c-gold: #e3b357;         /* Turner gold */
  --c-ember: #c2502b;        /* fire, the low sun */
  --c-flame: #f0a33c;
  --c-shell: #e9c4b2;        /* the grotto's shells */
  --c-moss: #6f7d4b;         /* turf on the chalk */
  --c-earth: #7a5a3c;
  --c-stock-brick: #c4a66e;  /* yellow stock brick, Margate's Victorian terraces */
  --c-stock-brick-dark: #937649;
  --c-night: #1d2130;        /* around the book on large screens */

  /* ── Palette: roles ───────────────────────────────────────────────────── */
  --color-backdrop: var(--c-night);
  --color-page: var(--c-paper);
  --color-surface: var(--c-chalk);      /* cards and fields on the page */
  --color-text: var(--c-ink);
  --color-text-soft: var(--c-ink-soft);
  --color-text-faint: var(--c-ink-faint);
  --color-accent: var(--c-ember);       /* the one thing to press */
  --color-accent-text: var(--c-chalk);
  --color-highlight: var(--c-gold);
  --color-rule: var(--c-paper-deep);
  --color-focus: var(--c-sea-deep);
  --color-locked: var(--c-ink-faint);
  --color-pavement: var(--c-flint);
  --color-chalk-line: var(--c-chalk);
  --color-error: var(--c-ember);
  --color-shadow: rgb(42 34 29 / 0.18);
  --color-shadow-strong: rgb(42 34 29 / 0.35);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --font-label: 'IM Fell English SC', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Crimson Pro', 'Iowan Old Style', Georgia, serif;
  --font-hand: 'Caveat', 'Bradley Hand', cursive;   /* chalk on the pavement */

  --text-xs: 0.8125rem;   /* 13px: credits */
  --text-sm: 0.9375rem;   /* 15px: labels, captions */
  --text-md: 1.1875rem;   /* 19px: body — read outdoors, on a phone */
  --text-lg: 1.375rem;    /* 22px: lede */
  --text-xl: 1.75rem;     /* 28px: page headings */
  --text-2xl: 2.25rem;    /* 36px: day titles */
  --text-3xl: 3rem;       /* 48px: the book's title, the chant */

  --leading-tight: 1.15;
  --leading-body: 1.5;
  --tracking-label: 0.08em;

  /* ── Space (4px steps, then doubling) ─────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --gutter: var(--space-4);         /* page side margin on a phone */
  --measure: 34rem;                 /* longest comfortable line */
  --tap: 2.75rem;                   /* smallest thing a thumb should hit */

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --shadow-paper: 0 1px 2px var(--color-shadow), 0 6px 18px var(--color-shadow);
  --shadow-lift: 0 2px 4px var(--color-shadow), 0 14px 30px var(--color-shadow-strong);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-paper: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-quick: 160ms;
  --dur-page: 420ms;
  --dur-chant: 1400ms;              /* one word of the chant */

  /* ── Pop-up artwork (read by the canvas painters through js/tokens.js) ── */
  --popup-aspect: 4 / 3.4;          /* the pop-up stage on the page */
  --popup-cover: var(--c-sea-deep); /* the little book's boards */
  --popup-board-edge: var(--c-paper-deep);
}