/*
 * Design tokens (issue #43): every visual decision is a custom property —
 * screens compose tokens, they never invent values. Neutral palette + one
 * accent (dependency-free 37signals philosophy: beauty as a choice, never
 * bling). Status hues are functional only (badges, flashes).
 *
 * Dark mode is explicitly out of v1 scope: the token layer is the seam —
 * a future `prefers-color-scheme` override of :root restyles everything.
 */

:root {
  /* Neutral palette + the one accent */
  /* Paper, not white (doctrine R18, decided on the pass 1 board). A warm
     ground is not a taste: it *buys* contrast for a warm accent, because
     white is the amber's worst ground — the accent gains 0.4 and the
     mark's signal 0.3 by moving off it, measured in
     test/design_tokens_test.rb. The near-white it replaces was the
     tightest palette we had. */
  --ink: #20242c;
  --muted: #555d69;
  --paper: #f8f5ef;
  --surface: #fffefb;
  --line: #e6e0d5;
  /* The accent is the mark's amber (issue #281, docs/brand.md), darkened
     for text — a shade further since the paper warmed (pass 1): 5.3:1 on
     the paper, and the paper's own white on it 5.3:1. It was the initial
     green, which nobody had chosen. */
  --accent: #8d5c14;
  --accent-ink: #fffefb;
  /* The accent under the pointer and under a press (pass 2). A warm amber
     *lightens* badly — `filter: brightness(1.08)` on it went chalky — so
     the hover state is a darker amber rather than a brighter one, and it
     is a token because two components need the same one. Held to AA for
     white text like the accent itself (test/design_tokens_test.rb). */
  --accent-strong: #74490f;

  /* The mark's own colours, for the mark only (issue #281): the signal on
     a dark ground, and on the app's light ones. Deep amber is 3.6:1 on
     white, a graphic's contrast and never a text colour. */
  --brand-amber: #efb453;
  --brand-amber-deep: #b7791f;

  /* Functional status hues — badge/flash inks on their soft backgrounds,
     all ≥ WCAG AA (4.5:1) for text */
  --success: #256d4a;
  --success-bg: #e8f4ec;
  --success-line: #bcdcc7;
  --info: #2b5cae;
  --info-bg: #e6eefc;
  --info-line: #c4d6f7;
  --warning: #78350f;
  --warning-bg: #fdf3e3;
  --warning-line: #f0ddb4;
  --danger: #a1352c;
  --danger-bg: #faeceb;
  --danger-line: #ecc7c3;
  --neutral-bg: #eceff3;

  /* The faces (doctrine R17, chosen on the pass 1 board): Literata for
     reading, Public Sans for headings, IBM Plex Mono for what is raw. All
     self-hosted under app/assets/fonts with their SIL OFL 1.1 licences —
     never a third party's server (AGENTS.md hard rule 8). The @font-face
     rules are in base.css; these are the three names a screen composes
     with.

     The fallbacks matter for the moment before the face arrives
     (`font-display: swap`) and for a reader who blocks web fonts: a
     serif asks for a serif, and the raw asks for a monospace, so the
     shape of the page survives either way. */
  --font-body: "Literata", Georgia, "Times New Roman", serif;
  --font-headings: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --weight-headings: 600;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.45rem;
  --weight-semibold: 600;
  --weight-bold: 650;
  --leading: 1.55;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 4rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* Shadows (restraint: one soft lift for cards) */
  --shadow-sm: 0 1px 2px rgb(31 36 48 / 0.06);
  --shadow-md: 0 2px 8px rgb(31 36 48 / 0.08);

  /* Focus ring — visible on every interactive element */
  --focus-ring: 2px solid var(--accent);

  /* Content measure */
  --measure: 54rem;
}