/* =============================================================================
   Grupo Luminotecnia — tokens de diseño
   =============================================================================

   Tema claro / oscuro en TRES estados, no dos:

     1. :root                      → paleta clara (la base, siempre definida)
     2. @media (prefers-color-scheme: dark) + :root:not([data-theme="light"])
                                   → oscuro cuando lo pide el sistema operativo
                                     y el usuario no eligió claro explícitamente
     3. :root[data-theme="dark"]   → oscuro porque el usuario lo eligió

   El estado 2 es el que suele faltar y es el que hace que el default "system"
   funcione. El atributo `data-theme` lo escribe PHP (App\Core\Theme) en el HTML
   inicial, así que no hay flash blanco al cargar.

   REGLA: ningún color se define únicamente adentro de un @media o de un
   [data-theme]. Todo color existe primero en :root. Si un componente nuevo
   necesita un color, se agrega acá como token — nunca un hex suelto en la vista.

   La paleta es la del mockup aprobado (docs/mockup-canales.html).
   ========================================================================== */

:root {
    /* Superficies */
    --ground: #F1F3F6;
    --surface: #FFFFFF;
    --surface-2: #E8ECF0;
    --sunken: #F6F8FA;

    /* Líneas */
    --line: #D6DCE3;
    --line-soft: #E6EAEF;

    /* Texto */
    --ink: #141A21;
    --ink-2: #3C4652;
    --muted: #6A7684;
    --on-accent: #FFFFFF;

    /* Marca del Grupo y de cada unidad */
    --brand: #B66000;
    --ch-distri: #A36908;
    --ch-retail: #B66000;
    --ch-corp: #C25616;

    /* Calcomanía imprimible: siempre sobre blanco, no sigue al tema. Misma
       excepción deliberada que el fondo del QR. */
    --sticker-bg: #FFFFFF;
    --sticker-ink: #141A21;
    --sticker-muted: #5B6672;
    --sticker-cut: #B8C0C8;
    --sticker-distri: #EF7921;
    --sticker-retail: #EF7921;
    --sticker-corp: #EF7921;

    /* El mismo tono, un escalón más oscuro, para cuando el acento es TEXTO.
       El acento de interfaz está pensado para pintar fondos y bordes; como
       color de letra sobre fondo claro no llega. El naranja del Grupo da 2,3:1
       contra el fondo de la página y la pestaña activa daba 2,54:1, donde el
       mínimo es 4,5:1. Es la misma idea que los tokens --chart-*: un tono,
       distintos escalones según el trabajo que hace el color. El azul de
       Lumicorp ya pasa con 5,75:1 y por eso vale igual que su acento. En tema
       oscuro pasan los cuatro (5,8:1 a 7,0:1), así que allá valen el acento. */
    --ch-distri-text: #8F5D07;
    --ch-retail-text: #9F5300;
    --ch-corp-text: #AB4C14;
    --brand-text: #9F5300;

    /* Estados */
    --ok: #12704A;
    --warn: #9A6108;
    --crit: #AC3227;
    --ok-bg: #E2F3EA;
    --warn-bg: #FAEEDA;
    --crit-bg: #FAE7E4;

    /* Iconos del menú del panel. Una familia de tonos para distinguir secciones
       de un vistazo; cada uno vale como trazo sobre --surface y sobre su fondo
       suave (color-mix al 14 %). No son colores de marca ni de estado: no se
       usan para decir «bien» o «mal», solo para reconocer a dónde se va. */
    --icon-amber: #B45309;
    --icon-blue: #1D5FBF;
    --icon-teal: #0F766E;
    --icon-indigo: #4F46E5;
    --icon-graphite: #374151;
    --icon-green: #15803D;
    --icon-violet: #7C3AED;
    --icon-rose: #BE185D;
    --icon-cyan: #0E7490;
    --icon-slate: #64748B;
    --icon-magenta: #A21CAF;

    /* Gráficos.
       Escalones propios de los tonos de marca: los colores de interfaz de arriba
       NO pasan las verificaciones como relleno de gráfico —en claro el verde de
       Luminotecnia queda con croma 0.093, bajo el piso, y tira a gris; en oscuro
       los tres caen sobre la banda de luminosidad y encandilan. Mismo tono, otro
       escalón. Los tres separan bien entre sí incluso simulando daltonismo. */
    --chart-distribution: #CC840A;
    --chart-retail: #D95F00;
    --chart-corporate: #8F3E10;
    --chart-group: #B66000;

    /* Serie única de un ranking: sigue al canal, igual que --accent. */
    --chart-accent: var(--chart-group);
    --chart-track: var(--surface-2);
    --chart-grid: var(--line-soft);

    /* Acento activo: lo pisa [data-channel] según la unidad de la pantalla.
       Los tres se declaran JUNTOS también abajo, en cada [data-channel]: una
       propiedad personalizada se resuelve donde está escrita, y esta está
       escrita en :root. Declarar --accent-soft solo acá hacía que se quedara
       con el naranja de Distrisol en los tres canales —el botón cambiaba de
       color y el tinte de atrás no— porque pisar --accent en el <body> ya no
       alcanza a un valor que se computó antes. */
    --accent: var(--ch-distri);
    --accent-text: var(--ch-distri-text);
    --accent-soft: color-mix(in srgb, var(--ch-distri) 12%, transparent);

    /* Formas */
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(16, 22, 30, .06), 0 10px 28px rgba(16, 22, 30, .08);
    --shadow-pop: 0 10px 30px rgba(16, 22, 30, .14);

    /* Tipografía */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Archivo", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    color-scheme: light;
}

