/* FAMOUS: on air. Broadcast navy, cream, and one on-air red. Every colour, font, radius and easing the site uses is a
   token here; base.css and famous.css only read them. DESIGN.md has the jobs and the budget. */
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage.woff2) format("woff2-variations"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/figtree.woff2) format("woff2-variations"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;

  /* ground and surfaces: broadcast navy, darkest to lightest */
  --bg: #0a1640;
  --bg-2: #0d1b4b;
  --surface: #122257;
  --surface-2: #182a66;

  /* hairlines, in cream */
  --line: rgba(243, 235, 221, 0.1);
  --line-2: rgba(243, 235, 221, 0.17);
  --line-3: rgba(243, 235, 221, 0.28);

  /* text */
  --ink: #f3ebdd;
  --ink-2: #c9c3c2;
  --muted: #9399b8;

  /* the set: the TV's body, and what's printed on it */
  --set: #ede3cf;
  --set-2: #e2d6bd;
  --set-ink: #0a1640;
  --screen: #050b24;

  /* ONE accent with ONE meaning: on air. The ON AIR light, the main action, live. Text on it is navy. */
  --accent: #ff5242;
  --on-accent: #0a1640;
  --light-off: #2a3566;

  /* states only, never decoration */
  --good: #7ee0a8;
  --bad: #ffa3b5;
  --warn: #f6c453;

  /* display shouts, text talks, mono keeps the receipts */
  --font-display: "Bricolage Grotesque", "Arial Black", ui-sans-serif, sans-serif;
  --font-text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 60px -34px rgba(2, 6, 24, 0.95);

  /* quick out, settles exactly */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t: 280ms;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 68px;
}