/* Tokens globales. Modifica las 4 líneas marcadas con OPTION para
   cambiar los colores del grid de respuestas; el resto se actualiza
   en cascada. */
:root {
    /* ---------- Fondos ---------- */
    --bg:                #0a0e1a;
    --bg-elevated:       #131826;
    --surface:           #1a2030;
    --surface-soft:      rgba(255, 255, 255, 0.04);

    /* ---------- Tipografía ---------- */
    --text:              #e8eaf2;
    --text-muted:        #8189a8;
    --text-strong:       #ffffff;

    /* ---------- Bordes ---------- */
    --border:            rgba(255, 255, 255, 0.08);
    --border-strong:     rgba(255, 255, 255, 0.16);

    /* ---------- Paleta neón ---------- */
    --neon-cyan:         #4ddbff;
    --neon-magenta:      #ff4d9d;
    --neon-orange:       #ffa040;
    --neon-green:        #4dffa0;
    --neon-violet:       #9d4dff;
    --neon-yellow:       #ffd24d;
    --neon-blue:         #4d7dff;

    /* ---------- Acento principal de la app ---------- */
    --accent:            var(--neon-cyan);
    --accent-soft:       rgba(77, 219, 255, 0.16);
    --accent-glow:       rgba(77, 219, 255, 0.55);
    --accent-hover:      #6fe6ff;

    /* ---------- Colores del grid de opciones (← edita aquí) ---------- */
    --option-a:          var(--neon-cyan);     /* OPTION A */
    --option-b:          var(--neon-violet);   /* OPTION B (era magenta — chocaba con --wrong) */
    --option-c:          var(--neon-orange);   /* OPTION C */
    --option-d:          var(--neon-yellow);   /* OPTION D (era green — idéntico a --correct) */

    /* ---------- Estados de respuesta ---------- */
    --correct:           #4dffa0;
    --correct-bg:        rgba(77, 255, 160, 0.14);
    --correct-glow:      rgba(77, 255, 160, 0.45);
    --wrong:             #ff5d6e;
    --wrong-bg:          rgba(255, 93, 110, 0.14);
    --wrong-glow:        rgba(255, 93, 110, 0.45);

    /* ---------- Reacciones ---------- */
    --reaction-bg-from:  rgba(255, 195, 100, 0.16);
    --reaction-bg-to:    rgba(255, 110, 200, 0.16);
    --reaction-border:   rgba(255, 195, 100, 0.4);
    --reaction-text:     #ffd9b3;

    /* ---------- Sombras / glow ---------- */
    --shadow:            0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-soft:       0 2px 12px rgba(0, 0, 0, 0.3);
    --glow-soft:         0 0 24px var(--accent-glow);

    /* ---------- Forma ---------- */
    --radius:            14px;
    --radius-lg:         20px;
    --radius-pill:       999px;
    --space:             16px;
}