/* Lights Out: the race at night. Ink black, white type, one signal red for the lights, levels and the main action, one
   green for the pot's money. The .night scope below carries the same values, for parts that must stay dark whatever the
   page is (the broadcast, the race). DESIGN.md is the source of truth for every value here. base.css and site.css only
   read these tokens. */

/* the site's faces: Archivo (display, the wide italic), Geist (text), JetBrains Mono (numbers and addresses) */
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/fonts/archivo-latin-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/fonts/archivo-latin-normal-var.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-latin-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }
/* the race's own faces: the HUD, the boards and the liveries are drawn in these by name (web/js/game) */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/rubik-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/rubik-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/rubik-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/saira-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/saira-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/saira-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/saira-latin-900-italic.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* the race at night: ink black, darkest well to raised panel */
  --bg: #0A0A0C;
  --bg-2: #050506;
  --surface: #131316;
  --surface-2: #1C1C21;

  /* hairlines, in white */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-3: rgba(255, 255, 255, 0.27);

  /* white */
  --ink: #F7F7F8;
  --ink-2: #BDBDC6;
  --muted: #8B8B95;

  /* signal red: ONE meaning, the lights. The start lights, a coin's level, the main action, the headline's second beat.
     --accent is the red for text and marks on black (5.4:1); buttons fill with --accent-strong under white (4.6:1). */
  --accent: #FF2E3E;
  --accent-strong: #E3101F;
  --accent-deep: #9E0812;
  --accent-wash: rgba(255, 46, 62, 0.13);
  --on-accent: #FFFFFF;
  /* a lit lens, and one that is off (the gantry: web/js/parts.mjs) */
  --lens: radial-gradient(circle at 40% 36%, #FFE3E5 0, #FF5A64 20%, #EE1426 62%, #A80716 100%);
  --lens-off: radial-gradient(circle at 45% 40%, #3A3A42, #1E1E24 70%);
  --pod: #0E0E11;
  /* pot green: ONE meaning, the pot's money. Doubles as the good state. */
  --pot: #2BD67B;
  --pot-fill: #2BD67B;

  --good: #2BD67B;
  --bad: #FF5A4E;
  --warn: #F5B544;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 900;
  --display-style: italic;
  --display-stretch: 112%;
  --display-tracking: -0.035em;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 50px -34px rgba(0, 0, 0, 0.95);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 100ms;
  --t: 220ms;

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

  /* the chequered flag strip: white and ink, no extra colour */
  --check: repeating-conic-gradient(#F7F7F8 0 25%, #16161A 0 50%) 0 0 / 12px 12px;
}

/* night: on the race, and the black bands of the page */
.night, .broadcast, .race-stage, .race-preview, #foot, .ticker, .demo-strip {
  --bg: #0A0A0C;
  --bg-2: #050506;
  --surface: #141417;
  --surface-2: #1D1D22;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-3: rgba(255, 255, 255, 0.27);
  --ink: #F7F7F8;
  --ink-2: #BDBDC6;
  --muted: #8B8B95;
  --accent: #FF2E3E;
  --accent-wash: rgba(255, 46, 62, 0.14);
  --pot: #2BD67B;
  --pot-fill: #2BD67B;
  --good: #2BD67B;
  --bad: #FF5A4E;
  --warn: #F5B544;
  --check: repeating-conic-gradient(#F7F7F8 0 25%, #16161A 0 50%) 0 0 / 12px 12px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 50px -34px rgba(0, 0, 0, 0.95);
  color-scheme: dark;
  color: var(--ink);
}