/*
    Base del tema: la tipografía de la marca, la paleta y la fórmula de escala.

    Lo que está aquí lo comparten el recetario, la cabecera y el pie. Antes cada
    uno declaraba sus colores, así que cambiar el azul de la marca obligaba a
    tocar tres archivos y a acordarse de los tres. Ahora se cambia aquí.

    Cada bloque sigue nombrando sus colores a su manera —`--cabecera-azul`,
    `--pie-azul`— pero apuntando a estos: el nombre dice para qué sirve en su
    sitio y el valor vive en uno solo. Así se puede, por ejemplo, darle otro rojo
    al pie sin perseguir dónde más se usaba ese rojo.

    Se carga siempre y antes que los demás; lo encola `functions.php`.
*/

/*
    Futura Std, la tipografía de la marca.

    Las rutas son relativas a este archivo, así que siguen valiendo esté donde
    esté el tema. Si el sitio de destino ya carga estas fuentes, este bloque
    sobra: se puede borrar y el `font-family` de los bloques las encontrará.

    Heavy va en el 600 y no en el 900: pese al nombre es más ligera que Bold —lo
    dice su `usWeightClass` (650)—, así que en el 900 dejaba un peso «negro» más
    fino que el «negrita».
*/
@font-face { font-family: 'Futura Std'; src: url('../../recetario/fonts/Futura Std Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../../recetario/fonts/Futura Std Book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../../recetario/fonts/Futura Std Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../../recetario/fonts/Futura Std Heavy.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../../recetario/fonts/Futura Std Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../../recetario/fonts/Futura Std Extra Bold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
    /* Azules de la marca. */
    --sanfer-azul: #004a96;
    --sanfer-marino: #0b2e59;
    --sanfer-azul-suave: #5b9bd5;
    --sanfer-celeste: #E1EEF899;
    --sanfer-celeste-fondo: #f4f8fd;
    --sanfer-azul-profundo: #003f80;

    /*
        Dos rojos: no es un descuido de nombres, es que los diseños traen
        valores distintos —el recetario y la cabecera no se maquetaron a la vez—.
        Se dejan separados a propósito para no cambiarle el aspecto a nada al
        unificar. Si se decide que deben ser el mismo, se igualan aquí y queda
        arreglado en todo el tema de una vez.
    */
    --sanfer-rojo: #df0002;
    --sanfer-rojo-vivo: #e4022b;

    /* Textos, bordes y grises. */
    --sanfer-texto: #334155;
    --sanfer-gris: #6b7280;
    --sanfer-borde: rgba(0, 0, 0, 0.1);
    --sanfer-borde-claro: #e8edf3;
    --sanfer-blanco-tenue: rgba(255, 255, 255, 0.28);

    /* Los desplegables de escritorio usan una sans del sistema, como su diseño. */
    --sanfer-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /*
        Aquí NO va `--calc-ratio`, por mucho que se repita en los tres bloques.

        Una variable que referencia a otra se resuelve donde se declara, no
        donde se usa: puesta aquí, su `var(--window-width)` tomaría el ancho de
        este bloque y los descendientes heredarían ya ese número, ignorando el
        suyo. Se probó y el resultado fue que el ratio valía 1 a cualquier
        ancho: nada se reducía al estrechar la ventana y aparecía una barra de
        desplazamiento horizontal.

        Cada bloque declara la fórmula junto a su `--window-width`, que además
        no coincide: el recetario pasa a 1440 en 768px y la cabecera y el pie en
        1024.
    */
}