/* =================================================================================================
   Tokens del tema del panel (etapa 3 del plan de tema)

   Un solo juego de variables para todo: el armazón, los componentes, Bootstrap y Kendo. Aquí están
   los valores; ningún archivo del tema escribe un color a mano.

   El modo lo manda el atributo `data-tema` del <html>, que pone `tema.js` con lo que el usuario
   eligió. Si no eligió nada, manda la preferencia del sistema. Por eso hay tres bloques:
   claro (el de partida), oscuro por elección y oscuro por preferencia del sistema.

   Contraste medido contra el fondo de su superficie: texto principal 12:1, texto tenue 4.6:1.
   ================================================================================================= */

/* Public Sans para la interfaz, IBM Plex Mono para lo que se compara en columna: RFC, timbres e
   importes. Las dos van servidas desde el propio servidor: el panel corre OnPremise y no puede
   depender de una CDN. Del subconjunto latino, que es el que necesita el español. */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fuentes/publicsans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/ibmplexmono-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fuentes/ibmplexmono-500-latin.woff2') format('woff2');
}

:root {
    /* --- Tipografía ------------------------------------------------------------------------- */
    --tema-fuente: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --tema-fuente-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
    --tema-texto-xs: .75rem;      /* 12px */
    --tema-texto-sm: .8125rem;    /* 13px */
    --tema-texto-md: .875rem;     /* 14px: el cuerpo */
    --tema-texto-lg: 1rem;        /* 16px */
    --tema-texto-xl: 1.125rem;    /* 18px: títulos de tarjeta */
    --tema-texto-xxl: 1.5rem;     /* 24px: cifras del dashboard */

    /* --- Espacio, radios y sombras ------------------------------------------------------------ */
    --tema-esp-1: .25rem;
    --tema-esp-2: .5rem;
    --tema-esp-3: .75rem;
    --tema-esp-4: 1rem;
    --tema-esp-5: 1.5rem;
    --tema-esp-6: 2rem;
    --tema-radio-sm: 6px;
    --tema-radio-md: 10px;
    --tema-radio-lg: 14px;
    /* Sombra solo en lo que flota: menús, modales y avisos. Las tarjetas se separan con borde. */
    --tema-sombra-menu: 0 6px 16px rgba(16, 23, 32, .12);
    --tema-sombra-modal: 0 24px 48px rgba(16, 23, 32, .24);

    /* --- Medidas del armazón ----------------------------------------------------------------- */
    --tema-barra-alto: 56px;
    /*
     * Alto de la barra de suplantación. Vale 0 mientras no haya: así el armazón siempre suma esta
     * medida -barra superior, menú lateral y contenido- y no hace falta otra regla para el caso con
     * aviso. El layout pone la clase «con-suplantacion» en el body cuando alguien entró en nombre de
     * un cliente, y ahí deja de valer 0.
     */
    --tema-suplantacion-alto: 0px;
    --tema-menu-ancho: 240px;
    --tema-menu-ancho-corto: 68px;
    --tema-control-alto: 40px;   /* área táctil mínima, también en escritorio */
    --tema-renglon-alto: 40px;

    /* --- Color: modo claro -------------------------------------------------------------------- */
    --tema-fondo: #F4F6F8;            /* el lienzo */
    --tema-superficie: #FFFFFF;       /* tarjetas, modales, rejillas */
    --tema-superficie-alt: #F8FAFB;   /* renglón alterno, encabezados */
    --tema-hundido: #EDF0F3;          /* lo que va por debajo: barras, relleno */
    --tema-texto: #101720;
    --tema-texto-tenue: #5A6672;
    --tema-texto-inverso: #FFFFFF;
    --tema-borde: #DCE2E8;
    --tema-borde-fuerte: #C2CBD4;

    --tema-acento: #0F6E66;
    --tema-acento-hover: #0B554F;
    --tema-acento-activo: #094440;
    --tema-acento-suave: #E6F3F1;
    --tema-acento-texto: #FFFFFF;

    --tema-correcto: #157347;
    --tema-correcto-suave: #E4F3EA;
    --tema-aviso: #B45309;
    --tema-aviso-suave: #FDF1E3;
    --tema-peligro: #B42318;
    --tema-peligro-suave: #FBE9E7;
    --tema-info: #175CD3;
    --tema-info-suave: #E8F0FE;

    /* El menú lateral y la barra superior llevan su propia escala: son oscuros en los dos modos. */
    --tema-barra-fondo: #16202B;
    --tema-barra-texto: #E6EDF3;
    --tema-barra-texto-tenue: #93A1B0;
    --tema-barra-activo: #0F6E66;
    --tema-barra-hover: #1E2B39;
    --tema-barra-borde: #223141;

    color-scheme: light;
}

