/* Floodlight — Halftime's web token layer (hand-written, NOT generated).
   The canonical tokens are GENERATED by halftimegame-ios/design/generate.py into
   public/css/pop-riot.css (--pr-*; never hand-edit it — commit it when it
   changes). Every web stylesheet reads --cn-* only; this file maps each --cn-*
   onto the generated variable, with the original hand-picked value as the
   fallback (load order: pop-riot.css, then this file).

   Night is the default (it's game night): the pages always set
   <html data-theme="night"> unless the viewer picked "day game" (data-theme="day"),
   so the generated [data-theme] blocks — not the OS colour scheme — decide. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-var.woff2") format("woff2-variations"), url("/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* type: one self-hosted variable grotesque; display = its condensed cut */
  /* Barlow (body) + Barlow Condensed (display), self-hosted; Bricolage's condensed
     axis is the fallback while the Barlow faces load */
  --cn-font: var(--pr-font, "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --cn-font-display: "Barlow Condensed", "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cn-display-stretch: 75%;
  --cn-display-weight: var(--pr-display-weight, 800);

  /* night-stadium palette */
  --cn-bg: #07121d;
  --cn-bg-2: #0c2033;
  --cn-bg-image:
    radial-gradient(120% 70% at 50% -18%, rgba(214, 236, 255, 0.20), transparent 58%),
    radial-gradient(60% 40% at 8% 0%, rgba(255, 184, 28, 0.10), transparent 70%),
    linear-gradient(180deg, #0c2033 0%, #07121d 62%, #06100a 100%);
  --cn-field-lines: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 12.5vw);
  --cn-surface: #0f2538;
  --cn-surface-2: #163250;
  --cn-glass: rgba(10, 27, 43, 0.86);
  --cn-line: rgba(214, 236, 255, 0.14);
  --cn-line-strong: rgba(214, 236, 255, 0.32);
  --cn-text: #f3f7fb;
  --cn-text-2: #a8bccf;

  --cn-amber: #ffb81c;
  --cn-on-amber: #1b1300;
  --cn-lime: #c6ff3d;
  --cn-on-lime: #0b1a03;
  --cn-flare: #ff5a1f;
  --cn-on-flare: #1c0800;
  --cn-sky: #7cc4ff;
  --cn-accent: var(--cn-amber);
  --cn-on-accent: var(--cn-on-amber);
  --cn-success: var(--cn-lime);
  --cn-on-success: var(--cn-on-lime);
  --cn-danger: var(--cn-flare);
  --cn-on-danger: var(--cn-on-flare);
  --cn-focus: #ffffff;

  /* the card / scoreboard plates */
  --cn-card: #f3f7fb;
  --cn-card-ink: #0a1724;
  --cn-card-ink-2: #3d5468;
  --cn-board: #040b12;
  --cn-board-ink: var(--cn-amber);

  /* game accents (generic sport imagery only) */
  --cn-game-trivia: #ffb81c;
  --cn-game-start-bench-cut: #7cc4ff;
  --cn-game-forehead: #c6ff3d;
  --cn-game-charades: #ff8a3d;
  --cn-game-hot-takes: #ff5a1f;
  --cn-game-most-likely-to: #b59cff;
  --cn-game-bingo: #3ee0c5;
  --cn-game-predictions: #4fa3ff;
  --cn-game-drink-when: #ffd23f;

  /* shape + depth: crisp, flat, lit from above (no offset "sticker" shadows) */
  --cn-radius: 14px;
  --cn-radius-s: 10px;
  --cn-radius-l: 20px;
  --cn-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --cn-shadow-s: 0 4px 14px rgba(0, 0, 0, 0.35);
  --cn-glow: 0 0 0 1px var(--cn-line), 0 14px 40px rgba(0, 0, 0, 0.45);
  --cn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cn-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="day"] {
  color-scheme: light;
  --cn-bg: #e9f0f6;
  --cn-bg-2: #f6f9fc;
  --cn-bg-image:
    radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, 0.95), transparent 60%),
    linear-gradient(180deg, #f6f9fc 0%, #e9f0f6 70%, #dfe9e2 100%);
  --cn-field-lines: repeating-linear-gradient(90deg, rgba(10, 23, 36, 0.035) 0 2px, transparent 2px 12.5vw);
  --cn-surface: #ffffff;
  --cn-surface-2: #f2f6fa;
  --cn-glass: rgba(255, 255, 255, 0.9);
  --cn-line: rgba(10, 23, 36, 0.13);
  --cn-line-strong: rgba(10, 23, 36, 0.3);
  --cn-text: #0a1724;
  --cn-text-2: #44596d;
  --cn-amber: #ffb81c;
  --cn-lime: #b4f224;
  --cn-flare: #ff6a33;
  --cn-focus: #0a1724;
  --cn-board: #0a1724;
  --cn-shadow: 0 10px 28px rgba(10, 23, 36, 0.14);
  --cn-shadow-s: 0 3px 10px rgba(10, 23, 36, 0.12);
  --cn-glow: 0 0 0 1px var(--cn-line), 0 10px 28px rgba(10, 23, 36, 0.12);
}

