/* GENERATED from ds/src/tokens.css by ds/scripts/sync-site-css.mjs — DO NOT EDIT.
   Edit the design system source and run `make site-css`. */

/* =============================================
   Swingelo design tokens — "competition floor"
   The single source of the look: warm near-black surfaces, spotlight-coral
   energy, teal "your data" accent, and a cool→hot division color ramp.
   Mirrors site/themes.css so the app and the design system stay one language.
   ============================================= */

:root {
  /* surfaces */
  --bg: #14110d; /* warm near-black */
  --bg-card: #1d1812;
  --bg-card-2: #1a150f; /* table / list shells */
  --bg-hover: #221b14;
  --border: rgba(246, 239, 228, 0.08);
  --border-2: rgba(246, 239, 228, 0.14);

  /* ink */
  --ink: #f6efe4; /* warm white */
  --ink-2: #b8ad9d;
  --muted: #8a7f70;
  --muted-2: #7c7264;

  /* accents */
  --accent: #ff6a3d; /* spotlight coral — energy, rank, points */
  --accent-warm: #ff9d3d;
  --accent-2: #46c7c0; /* teal — "your data" / odds / personal */
  --accent-2-bright: #7fe0d8;
  --up: #5fd08a;
  --down: #ff6a6a;

  /* division ramp (cool → hot as level rises) */
  --lvl-newcomer: #6b7a8f;
  --lvl-novice: #3fa7c4;
  --lvl-intermediate: #56b86a;
  --lvl-advanced: #e0b341;
  --lvl-allstar: #ff6a3d;
  --lvl-champion: #d94f8f;

  /* shape + type */
  --radius: 18px;
  --radius-sm: 10px;
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* effects */
  --header-bg: rgba(20, 17, 13, 0.82);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
  --veil:
    radial-gradient(ellipse 70% 55% at 80% -10%, rgba(255, 106, 61, 0.1), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(70, 199, 192, 0.06), transparent 55%);
}