/* El usuario no eligió nada y su sistema está en oscuro. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground: #0D1015;
        --surface: #161B21;
        --surface-2: #1E242C;
        --sunken: #11151A;

        --line: #2A313A;
        --line-soft: #222932;

        --ink: #E6EAEF;
        --ink-2: #BFC7D0;
        --muted: #8A95A2;
        --on-accent: #10141A;

        --brand: #EE7D00;
        --ch-distri: #F4A622;
        --ch-retail: #EE7D00;
        --ch-corp: #E7732E;

        /* En oscuro los cuatro acentos ya pasan como texto (de 5,8:1 a 7,0:1
           contra el fondo de la página), así que el token vale el acento tal cual. */
        --ch-distri-text: var(--ch-distri);
        --ch-retail-text: var(--ch-retail);
        --ch-corp-text: var(--ch-corp);
        --brand-text: var(--brand);

        --ok: #4FBE86;
        --warn: #DFA84B;
        --crit: #E8786C;
        --ok-bg: #13291F;
        --warn-bg: #2B2314;
        --crit-bg: #2C1917;

        --icon-amber: #F5B942;
        --icon-blue: #6FA8F5;
        --icon-teal: #3FC7B9;
        --icon-indigo: #9C98F7;
        --icon-graphite: #C3CAD3;
        --icon-green: #5DD08A;
        --icon-violet: #B79CF7;
        --icon-rose: #F286B6;
        --icon-cyan: #5FD3EA;
        --icon-slate: #A3AEBD;
        --icon-magenta: #E879F9;

        /* Gráficos.
           Escalones propios de los tonos de marca: los colores de interfaz de arriba
           NO pasan las verificaciones como relleno de gráfico —en claro el verde de
           Luminotecnia queda con croma 0.093, bajo el piso, y tira a gris; en oscuro
           los tres caen sobre la banda de luminosidad y encandilan. Mismo tono, otro
           escalón. Los tres separan bien entre sí incluso simulando daltonismo. */
        --chart-distribution: #F7BC5A;
        --chart-retail: #F58A1F;
        --chart-corporate: #D96B3A;
        --chart-group: #EE7D00;

        /* Serie única de un ranking: sigue al canal, igual que --accent. */
        --chart-accent: var(--chart-group);
        --chart-track: var(--surface-2);
        --chart-grid: var(--line-soft);

        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
        --shadow-pop: 0 12px 34px rgba(0, 0, 0, .55);

        color-scheme: dark;
    }
}

