/* The Feline Conduct Tribunal: design tokens. A sister to the Bureau of Canine Political
   Affiliation's "Certificate" design (same type and spacing), in candle-black, vellum and gold.
   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&family=UnifrakturMaguntia&display=swap" rel="stylesheet"> */

:root {
  /* Colour */
  --night-900: #1d1824;     /* primary, buttons, headings. Vellum on it 14:1 */
  --vellum-100: #efe6d2;    /* page + charge-sheet ground */
  --paper-50: #f8f2e3;      /* raised paper: upload, inputs, notices */
  --gold-500: #b98d3a;      /* rules, frames, crest. DECORATIVE ONLY */
  --gold-300: #ecc874;      /* gold text on night, scan line */
  --blood-700: #8b1c26;     /* alarm: GUILTY and CHARGED stamps, share-page CTA (7.4:1 on vellum) */
  --verdigris-600: #2c6a60; /* acquittal: ACQUITTED, tier I, focus ring (5.6:1) */
  --ochre-700: #6e5022;     /* UNDER INVESTIGATION stamp ink */
  --ink-900: #1f1a17;       /* body text */
  --ink-600: #4c433a;       /* labels, secondary text */
  --line-200: #cdbb94;      /* paper borders */
  --line-100: #e2d5b6;      /* track / faint dividers */

  /* Tier ramp: wax seals, verdict text */
  --tier-1: #2c6a60; /* Certified Angel 0–15 */
  --tier-2: #3f5f78; /* Lovable Delinquent 16–35 */
  --tier-3: #66615b; /* Morally Grey 36–55 */
  --tier-4: #7d5a2c; /* Petty Tyrant 56–75 */
  --tier-5: #8b1c26; /* Criminal Mastermind 76–90 */
  --tier-6: #4b1838; /* Prince of Darkness 91–100 */

  /* Type */
  --font-display: 'IM Fell English', Georgia, serif;
  --font-black: 'UnifrakturMaguntia', 'IM Fell English', Georgia, serif; /* masthead and 'Charge Sheet' only */
  --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(--night-900), inset 0 0 0 4px var(--gold-500);
  --shadow-1: 0 6px 16px rgba(29,24,36,.22);
  --shadow-2: 0 8px 22px rgba(29,24,36,.28);
  --focus: 3px solid var(--verdigris-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(--night-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; }
}