/*
 * Variables del panel: color, tipografía, espacio y forma.
 *
 * Salen del sistema de diseño del proyecto (design-system/agent-studio/MASTER.md, ajustado por
 * pages/panel.md). Ningún componente escribe un color suelto: todo pasa por aquí, y el modo
 * claro y el oscuro se cambian solo con estas variables.
 *
 * El naranja de la marca es el color de ACCIÓN. Verde, ámbar, rojo y azul solo dicen ESTADO.
 */

:root {
    /* ---- Modo oscuro, el de siempre */
    --c-fondo: #020617;
    --c-superficie: #0b1121;
    --c-superficie-2: #121a2e;
    --c-superficie-3: #1a2337;
    --c-borde: #1c2537;
    --c-borde-fuerte: #2b3850;
    --c-texto: #f1f5f9;
    --c-texto-2: #94a3b8;
    --c-texto-3: #64748b;

    --c-accion: #e8734a;
    --c-accion-hover: #f2865f;
    --c-accion-texto: #160a05;
    --c-enlace: #f29270;

    --c-bien: #22c55e;
    --c-espera: #f59e0b;
    --c-fallo: #ef4444;
    --c-info: #38bdf8;
    --c-apagado: #64748b;

    /* Los tonos de fondo de un estado: el mismo color, muy rebajado. */
    --c-bien-suave: color-mix(in srgb, var(--c-bien) 14%, transparent);
    --c-espera-suave: color-mix(in srgb, var(--c-espera) 14%, transparent);
    --c-fallo-suave: color-mix(in srgb, var(--c-fallo) 14%, transparent);
    --c-info-suave: color-mix(in srgb, var(--c-info) 14%, transparent);
    --c-apagado-suave: color-mix(in srgb, var(--c-apagado) 18%, transparent);
    --c-accion-suave: color-mix(in srgb, var(--c-accion) 14%, transparent);

    --c-foco: #f8fafc;
    --sombra-flota: 0 12px 32px rgb(0 0 0 / 0.45);

    /* ---- Tipografía: Fira Sans para leer, Fira Code para cifras y horas */
    --f-texto: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-cifras: "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;
    --t-12: 12px;
    --t-13: 13px;
    --t-14: 14px;
    --t-16: 16px;
    --t-20: 20px;
    --t-24: 24px;
    --t-30: 30px;

    /* ---- Espacio (panel denso) y forma */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --r-chico: 6px;
    --r-base: 8px;
    --r-grande: 12px;
    --lateral: 232px;
    --alto-control: 36px;

    --rapido: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);

    color-scheme: dark;

    /* ---- Nombres de antes, apuntando a los nuevos.
     * Las pantallas que todavía no se han rehecho usan estos, y así cambian con el modo. */
    --fondo: var(--c-fondo);
    --fondo-panel: var(--c-superficie);
    --fondo-elevado: var(--c-superficie-2);
    --borde: var(--c-borde-fuerte);
    --borde-suave: var(--c-borde);
    --texto: var(--c-texto);
    --texto-suave: var(--c-texto-2);
    --texto-tenue: var(--c-texto-3);
    --acento: var(--c-accion);
    --acento-hover: var(--c-accion-hover);
    --acento-tenue: var(--c-accion-suave);
    --ok: var(--c-bien);
    --aviso: var(--c-espera);
    --error: var(--c-fallo);
    --radio: var(--r-base);
    --hueco-editor: var(--e-5);
    --mono: var(--f-cifras);
    --sans: var(--f-texto);
}

/* ---- Modo claro: por preferencia del sistema, salvo que se haya elegido otro a mano */
@media (prefers-color-scheme: light) {
    :root:not([data-tema="oscuro"]) {
        --c-fondo: #f6f8fb;
        --c-superficie: #ffffff;
        --c-superficie-2: #f1f4f9;
        --c-superficie-3: #e6ebf2;
        --c-borde: #e3e8ef;
        --c-borde-fuerte: #cbd3df;
        --c-texto: #0f172a;
        --c-texto-2: #475569;
        --c-texto-3: #64748b;
        --c-accion-hover: #d9643c;
        --c-enlace: #b4502b;
        --c-bien: #15803d;
        --c-espera: #b45309;
        --c-fallo: #b91c1c;
        --c-info: #0369a1;
        --c-apagado: #64748b;
        --c-foco: #0f172a;
        --sombra-flota: 0 12px 32px rgb(15 23 42 / 0.14);
        color-scheme: light;
    }
}

:root[data-tema="claro"] {
    --c-fondo: #f6f8fb;
    --c-superficie: #ffffff;
    --c-superficie-2: #f1f4f9;
    --c-superficie-3: #e6ebf2;
    --c-borde: #e3e8ef;
    --c-borde-fuerte: #cbd3df;
    --c-texto: #0f172a;
    --c-texto-2: #475569;
    --c-texto-3: #64748b;
    --c-accion-hover: #d9643c;
    --c-enlace: #b4502b;
    --c-bien: #15803d;
    --c-espera: #b45309;
    --c-fallo: #b91c1c;
    --c-info: #0369a1;
    --c-apagado: #64748b;
    --c-foco: #0f172a;
    --sombra-flota: 0 12px 32px rgb(15 23 42 / 0.14);
    color-scheme: light;
}