/* El usuario eligió oscuro. Gana siempre, esté como esté el sistema. */
:root[data-theme="dark"] {
    --ground: #0D1015;
    --surface: #161B21;
    --surface-2: #1E242C;
    --sunken: #11151A;

    --line: #2A313A;
    --line-soft: #222932;

    --ink: #E6EAEF;
    --ink-2: #BFC7D0;
    --muted: #8A95A2;
    --on-accent: #10141A;

    --brand: #EE7D00;
    --ch-distri: #F4A622;
    --ch-retail: #EE7D00;
    --ch-corp: #E7732E;

    /* En oscuro los cuatro acentos ya pasan como texto (de 5,8:1 a 7,0:1
       contra el fondo de la página), así que el token vale el acento tal cual. */
    --ch-distri-text: var(--ch-distri);
    --ch-retail-text: var(--ch-retail);
    --ch-corp-text: var(--ch-corp);
    --brand-text: var(--brand);

    --ok: #4FBE86;
    --warn: #DFA84B;
    --crit: #E8786C;
    --ok-bg: #13291F;
    --warn-bg: #2B2314;
    --crit-bg: #2C1917;

    --icon-amber: #F5B942;
    --icon-blue: #6FA8F5;
    --icon-teal: #3FC7B9;
    --icon-indigo: #9C98F7;
    --icon-graphite: #C3CAD3;
    --icon-green: #5DD08A;
    --icon-violet: #B79CF7;
    --icon-rose: #F286B6;
    --icon-cyan: #5FD3EA;
    --icon-slate: #A3AEBD;
    --icon-magenta: #E879F9;

    /* Gráficos.
       Escalones propios de los tonos de marca: los colores de interfaz de arriba
       NO pasan las verificaciones como relleno de gráfico —en claro el verde de
       Luminotecnia queda con croma 0.093, bajo el piso, y tira a gris; en oscuro
       los tres caen sobre la banda de luminosidad y encandilan. Mismo tono, otro
       escalón. Los tres separan bien entre sí incluso simulando daltonismo. */
    --chart-distribution: #F7BC5A;
    --chart-retail: #F58A1F;
    --chart-corporate: #D96B3A;
    --chart-group: #EE7D00;

    /* Serie única de un ranking: sigue al canal, igual que --accent. */
    --chart-accent: var(--chart-group);
    --chart-track: var(--surface-2);
    --chart-grid: var(--line-soft);

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-pop: 0 12px 34px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* El usuario eligió claro. Explícito, para ganarle a la media query. */
:root[data-theme="light"] {
    color-scheme: light;
}

/* -----------------------------------------------------------------------------
   Acento por unidad de negocio.
   Se pone en <body data-channel="retail"> y toda la pantalla cambia de color.
   -------------------------------------------------------------------------- */

[data-channel="distribution"] {
    --accent: var(--ch-distri);
    --accent-text: var(--ch-distri-text);
    --accent-soft: color-mix(in srgb, var(--ch-distri) 12%, transparent);
    --chart-accent: var(--chart-distribution);
}

[data-channel="retail"] {
    --accent: var(--ch-retail);
    --accent-text: var(--ch-retail-text);
    --accent-soft: color-mix(in srgb, var(--ch-retail) 12%, transparent);
    --chart-accent: var(--chart-retail);
}

[data-channel="corporate"] {
    --accent: var(--ch-corp);
    --accent-text: var(--ch-corp-text);
    --accent-soft: color-mix(in srgb, var(--ch-corp) 12%, transparent);
    --chart-accent: var(--chart-corporate);
}

[data-channel="group"] {
    --accent: var(--brand);
    --accent-text: var(--brand-text);
    --accent-soft: color-mix(in srgb, var(--brand) 12%, transparent);
    --chart-accent: var(--chart-group);
}