/* =============================================================================
   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: #EF7921;
    --ch-distri: #BE6410;
    --ch-retail: #0A7A69;
    --ch-corp: #3A4CA3;

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

    /* Acento activo: lo pisa [data-channel] según la unidad de la pantalla */
    --accent: var(--ch-distri);
    --accent-soft: color-mix(in srgb, var(--accent) 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: #EF7921;
        --ch-distri: #F2934A;
        --ch-retail: #3FBFA6;
        --ch-corp: #8B9CF0;

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

        --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: #EF7921;
    --ch-distri: #F2934A;
    --ch-retail: #3FBFA6;
    --ch-corp: #8B9CF0;

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

    --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); }
[data-channel="retail"]       { --accent: var(--ch-retail); }
[data-channel="corporate"]    { --accent: var(--ch-corp); }
[data-channel="group"]        { --accent: var(--brand); }