/* Bureau of Canine Political Affiliation — design tokens (Direction B: The Certificate)
   Fonts: <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Courier+Prime:wght@400;700&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> */

:root {
  /* Colour */
  --green-900: #1f3a2d;     /* primary, buttons, headings. Cream on it 10.6:1 */
  --cream-100: #f4ecd8;     /* page + certificate ground */
  --paper-50: #fbf7ea;      /* raised paper: upload, inputs, notices */
  --gold-500: #b8913a;      /* rules, frames, crest. DECORATIVE ONLY (2.5:1 on cream) */
  --gold-300: #e8c77a;      /* gold text on green (7.6:1), scan line */
  --burgundy-700: #7a1f2b;  /* alarm: high stamps, top rosette, share-page CTA (8.6:1 on cream) */
  --biro-600: #2f4f9e;      /* acquittal: CLEARED, tier I, focus ring (6.5:1) */
  --ochre-700: #6e5022;     /* UNDER REVIEW stamp ink (6.2:1) */
  --ink-900: #1c1a14;       /* body text */
  --ink-600: #4a4234;       /* labels, secondary text (8.4:1) */
  --line-200: #c9b98f;      /* paper borders */
  --line-100: #e3d6b6;      /* track / faint dividers */

  /* Tier ramp — rosettes, verdict text. #8a6630 only at >= 24px */
  --tier-1: #2f4f9e; /* Rescue Mutt Revolutionary 0–15 */
  --tier-2: #2e6670; /* Champagne Socialist 16–35 */
  --tier-3: #66624f; /* Floating Voter 36–55 */
  --tier-4: #8a6630; /* Shire Tory 56–75 */
  --tier-5: #8a3a2c; /* Gun-Dog Gentry 76–90 */
  --tier-6: #7a1f2b; /* Full Country Squire 91–100 */

  /* Type */
  --font-display: 'IM Fell English', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-label: 'Courier Prime', 'Courier New', monospace;
  --label-tracking: .16em; /* labels are ALL CAPS */

  --fs-display-xl: 50px;  /* desktop: clamp(52px, 7vw, 96px) */
  --fs-display-l: 30px;   /* desktop 60px */
  --fs-display-m: 26px;   /* italic section heads */
  --fs-body-l: 16px;      /* desktop 19px */
  --fs-body-s: 13px;      /* desktop 15px */
  --fs-button: 17px;      /* weight 600 */
  --fs-label: 12px;       /* desktop 13px */

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px;
  --gutter: var(--space-5);
  --hit-min: 44px;

  /* Radius */
  --radius-0: 0;          /* paper */
  --radius-1: 4px;        /* fields, frame bottoms */
  --radius-pill: 999px;   /* buttons (56px tall) */
  --radius-sheet: 22px;   /* bottom sheet top corners */
  /* arch frame: border-radius: calc(w/2) calc(w/2) 4px 4px */

  /* Lines & depth */
  --rule: 1px solid var(--gold-500);
  --btn-inset: inset 0 0 0 2px var(--green-900), inset 0 0 0 4px var(--gold-500);
  --shadow-1: 0 6px 16px rgba(31,58,45,.22);
  --shadow-2: 0 8px 22px rgba(31,58,45,.28);
  --focus: 3px solid var(--biro-600);

  /* Motion */
  --ease-stamp: cubic-bezier(.2,.9,.3,1.25);
  --ease-rosette: cubic-bezier(.3,1.4,.5,1);
  --ease-sweep: cubic-bezier(.45,0,.55,1);
}

:focus-visible { outline: var(--focus); outline-offset: 3px; }

.tweed {
  background-color: var(--green-900);
  background-image: url("assets/tweed-tile.svg");
  background-size: 48px 48px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
}