/* =====================================================================
   Design tokens: the single source of the game-show identity.

   Everything visual reads from here: the CSS components, the canvas
   podium displays and the Three.js studio (design/theme.js reads these
   custom properties at runtime). Change a value here and the whole show
   follows: HTML, atriles and stage lights.

   Art direction: a modern TV studio. Neutral base (studio blacks, deep
   navy, graphite, dark satin metal) with white for primary information.
   Colour is an accent: it belongs to players, categories, states and
   events, never to whole surfaces.

   Two accent roles, never swapped:
     --signal  cyan   the interface: focus, selection, progress, links
     --spot    amber  the stage light: primary call to action, leader,
                      winner, the show's own branding
   ===================================================================== */

:root {
  color-scheme: dark;

  /* --- Typography ------------------------------------------------- */
  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Broadcast graphics: captions, counters, scores, big titles. */
  --font-display: "Barlow Condensed", "Geist", ui-sans-serif, system-ui, sans-serif;

  --fs-2xs: .6875rem;  /* 11px  micro captions */
  --fs-xs: .75rem;     /* 12px  */
  --fs-sm: .875rem;    /* 14px  */
  --fs-md: 1rem;       /* 16px  body */
  --fs-lg: 1.125rem;   /* 18px  */
  --fs-xl: 1.375rem;   /* 22px  */
  --fs-2xl: 1.75rem;   /* 28px  */
  --fs-question: clamp(1.15rem, .78rem + 1.45vw, 2.05rem);
  --fs-answer: clamp(.95rem, .86rem + .3vw, 1.08rem);
  --fs-display: clamp(2.6rem, 1.6rem + 3.6vw, 4.75rem);
  --fs-code: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.5;
  --tracking-caps: .08em;
  --tracking-display: .01em;

  /* --- Neutral base ------------------------------------------------- */
  --ink-0: #03050a;    /* behind everything: the studio in the dark */
  --ink-1: #060a12;    /* page */
  --ink-2: #0a101c;    /* panel base */
  --ink-3: #0f1727;    /* raised */
  --ink-4: #152036;    /* controls */
  --ink-5: #1c2a45;    /* hover / pressed */
  --graphite: #29354f;
  --metal: #3a4868;

  --text-1: #f1f4fa;   /* primary information */
  --text-2: #b3bed1;   /* secondary */
  --text-3: #8794ab;   /* captions (AA on ink-1..ink-4) */
  --text-dark: #07101c; /* text on light / accent fills */

  --line-1: rgb(160 182 224 / .12);
  --line-2: rgb(160 182 224 / .22);
  --line-3: rgb(160 182 224 / .38);

  /* --- Accents ------------------------------------------------------ */
  --signal: #39cfee;
  --signal-strong: #84e5f8;
  --signal-ink: #03202a;
  --signal-soft: rgb(57 207 238 / .12);
  --signal-line: rgb(57 207 238 / .45);

  --spot: #f6b752;
  --spot-strong: #ffd38c;
  --spot-ink: #2a1702;
  --spot-soft: rgb(246 183 82 / .14);
  --spot-line: rgb(246 183 82 / .5);

  /* --- States ------------------------------------------------------- */
  --success: #3ddc91;
  --success-strong: #8af0bf;
  --success-ink: #03261a;
  --success-soft: rgb(61 220 145 / .14);
  --success-surface: #0c2b20;

  --danger: #ff5f76;
  --danger-strong: #ffa3b1;
  --danger-ink: #33040e;
  --danger-soft: rgb(255 95 118 / .14);
  --danger-surface: #34121b;

  --warning: #ff9f45;
  --warning-soft: rgb(255 159 69 / .14);

  --live: #ff3b5c;     /* the on-air light */

  --gold: #f6c548;
  --silver: #cad4e4;
  --bronze: #dc8c4c;

  /* --- La Bomba: the 3D prop (stage/bomb-prop.js) and its fuse bar ---- */
  --bomb-body: #232c40;   /* cartoon shell: dark slate, never black */
  --bomb-shine: #b9c6dd;  /* the painted highlight */
  --bomb-cap: #c3cad6;    /* metal collar */
  --bomb-fuse: #d8b88a;   /* rope */
  --bomb-flame: #ffad3b;  /* flame and warm glow */
  --bomb-core: #fff1c2;   /* flame core, sparks */
  --bomb-smoke: #7b8296;  /* cartoon puffs after the boom */

  /* --- Player identity --------------------------------------------
     One accent per contestant (rooms hold up to 10). Assigned by
     design/player-identity.js; used by atril, floor ring, stage light,
     name, scoreboard and lobby. Order matters: the first four are the
     most distinct. */
  --player-1: #ff4fa8;  /* magenta */
  --player-2: #33d1f2;  /* cyan */
  --player-3: #ff8a3d;  /* orange */
  --player-4: #9d7cff;  /* violet */
  --player-5: #a6e05a;  /* lime */
  --player-6: #ffd24a;  /* yellow */
  --player-7: #2fe0c0;  /* teal */
  --player-8: #ff6f6f;  /* coral */
  --player-9: #6ea8ff;  /* blue */
  --player-10: #e58cff; /* orchid */

  /* --- Categories (design/categories.js maps names to these) ------ */
  --cat-arte: #f472b6;
  --cat-ciencia: #3ddc91;
  --cat-cine: #ff9f45;
  --cat-cultura: #c4a1ff;
  --cat-deportes: #39cfee;
  --cat-geografia: #8be06a;
  --cat-historia: #f6c548;
  --cat-lengua: #7fdcf0;
  --cat-musica: #ff8fc7;
  --cat-tecnologia: #8fa2ff;
  --cat-default: #b3bed1;

  /* --- Surfaces (satin, slightly lit from above) ------------------- */
  --surface-panel: linear-gradient(180deg, rgb(20 30 50 / .94) 0%, rgb(10 16 28 / .96) 100%);
  --surface-raised: linear-gradient(180deg, #17233a 0%, #0f1828 100%);
  --surface-control: linear-gradient(180deg, #16223a 0%, #111b2e 100%);
  --surface-control-hover: linear-gradient(180deg, #1d2c4a 0%, #15223a 100%);
  --surface-sunken: rgb(3 6 12 / .55);
  --surface-scrim: rgb(3 5 10 / .74);
  --surface-hud: linear-gradient(180deg, rgb(13 21 37 / .92) 0%, rgb(7 12 22 / .92) 100%);

  /* --- Light (accent only: never on everything) -------------------- */
  --edge-highlight: inset 0 1px 0 rgb(255 255 255 / .07);
  --glow-signal: 0 0 0 1px var(--signal-line), 0 0 22px rgb(57 207 238 / .16);
  --glow-spot: 0 0 0 1px var(--spot-line), 0 0 26px rgb(246 183 82 / .18);
  --glow-success: 0 0 0 1px rgb(61 220 145 / .6), 0 0 24px rgb(61 220 145 / .22);
  --glow-danger: 0 0 0 1px rgb(255 95 118 / .6), 0 0 24px rgb(255 95 118 / .2);

  /* --- Shadows (navy tinted, never pure black) --------------------- */
  --shadow-1: 0 2px 10px rgb(1 4 12 / .35);
  --shadow-2: 0 12px 32px rgb(1 4 12 / .5);
  --shadow-3: 0 28px 70px rgb(1 4 12 / .62);

  /* --- Shape -------------------------------------------------------
     Rule: pills for chips, badges and tags; --r-sm for inner badges
     (answer letters, rank numbers); --r-md for controls and answers;
     --r-lg for panels and modals. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Space (4px scale) ------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --gutter: 16px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* --- Motion ------------------------------------------------------
     Short and motivated. Event reactions never hold up the match. */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-stage: 700ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-pop: cubic-bezier(.34, 1.5, .64, 1);
  --banner-hold: 1900ms;   /* how long an EventBanner stays on air */
  --display-hold: 1300ms;  /* how long an atril shows an event before the next */

  /* --- Layers ------------------------------------------------------ */
  --z-stage: 0;
  --z-shell: 1;
  --z-banner: 40;
  --z-confetti: 50;
  --z-float: 60;
  --z-intro: 70;
  --z-modal: 200;
  --z-confirm: 210;
}