/* * ==========================================================
 * TOKENS GLOBALES — WORLDOFDIGITAL
 *
 * ! AUTORIDAD ÚNICA de variables reutilizables.
 * ! Esta hoja NO pinta nada: no contiene body, reset, fondos,
 * ! navbar, layouts ni componentes. Solo declara tokens, así
 * ! que puede cargarse en cualquier página cliente sin efectos
 * ! laterales (ese era el problema de "tema-global.css", que
 * ! además define body/::before y no podía entrar en Index).
 *
 * ! Capas separadas a propósito:
 * !   1. IDENTIDAD WOD        → cian / magenta del proyecto
 * !   2. PLATAFORMA           → identidad del PRODUCTO (Xbox…)
 * !   3. ESTADO SEMÁNTICO     → peligro, aviso, éxito, puntos…
 * !   4. COMPONENTE           → vive en su propio CSS
 *
 * ! Un tema global futuro (Navidad, Halloween) podrá cambiar
 * ! superficies y acento WOD SIN tocar los tokens de plataforma:
 * ! un badge Xbox debe seguir siendo verde Xbox siempre.
 *
 * ! Valores tomados del proyecto, no inventados: proceden de
 * ! los :root previos de "Pantalla principal.css" y
 * ! "tema-global.css", que ya no los duplican.
 * ========================================================== */

:root {
    /* * ======================================================
     * IDENTIDAD WOD
     * ====================================================== */
    --wod-cyan: #0FF0FC;
    --wod-cyan-rgb: 15, 240, 252;
    --wod-magenta: #ff2ec4;
    --wod-magenta-rgb: 255, 46, 196;

    /* ! Tinta oscura para texto SOBRE relleno neón.
     * ! Sobre cian ~13.5:1 y sobre magenta ~5.8:1;
     * ! el blanco sobre magenta solo llega a 3.3:1. */
    --wod-tinta: #06121a;

    /* ? Alias históricos con consumidores en todo el proyecto. */
    --accent-global: var(--wod-cyan);
    --accent-secondary: #00aaff;

    /* * ======================================================
     * TEXTO
     * ====================================================== */
    --text-light: #F4F4F5;
    --text-muted: #94A3B8;

    /* * ======================================================
     * SUPERFICIES
     * ====================================================== */
    --bg-dark: #070709;
    --surface-dark: #121215;
    --surface-hover: #1a1a1f;

    /* * ======================================================
     * ESTADOS SEMÁNTICOS
     *
     * ! Describen QUÉ significa la acción, nunca una plataforma.
     * ====================================================== */
    --wod-danger: #dc3545;
    --wod-danger-rgb: 220, 53, 69;
    --wod-danger-claro: #ff6b7a;

    --wod-warning: #ffc107;
    --wod-warning-rgb: 255, 193, 7;

    --wod-success: #22c55e;
    --wod-success-rgb: 34, 197, 94;

    /* ? Puntos WOD: dorado propio del programa de recompensas. */
    --wod-points: #ffc107;

    /* ? Favorito = afecto, no plataforma: rojo/magenta propio. */
    --wod-favorito: #ef476f;
    --wod-favorito-rgb: 239, 71, 111;
    --wod-favorito-claro: #ff5b78;

    /* ! "Añadir al carrito" es una acción de WorldOfDigital, NO
     * ! el verde de Xbox. P2C lo fija en cian WOD: único
     * ! consumidor verificado, .panel-emergente-accion--add. */
    --wod-add: var(--wod-cyan);
    --wod-add-rgb: var(--wod-cyan-rgb);

    /* * ======================================================
     * PLATAFORMAS — IDENTIDAD DEL PRODUCTO
     *
     * ! Se aplican según los datos del producto y NUNCA según
     * ! body.theme-*: un producto Xbox se ve Xbox en Home, en
     * ! Favoritos, en el Carrito o en cualquier otra vista.
     * ! "Suscripciones" usa el naranja de Crunchyroll, que es
     * ! el servicio principal de esa categoría.
     * ====================================================== */
    --color-xbox: #10E52C;
    --color-xbox-rgb: 16, 229, 44;

    --color-pc: #33bbff;
    --color-pc-rgb: 51, 187, 255;

    --color-ps: #0070D1;
    --color-ps-rgb: 0, 112, 209;

    --color-suscripciones: #F47521;
    --color-suscripciones-rgb: 244, 117, 33;
}