/* BirdBench design tokens — the only place raw values live.
   Palette is anchored in one bird: the breeding male American Goldfinch.
   ink      = the black wing (shifted subtly green, like fresh feather gloss)
   paper    = the pale breast/undertail — an off-white pushed cooler + greener
              on purpose, so it reads as field-guide paper, not generic cream
   gold     = body plumage. Vivid. Used as fills, marks, and gold-on-ink labels;
              never as thin text on paper (contrast).
   olive    = female / winter plumage. Secondary text + small-caps labels.
              7.0:1 on paper — AA for small text.
   bill     = the pale-orange conical bill. Semantic only: safety boxes, warnings.
   wingbar  = the white wingbar. Plate/panel background sitting on paper. */

:root {
  /* -- plumage ------------------------------------------------ */
  --ink:     #20241E;
  --paper:   #F1F2E9;
  --gold:    #F0B71E;
  --olive:   #50532C;
  --bill:    #B4531F;
  --wingbar: #FFFFFF;

  /* -- derived (mixes of the six, nothing new) ---------------- */
  --line:       color-mix(in srgb, var(--ink) 22%, var(--paper));   /* hairlines, pointer lines */
  --line-soft:  color-mix(in srgb, var(--ink) 11%, var(--paper));   /* row rules */
  --gold-wash:  color-mix(in srgb, var(--gold) 26%, var(--paper));  /* highlight fills */
  --olive-wash: color-mix(in srgb, var(--olive) 9%, var(--paper));  /* alt panels */
  --bill-wash:  color-mix(in srgb, var(--bill) 10%, var(--wingbar));/* safety-box fill */
  --ink-soft:   color-mix(in srgb, var(--ink) 78%, var(--paper));   /* long-form body text */

  /* -- type --------------------------------------------------- */
  --font-display: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* modular-ish scale, 16px base */
  --step--1: 0.8125rem;                       /* 13px — labels, meta */
  --step-0:  1rem;                            /* body */
  --step-1:  1.1875rem;                       /* 19px — lead, h4 */
  --step-2:  1.5rem;                          /* h3 */
  --step-3:  2rem;                            /* h2 */
  --step-4:  clamp(2.375rem, 1.6rem + 3vw, 3.5rem); /* h1 / hero */

  /* -- space (4px base) --------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* -- misc --------------------------------------------------- */
  --wrap: 68rem;        /* page width */
  --wrap-text: 42rem;   /* article measure */
  --radius: 2px;        /* near-square: paper cards, not SaaS pills */
  --hairline: 1px;
  --focus-ring: 2px solid var(--ink);
}