/* Pump Kart: the start line at night. Near-black, chalk paint, one purple for racing and levels, one green for the pot's money.
   DESIGN.md is the source of truth for every value here. base.css and site.css only read these tokens. */

@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: "Rubik"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/rubik-latin-800-italic.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"); }

:root {
  color-scheme: dark;

  /* asphalt, darkest well to raised panel */
  --bg: #09090B;
  --bg-2: #050506;
  --surface: #111116;
  --surface-2: #18181F;

  /* painted hairlines, in chalk */
  --line: rgba(244, 242, 238, 0.08);
  --line-2: rgba(244, 242, 238, 0.15);
  --line-3: rgba(244, 242, 238, 0.25);

  /* chalk */
  --ink: #F4F2EE;
  --ink-2: #BDBAC4;
  --muted: #8D8A99;

  /* purple: ONE meaning, race and level. The main action, the headline's second beat, the XP bar.
     --accent is the bright violet for text and marks on black (5.9:1); --accent-strong fills buttons under white text (5.4:1). */
  --accent: #A66CFF;
  --accent-strong: #9333EA;
  --accent-deep: #5B1FA6;
  --accent-wash: rgba(166, 108, 255, 0.12);
  --on-accent: #FFFFFF;
  /* pot green: ONE meaning, the pot's money. Doubles as the good state. */
  --pot: #3DD68C;

  --good: #3DD68C;
  --bad: #FF6B5E;
  --warn: #F5B544;

  --font-display: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 800;
  --display-style: italic;
  --display-tracking: -0.02em;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 0 rgba(244, 242, 238, 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: 64px;

  /* the checkered strip: black and chalk, no extra colour */
  --check: repeating-conic-gradient(#F3F0E8 0 25%, #17161D 0 50%) 0 0 / 12px 12px;
}