/* ==========================================================================
   Cannis — pantallas de cuenta (PD-68, reapertura)
   --------------------------------------------------------------------------
   TOKENS. Es el único archivo de la carpeta que declara colores: base.css, componentes.css y
   registro.css consumen `var(--cu-*)` y nada más. Prefijo `cu-`.

   Hay dos capas:

   1. LA MARCA, que cambia por producto. El layout (`resources/views/cuenta/layout.blade.php`)
      la escribe en un <style> DESPUÉS de esta hoja, desde `config/cuenta_marcas.php`:
        --cu-acento        el acento sobre la banda y sobre una hoja oscura
        --cu-acento-hoja   el acento sobre una hoja clara
        --cu-fondo-alto / --cu-fondo-bajo   el degradé de la banda (oscuro en los dos temas)
        --cu-luz           el resplandor de la banda
        --cu-boton / --cu-sobre-boton   el botón principal y su tinta (igual en los dos temas)
        --cu-logo-alto, --cu-logo-ratio, --cu-logo-sangria   el logo
      Los valores de abajo son los de Cannis y valen si una pantalla se pinta sin marca.

   2. EL TEMA, que cambia con `<html data-tema>`: `oscuro`, `claro`, o `sistema` (sigue
      `prefers-color-scheme`). Define el papel, la hoja, la tinta y los estados.
      El papel y la hoja se DERIVAN de la marca (un dejo de su fondo), así que Soporte queda
      violáceo y Comunidad verdoso sin que ninguna hoja lo sepa. Donde el navegador no entiende
      `color-mix()` quedan los neutros de arriba, que también llegan al contraste.

   Cada par texto/fondo se midió por píxel en Chromium (4,5:1 mínimo). Si cambiás un token,
   volvé a medir.
   ========================================================================== */

:root {
    /* ── La marca (la reemplaza el layout) ─────────────────────────────── */
    --cu-acento: #52F29C;
    --cu-acento-hoja: #0A7250;
    --cu-fondo-alto: #0F2341;
    --cu-fondo-bajo: #050D1A;
    --cu-luz: rgba(82, 242, 156, 0.16);
    --cu-boton: #52F29C;
    --cu-sobre-boton: #0A1628;
    --cu-logo-alto: 52px;
    --cu-logo-ratio: 2;
    --cu-logo-sangria: 0;

    /* ── Lo que no cambia con el producto ni con el tema ───────────────── */
    /* La banda es oscura en los dos temas: ahí el blanco es la tinta y no depende de nada. */
    --cu-banda-tinta: #FFFFFF;
    --cu-banda-suave: rgba(255, 255, 255, 0.86);
    --cu-banda-linea: rgba(255, 255, 255, 0.24);
    --cu-banda-anillo: rgba(255, 255, 255, 0.08);
    --cu-banda-trama: rgba(255, 255, 255, 0.04);

    /* ── Tipografía ─────────────────────────────────────────────────────── */
    --cu-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ── Escala de espaciado: una sola ──────────────────────────────────── */
    --cu-s1: 0.375rem;
    --cu-s2: 0.75rem;
    --cu-s3: 1.25rem;
    --cu-s4: 2rem;
    --cu-s5: 3rem;
    --cu-s6: 4.5rem;

    /* ── Formas ─────────────────────────────────────────────────────────── */
    --cu-radio: 20px;
    --cu-radio-md: 14px;
    --cu-radio-sm: 10px;
    --cu-toque: 2.75rem;            /* 44 px: el lado mínimo de lo que se toca */
    --cu-transicion: 0.16s ease;

    /* ── Estados (iguales a los del sitio: el rojo de error ya existía) ─── */
    --cu-error: #B42318;
    --cu-error-fondo: #FDECEA;
    --cu-ok: #067647;
    --cu-ok-fondo: #E4F5EC;
    --cu-info-fondo: #E9EFF7;

    /* ── EL TEMA CLARO (el de fábrica) ──────────────────────────────────── */
    --cu-papel: #E8ECF1;
    --cu-hoja: #FBFCFD;
    --cu-superficie: #FFFFFF;
    --cu-campo: #FFFFFF;
    --cu-tinta: #0A1628;
    --cu-tinta-suave: #44546A;
    --cu-linea: rgba(10, 22, 40, 0.14);
    --cu-borde-campo: rgba(10, 22, 40, 0.56);
    --cu-marca: var(--cu-acento-hoja);
    --cu-marca-suave: rgba(10, 114, 80, 0.10);
    --cu-halo: rgba(10, 22, 40, 0.03);
    --cu-sombra: 0 1px 2px rgba(10, 22, 40, 0.08), 0 28px 56px -22px rgba(10, 22, 40, 0.30);
    --cu-barra: rgba(10, 22, 40, 0.14);
    color-scheme: light;
}

