/*
 * tokens.css — FUENTE ÚNICA VISUAL de SmithScore.
 *
 * 🔴 Este es el ÚNICO archivo del proyecto donde puede aparecer un color en
 * hexadecimal o una medida en px. Todo lo demás —hojas de estilo y vistas—
 * consume estas variables. Un color suelto en una vista es un color que nunca
 * se actualizará cuando cambie la paleta.
 *
 * No hay build: este archivo se copia a mano a public/css/ (paso B3 de
 * deploy.md). Si se olvida, la web funciona pero se ve rota.
 */

:root {
    /* Superficies y texto */
    --color-fondo: #f6f7f9;
    --color-superficie: #ffffff;
    --color-borde: #e2e5ea;
    --color-texto: #1a1d23;
    --color-texto-atenuado: #666f7d;

    /* Semánticos: cada uno dice algo, no sólo "azul" o "rojo" */
    --color-acento: #1f5f8b;
    --color-aviso: #8a5a00;
    --color-aviso-fondo: #fdf4e3;
    --color-marca: #8a5a00;

    /* Tonos del listado.
       Fondos MUY suaves a propósito: con seis columnas coloreadas, un semáforo
       saturado convierte la tabla en un mosaico y el ojo deja de distinguir qué
       importa. Un tinte deja leer el número, que sigue siendo el dato. */
    --tono-verde-fondo: #e4f4ea;
    --tono-verde-texto: #14663d;
    --tono-amarillo-fondo: #fdf5d8;
    --tono-amarillo-texto: #7a6100;
    --tono-naranja-fondo: #fdeddd;
    --tono-naranja-texto: #8f4711;
    --tono-rosa-fondo: #fce9ef;
    --tono-rosa-texto: #94305a;
    --tono-rojo-fondo: #fbdcdc;
    --tono-rojo-texto: #93211f;
    --tono-rojo-oscuro-fondo: #f2c4c4;
    --tono-rojo-oscuro-texto: #6d1513;

    /* Regímenes del VIX.

       🔴 UNA SOLA FAMILIA DE COLOR que gana intensidad, NO un semáforo. El VIX
       alto no es "malo": para quien está comprado es incómodo, y para quien
       espera para comprar es cuando por fin aparece el margen de seguridad.
       Verde-calma / rojo-pánico contradiría al Smith Score de la tabla de
       abajo, que dice que en la euforia no hay nada que comprar. */
    --vix-1: #dfe4ec;
    --vix-2: #c3cddd;
    --vix-3: #9aabc7;
    --vix-4: #6b83ad;
    --vix-5: #3f568c;
    --vix-marcador: #1a1d23;

    /* Bandas de precio */
    --color-banda-baja: #6b7280;
    --color-banda-media: #1f5f8b;
    --color-banda-alta: #1c6b43;
    --color-banda-fondo: #eef1f5;

    /* Tipografía */
    --fuente-base: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fuente-numeros: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Tipografía ajustada a la baja al pasar el listado de doce a dieciocho
       columnas: cada punto de tamaño se multiplica por dieciocho y decide si la
       tabla cabe en pantalla o hay que desplazarla. */
    --texto-xxs: 10px;
    --texto-xs: 11px;
    --texto-s: 12.5px;
    --texto-m: 15px;
    --texto-l: 24px;
    --texto-xl: 40px;

    /* Espaciado */
    --espacio-1: 4px;
    --espacio-2: 8px;
    --espacio-3: 16px;
    --espacio-4: 24px;
    --espacio-5: 40px;

    /* Formas */
    --radio: 8px;
    --radio-pequeno: 4px;
    --borde-fino: 1px;
    /* El marcador del VIX: tiene que verse sobre la pista sin taparla. */
    --borde-marcador: 2px;
    /* El listado tiene diez columnas: con 760px no cabía y obligaba a
       desplazarse en horizontal. El texto corrido se limita aparte, porque una
       línea de 1180px es incómoda de leer. */
    --ancho-maximo: 1180px;
    --ancho-texto: 68ch;
    /* Ancho mínimo de cada panel de índice antes de que se apilen. */
    --ancho-marca: 72px;
    --ancho-tarjeta: 380px;
    --ancho-indice: 220px;
    /* La gráfica en miniatura del listado. */
    --ancho-chispa: 84px;
    --alto-chispa: 26px;
    --alto-pista-vix: 8px;
    --alto-campo: 38px;
    --alto-icono: 17px;
    --alto-icono-cabecera: 13px;
    --ancho-moat: 74px;
    --espaciado-letras: 0.04em;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-fondo: #14161a;
        --color-superficie: #1c1f25;
        --color-borde: #2c313a;
        --color-texto: #e8eaed;
        --color-texto-atenuado: #9aa3b0;

        --color-acento: #6aa9d4;
        --color-aviso: #e0b055;
        --color-aviso-fondo: #33280f;
        --color-marca: #e0b055;

        /* En oscuro la rampa sube en luminosidad en vez de bajar: sobre
           fondo oscuro, "más intenso" es "más claro". */
        --vix-1: #2a303b;
        --vix-2: #363f50;
        --vix-3: #465471;
        --vix-4: #5a6d95;
        --vix-5: #7489bd;
        --vix-marcador: #e8eaed;

        --color-banda-baja: #98a1af;
        --color-banda-media: #6aa9d4;
        --color-banda-alta: #63bb8b;
        --color-banda-fondo: #262b33;

        /* En oscuro los tintes se invierten: fondo apagado y texto vivo.
           Un fondo claro sobre tema oscuro deslumbraría en cada celda. */
        --tono-verde-fondo: #16301f;
        --tono-verde-texto: #6fc796;
        --tono-amarillo-fondo: #2e2a12;
        --tono-amarillo-texto: #d9c165;
        --tono-naranja-fondo: #33241a;
        --tono-naranja-texto: #dd9866;
        --tono-rosa-fondo: #331a25;
        --tono-rosa-texto: #dd83a7;
        --tono-rojo-fondo: #331a1a;
        --tono-rojo-texto: #e58381;
        --tono-rojo-oscuro-fondo: #451a19;
        --tono-rojo-oscuro-texto: #f09b99;
    }
}