/* generated → --cn-* (both themes: the generated [data-theme] blocks switch the --pr-* values) */
:root[data-theme] {
  --cn-bg: var(--pr-bg-solid);
  --cn-bg-image: radial-gradient(110% 60% at 50% -20%, rgba(214, 236, 255, 0.16), transparent 60%), var(--pr-bg);
  --cn-surface: var(--pr-surface);
  --cn-surface-2: var(--pr-surface-raised);
  --cn-glass: color-mix(in srgb, var(--pr-surface) 88%, transparent);
  --cn-line: color-mix(in srgb, var(--pr-outline) 16%, transparent);
  --cn-line-strong: color-mix(in srgb, var(--pr-outline) 36%, transparent);
  --cn-text: var(--pr-text-primary);
  --cn-text-2: var(--pr-text-secondary);
  --cn-accent: var(--pr-accent);
  --cn-on-accent: var(--pr-on-accent);
  --cn-lime: var(--pr-chip);
  --cn-on-lime: var(--pr-on-chip);
  --cn-flare: var(--pr-danger);
  --cn-on-flare: var(--pr-on-danger);
  --cn-success: var(--pr-success);
  --cn-on-success: var(--pr-on-success);
  --cn-danger: var(--pr-danger);
  --cn-on-danger: var(--pr-on-danger);
  --cn-card-ink: var(--pr-ink, #06121e);
  --cn-game-trivia: var(--pr-game-trivia);
  --cn-game-start-bench-cut: var(--pr-game-start-bench-cut);
  --cn-game-forehead: var(--pr-game-forehead);
  --cn-game-charades: var(--pr-game-charades);
  --cn-game-hot-takes: var(--pr-game-hot-takes);
  --cn-game-most-likely-to: var(--pr-game-most-likely-to);
  --cn-game-bingo: var(--pr-game-bingo);
  --cn-game-predictions: var(--pr-game-predictions);
  --cn-game-drink-when: var(--pr-game-drink-when);
  --cn-radius: var(--pr-radius-tile);
  --cn-radius-s: var(--pr-radius-chip);
  --cn-radius-l: var(--pr-radius-card);
}
/* Scoreboard amber stays amber at night; in the day theme the generated accent is navy ink. */
:root[data-theme="night"] { --cn-amber: var(--pr-accent); --cn-on-amber: var(--pr-on-accent); }
:root[data-theme="day"] { --cn-amber: var(--pr-game-trivia); --cn-on-amber: var(--pr-ink, #06121e); }

/* shared utilities */
.cn-display {
  font-family: var(--cn-font-display); font-stretch: var(--cn-display-stretch); font-weight: var(--cn-display-weight);
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95;
}
.cn-numerals { font-variant-numeric: tabular-nums; }