/* How Trump Is Your Dog? — design tokens ("the gold room")
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400;1,6..96,600&family=Archivo:wght@400;500;600;700;800&display=swap" rel="stylesheet"> */

:root {
  /* Colour */
  --navy-800: #16130e;      /* ink black: primary, buttons, headings (named for the old palette) */
  --navy-950: #0c0a07;      /* deepest black: header band */
  --parchment: #fbf7ec;     /* ivory page ground */
  --paper-50: #ffffff;      /* raised white: forms, inputs, cards */
  --gold-500: #c79a2b;      /* gold: frames, rules, numerals on black. DECORATIVE on ivory (2.6:1) */
  --gold-300: #ecd27c;      /* light gold: text on black */
  --gold-700: #8a6a12;      /* dark gold: gold text on ivory (5.2:1) */
  --yellow: #ecd27c;        /* light gold on black (12:1) */
  --red-700: #b3121d;       /* tie red: main buttons, top ratings (6.6:1 on ivory) */
  --red-500: #7d0b12;       /* dark red: button undersides */
  --blue-600: #2a5db0;      /* focus ring only */
  --grey-600: #55565c;      /* low ratings (6.6:1) */
  --ink-900: #16130e;       /* body text */
  --ink-700: #2a251c;       /* long-form text */
  --ink-600: #4a4437;       /* labels, secondary text (8.6:1) */
  --line-200: #d8ccb0;      /* borders */
  --line-100: #ece3cc;      /* track / faint dividers */


  /* Type */
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-label: 'Archivo', system-ui, sans-serif; /* bold, letter-spaced caps */
  --font-chyron: 'Anton', 'Impact', 'Arial Narrow', sans-serif; /* big numerals, headlines, buttons */
  --label-tracking: .16em; /* labels are ALL CAPS */

  --fs-display-xl: 42px;  /* desktop: clamp(52px, 6vw, 84px) */
  --fs-display-l: 30px;
  --fs-display-m: 24px;   /* section heads */
  --fs-body-l: 16px;      /* desktop 18px */
  --fs-body-s: 14px;      /* desktop 15px */
  --fs-button: 18px;      /* weight 700 */
  --fs-label: 11px;       /* desktop 12px */

  /* 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;
  --radius-1: 6px;        /* buttons, fields */
  --radius-pill: 999px;   /* chips */
  --radius-sheet: 18px;   /* bottom sheet top corners */

  /* Lines & depth */
  --rule: 1px solid var(--gold-500);
  --btn-inset: inset 0 0 0 2px var(--gold-500);
  --shadow-1: 0 6px 16px rgba(22,19,14,.18);
  --shadow-2: 0 10px 26px rgba(22,19,14,.28);
  --focus: 3px solid var(--blue-600);

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

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

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