/* ------------------------------------------------------------------
   Cycling Trivia — sistema de diseño
   Todo vive bajo #cycling-trivia: ni un solo selector global, para que la
   aplicación pueda insertarse en otra página sin tocar sus estilos.

   Dirección visual: señalética de carretera europea. Tipografía condensada
   tipo DIN, fondo azul noche de carrera y el color del maillot de líder como
   acento — amarillo en el Tour, rojo en La Vuelta, rosa en el Giro.
   ------------------------------------------------------------------ */

#cycling-trivia {
    /* Tipografía */
    --ct-font-display: 'Bahnschrift', 'DIN Alternate', 'Archivo Narrow', 'Oswald',
                       'Franklin Gothic Medium', Impact, sans-serif;
    --ct-font-body: 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system, sans-serif;
    --ct-font-data: 'Cascadia Mono', Consolas, ui-monospace, 'SF Mono', monospace;

    /* Base: noche de carrera */
    --ct-ink: #0E1726;
    --ct-ink-2: #16223A;
    --ct-ink-3: #1F2E4A;
    --ct-line: rgba(242, 244, 248, 0.14);
    --ct-line-strong: rgba(242, 244, 248, 0.3);

    /* Texto */
    --ct-chalk: #F2F4F8;
    --ct-slate: #93A2BC;
    --ct-slate-dim: #6B7B96;

    /* Acento: se sobrescribe por competencia desde JS */
    --ct-accent: #FFD400;
    --ct-accent-ink: #1A1400;
    --ct-accent-soft: rgba(255, 212, 0, 0.14);

    /* Estados */
    --ct-good: #2ED47A;
    --ct-good-soft: rgba(46, 212, 122, 0.16);
    --ct-bad: #FF5B5B;
    --ct-bad-soft: rgba(255, 91, 91, 0.16);

    /* Escenario (lo rellena scenes.config.js) */
    --ct-sky-1: #8FC7E8;
    --ct-sky-2: #D6EBF6;
    --ct-sky-3: #F6F1DC;
    --ct-haze: rgba(255, 212, 0, 0.1);
    --ct-road: #3C4250;
    --ct-road-line: #F2F4F8;

    /* Ritmo */
    --ct-gap-xs: 6px;
    --ct-gap-sm: 10px;
    --ct-gap: 16px;
    --ct-gap-lg: 26px;
    --ct-gap-xl: 42px;

    --ct-radius-sm: 4px;
    --ct-radius: 10px;
    --ct-radius-lg: 18px;

    --ct-shadow: 0 18px 44px rgba(4, 9, 18, 0.45);
    --ct-shadow-sm: 0 6px 18px rgba(4, 9, 18, 0.3);

    --ct-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ct-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Escala tipográfica: condensada, con saltos amplios */
    --ct-size-hero: clamp(3rem, 12vw, 7.5rem);
    --ct-size-title: clamp(1.8rem, 5.5vw, 3.4rem);
    --ct-size-lead: clamp(1.05rem, 2.4vw, 1.35rem);
    --ct-size-question: clamp(1.15rem, 3.2vw, 1.75rem);
    --ct-size-body: 1rem;
    --ct-size-label: 0.75rem;
    --ct-size-micro: 0.66rem;
}