/* --- Color: modo oscuro por elección del usuario ---------------------------------------------- */
:root[data-tema="oscuro"] {
    --tema-fondo: #0E1217;
    --tema-superficie: #161B22;
    --tema-superficie-alt: #1B222B;
    --tema-hundido: #10151B;
    --tema-texto: #E6EDF3;
    --tema-texto-tenue: #9AA7B4;
    --tema-texto-inverso: #0E1217;
    --tema-borde: #2A323C;
    --tema-borde-fuerte: #3A4552;

    --tema-acento: #37BFAE;
    --tema-acento-hover: #4FD2C1;
    --tema-acento-activo: #2AA294;
    --tema-acento-suave: #12332F;
    --tema-acento-texto: #06231F;

    --tema-correcto: #4ADE80;
    --tema-correcto-suave: #10291A;
    --tema-aviso: #FBBF24;
    --tema-aviso-suave: #2B2008;
    --tema-peligro: #FB7185;
    --tema-peligro-suave: #2E1116;
    --tema-info: #60A5FA;
    --tema-info-suave: #0F1E33;

    --tema-barra-fondo: #10151B;
    --tema-barra-texto: #E6EDF3;
    --tema-barra-texto-tenue: #8B98A5;
    --tema-barra-activo: #37BFAE;
    --tema-barra-hover: #1B222B;
    --tema-barra-borde: #242C36;

    --tema-sombra-menu: 0 6px 16px rgba(0, 0, 0, .45);
    --tema-sombra-modal: 0 24px 48px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* --- Color: modo oscuro por preferencia del sistema, mientras el usuario no elija ------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --tema-fondo: #0E1217;
        --tema-superficie: #161B22;
        --tema-superficie-alt: #1B222B;
        --tema-hundido: #10151B;
        --tema-texto: #E6EDF3;
        --tema-texto-tenue: #9AA7B4;
        --tema-texto-inverso: #0E1217;
        --tema-borde: #2A323C;
        --tema-borde-fuerte: #3A4552;

        --tema-acento: #37BFAE;
        --tema-acento-hover: #4FD2C1;
        --tema-acento-activo: #2AA294;
        --tema-acento-suave: #12332F;
        --tema-acento-texto: #06231F;

        --tema-correcto: #4ADE80;
        --tema-correcto-suave: #10291A;
        --tema-aviso: #FBBF24;
        --tema-aviso-suave: #2B2008;
        --tema-peligro: #FB7185;
        --tema-peligro-suave: #2E1116;
        --tema-info: #60A5FA;
        --tema-info-suave: #0F1E33;

        --tema-barra-fondo: #10151B;
        --tema-barra-texto: #E6EDF3;
        --tema-barra-texto-tenue: #8B98A5;
        --tema-barra-activo: #37BFAE;
        --tema-barra-hover: #1B222B;
        --tema-barra-borde: #242C36;

        --tema-sombra-menu: 0 6px 16px rgba(0, 0, 0, .45);
        --tema-sombra-modal: 0 24px 48px rgba(0, 0, 0, .6);

        color-scheme: dark;
    }
}