/* ── EL TEMA OSCURO ────────────────────────────────────────────────────── */
:root[data-tema="oscuro"] {
    --cu-papel: #060C16;
    --cu-hoja: #0E1726;
    --cu-superficie: #131E30;
    --cu-campo: #0A121F;
    --cu-tinta: #F1F5F9;
    --cu-tinta-suave: #B8C4D2;
    --cu-linea: rgba(255, 255, 255, 0.12);
    --cu-borde-campo: rgba(255, 255, 255, 0.46);
    --cu-marca: var(--cu-acento);
    --cu-marca-suave: rgba(255, 255, 255, 0.07);
    --cu-halo: rgba(255, 255, 255, 0.025);
    --cu-error: #FF9D9D;
    --cu-error-fondo: rgba(255, 107, 107, 0.12);
    --cu-ok: #6EE7A8;
    --cu-ok-fondo: rgba(82, 242, 156, 0.10);
    --cu-info-fondo: rgba(255, 255, 255, 0.06);
    --cu-sombra: 0 1px 2px rgba(0, 0, 0, 0.40), 0 28px 56px -22px rgba(0, 0, 0, 0.65);
    --cu-barra: rgba(255, 255, 255, 0.16);
    color-scheme: dark;
}

/* El tema del sistema: claro de fábrica y oscuro cuando el navegador lo pide. Es el mismo bloque de arriba: se repite porque CSS no deja
   reutilizar una lista de declaraciones dentro de un @media sin una preprocesadora. */
@media (prefers-color-scheme: dark) {
    :root[data-tema="sistema"] {
        --cu-papel: #060C16;
        --cu-hoja: #0E1726;
        --cu-superficie: #131E30;
        --cu-campo: #0A121F;
        --cu-tinta: #F1F5F9;
        --cu-tinta-suave: #B8C4D2;
        --cu-linea: rgba(255, 255, 255, 0.12);
        --cu-borde-campo: rgba(255, 255, 255, 0.46);
        --cu-marca: var(--cu-acento);
        --cu-marca-suave: rgba(255, 255, 255, 0.07);
        --cu-halo: rgba(255, 255, 255, 0.025);
        --cu-error: #FF9D9D;
        --cu-error-fondo: rgba(255, 107, 107, 0.12);
        --cu-ok: #6EE7A8;
        --cu-ok-fondo: rgba(82, 242, 156, 0.10);
        --cu-info-fondo: rgba(255, 255, 255, 0.06);
        --cu-sombra: 0 1px 2px rgba(0, 0, 0, 0.40), 0 28px 56px -22px rgba(0, 0, 0, 0.65);
        --cu-barra: rgba(255, 255, 255, 0.16);
        color-scheme: dark;
    }
}

/* ── LO QUE SE DERIVA DE LA MARCA ──────────────────────────────────────────
   El papel, la hoja y la tinta toman un dejo del fondo del producto. Sólo donde el navegador entiende color-mix(): en los demás quedan
   los neutros de arriba. Claro: un 7 % del fondo sobre blanco para el papel y un 2,5 % para la hoja; la tinta es el fondo más oscuro de
   la banda. Oscuro: el papel es ese fondo, la hoja es el fondo alto con un poco del bajo, y el campo es más hondo que la hoja. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --cu-papel: color-mix(in srgb, var(--cu-fondo-alto) 8%, #FFFFFF);
        --cu-hoja: color-mix(in srgb, var(--cu-fondo-alto) 2.5%, #FFFFFF);
        --cu-superficie: #FFFFFF;
        --cu-tinta: var(--cu-fondo-bajo);
        --cu-tinta-suave: color-mix(in srgb, var(--cu-fondo-bajo) 74%, #FFFFFF);
        --cu-linea: color-mix(in srgb, var(--cu-fondo-bajo) 14%, transparent);
        --cu-borde-campo: color-mix(in srgb, var(--cu-fondo-bajo) 56%, transparent);
        --cu-marca-suave: color-mix(in srgb, var(--cu-acento-hoja) 10%, transparent);
        --cu-halo: color-mix(in srgb, var(--cu-fondo-alto) 5%, transparent);
    }

    :root[data-tema="oscuro"] {
        --cu-papel: var(--cu-fondo-bajo);
        --cu-hoja: color-mix(in srgb, var(--cu-fondo-alto) 58%, var(--cu-fondo-bajo));
        --cu-superficie: color-mix(in srgb, #FFFFFF 5%, var(--cu-hoja));
        --cu-campo: color-mix(in srgb, #000000 38%, var(--cu-hoja));
        --cu-tinta: #F4F6F8;
        --cu-tinta-suave: color-mix(in srgb, #FFFFFF 78%, var(--cu-hoja));
        --cu-marca-suave: color-mix(in srgb, var(--cu-acento) 12%, transparent);
        --cu-halo: color-mix(in srgb, var(--cu-acento) 5%, transparent);
    }

    @media (prefers-color-scheme: dark) {
        :root[data-tema="sistema"] {
            --cu-papel: var(--cu-fondo-bajo);
            --cu-hoja: color-mix(in srgb, var(--cu-fondo-alto) 58%, var(--cu-fondo-bajo));
            --cu-superficie: color-mix(in srgb, #FFFFFF 5%, var(--cu-hoja));
            --cu-campo: color-mix(in srgb, #000000 38%, var(--cu-hoja));
            --cu-tinta: #F4F6F8;
            --cu-tinta-suave: color-mix(in srgb, #FFFFFF 78%, var(--cu-hoja));
            --cu-marca-suave: color-mix(in srgb, var(--cu-acento) 12%, transparent);
            --cu-halo: color-mix(in srgb, var(--cu-acento) 5%, transparent);
        }
    }
}