/*
  OPTIONAL SWAPPABLE FONT FILES
  -----------------------------
  Put any WOFF2 files beside index.html using these names. If a file is absent,
  Sprinkles Racer keeps using the same system-font look as the current build.

  font-brand.woff2    Fallback logo text
  font-display.woff2  Game-over headline and large display text
  font-score.woff2    Distance and best-score numbers
  font-label.woff2    Score labels, eyebrows, pause text, and small UI labels
  font-body.woff2     Paragraphs and descriptive copy
  font-controls.woff2 Buttons, selects, inputs, and setting values
  font-settings.woff2 Settings headings and control names
  font-canvas.woff2   Text drawn directly onto the game canvas
*/

@font-face { font-family: "Sprinkles Brand Custom"; src: url("font-brand.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sprinkles Display Custom"; src: url("font-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sprinkles Score Custom"; src: url("font-score.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sprinkles Label Custom"; src: url("font-label.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sprinkles Body Custom"; src: url("font-body.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sprinkles Controls Custom"; src: url("font-controls.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sprinkles Settings Custom"; src: url("font-settings.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sprinkles Canvas Custom"; src: url("font-canvas.woff2") format("woff2"); font-display: swap; }

:root {
  --font-system: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-brand: "Sprinkles Brand Custom", var(--font-system);
  --font-display: "Sprinkles Display Custom", var(--font-system);
  --font-score: "Sprinkles Score Custom", var(--font-system);
  --font-label: "Sprinkles Label Custom", var(--font-system);
  --font-body: "Sprinkles Body Custom", var(--font-system);
  --font-controls: "Sprinkles Controls Custom", var(--font-system);
  --font-settings: "Sprinkles Settings Custom", var(--font-system);
  --font-canvas: "Sprinkles Canvas Custom", var(--font-system);
}