/*
 * Tokens de la guía de estilo de Shanotei.
 * Fuente: el sistema de diseño "Shanotei" (tokens.json). Si cambia un valor allí, cámbialo aquí.
 * Todos los pares de texto superan 4,5:1 de contraste en ambos temas.
 */

:root {
    color-scheme: light;

    /* Color */
    --superficie: #f6f8fc;
    --superficie-elevada: #ffffff;
    --superficie-hundida: #e9edf5;
    --tinta: #0b0f17;
    --tinta-suave: #4f5b6e;
    --borde: #d8dee9;
    --borde-control: #7b8699;
    --primario: #0052ff;
    --primario-hover: #0042cc;
    --sobre-primario: #ffffff;
    --primario-tinte: #e6eeff;
    --verde-marca: #01bc01;
    --sobre-verde: #06210a;
    --exito: #007a00;
    --aviso: #8a5a00;
    --error: #c62828;
    --foco: #0052ff;

    /* Sombras */
    --elevacion-1: 0 1px 2px rgba(11, 15, 23, 0.06), 0 2px 8px rgba(11, 15, 23, 0.06);
    --elevacion-2: 0 -2px 12px rgba(11, 15, 23, 0.08);

    /* Tipografía */
    --font-titulos: "Lexend", "Segoe UI", system-ui, sans-serif;
    --font-texto: "Figtree", "Segoe UI", system-ui, sans-serif;

    /* Espaciado */
    --espacio-1: 4px;
    --espacio-2: 8px;
    --espacio-3: 12px;
    --espacio-4: 16px;
    --espacio-6: 24px;
    --espacio-8: 32px;

    /* Radios */
    --radio-sm: 8px;
    --radio-md: 14px;
    --radio-lg: 24px;
    --radio-pildora: 999px;

    /* Tamaños */
    --objetivo-tactil: 48px;
    --barra-inferior: 64px;
    --ancho-contenido: 640px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --superficie: #0b0e14;
        --superficie-elevada: #151a23;
        --superficie-hundida: #1e2430;
        --tinta: #eef2f8;
        --tinta-suave: #a3aec0;
        --borde: #2a3240;
        --borde-control: #6b7689;
        --primario: #4d86ff;
        --primario-hover: #77a3ff;
        --sobre-primario: #0a0f1a;
        --primario-tinte: #13234a;
        --exito: #01bc01;
        --aviso: #f5b83d;
        --error: #ff6b6b;
        --foco: #4d86ff;

        --elevacion-1: 0 1px 2px rgba(0, 0, 0, 0.5);
        --elevacion-2: 0 -1px 0 rgba(255, 255, 255, 0.06);
    }
}