/* ==========================================================================
   FEDELAN design tokens (direccion "Reset total")
   Negro puro, blanco y una rampa corta de grises. Sin color de marca: el
   color lo pone la foto del producto, nunca la interfaz. Esquina viva en
   todo. Una sola tipografia. La jerarquia se hace con peso (400 contra 700)
   y con gris, nunca con tamaños grandes.

   Si algun dia queremos volver a tener un color propio, alcanza con editar
   --fedelan-accent: vuelve solo en foco y estado activo, que son los unicos
   lugares donde la interfaz usa el acento.
   ========================================================================== */
:root {
    /* ACENTO: unica constante a tocar. Hoy es el mismo negro de la tinta. */
    --fedelan-accent: #000000;
    /* Color del texto que va SOBRE el acento. */
    --fedelan-accent-ink: #FFFFFF;

    /* Base */
    --fedelan-ink: #000000;
    --fedelan-ink-soft: #3B3B3C;
    --fedelan-paper: #FFFFFF;
    /* Campo: el fondo de las fotos de producto, los chips y los inputs. Es
       calido, no gris frio: el catalogo son 51 chocolates, 25 beiges y 10
       camels, y atras de esos marrones un fondo azulado los ensucia. */
    --fedelan-sand: #E8E6E3;
    --fedelan-sand-2: #DDD9D4;
    /* Campo mas claro: agotado y deshabilitado. */
    --fedelan-field-2: #F5F3F1;
    --fedelan-muted: #6C6863;
    --fedelan-muted-2: #92908B;
    --fedelan-line: #D8D4CF;
    --fedelan-line-strong: #000000;
    --fedelan-line-soft: #D8D4CF;

    /* Derivados del acento (no editar: se calculan solos) */
    --fedelan-accent-soft: color-mix(in srgb, var(--fedelan-accent) 12%, #FFFFFF);

    /* Estados. Rojo y verde son los unicos colores con significado. */
    --fedelan-sale: #DA2828; /* 4,87:1 sobre blanco; #E32B2B daba 4,52 y a mitad del fundido bajaba de 4,5 */
    --fedelan-ok: #408267;
    --fedelan-ok-soft: #ECF3F0;
    --fedelan-warn: #A85B00;
    --fedelan-err: #E32B2B;
    --fedelan-err-soft: #FCECEC;

    /* Alias heredados del tema de origen */
    --fedelan-black: var(--fedelan-ink);
    --fedelan-white: var(--fedelan-paper);
    --fedelan-gray: var(--fedelan-sand);
    --fedelan-gray-dark: var(--fedelan-ink-soft);

    /* Tipografia: una sola familia en todo el sitio. */
    --fedelan-font-primary: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --fedelan-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Titulares de la portada de Mango (1 nov 2026): la misma Archivo, ancha
       y en 800 (ver fonts.css). */
    --fedelan-font-titular-stretch: 125%;
    --fedelan-font-titular-weight: 800;

    /* Colores de la portada de Mango, aprobados por Fran el 1 nov 2026. Son
       los unicos colores de interfaz fuera de la rampa de grises: el verde
       del bloque de temporada (y la tabla de la curva sobre el) y el negro
       del bloque de contacto y el pie. */
    --fedelan-temporada: #1F4A42;
    --fedelan-temporada-claro: #D3E4DC;
    --fedelan-temporada-texto: #BFDCCF;
    --fedelan-noche: #111111;
    --fedelan-campo-claro: #F2F1EE;
    --fedelan-whatsapp: #25D366;

    /* Forma: esquina viva en todo, sin sombras. */
    --fedelan-radius: 0px;
    --fedelan-radius-lg: 0px;
    --fedelan-radius-pill: 0px;

    /* Movimiento: una sola curva y una sola duracion. */
    --fedelan-ease: cubic-bezier(0.3, 0, 0, 1);
    --fedelan-dur: 0.3s;

    /* Espaciado */
    --fedelan-header-height: 72px;
    --fedelan-topbar-height: 32px;
    --fedelan-header-total-height: calc(var(--fedelan-header-height) + var(--fedelan-topbar-height));
    --fedelan-container-padding: 32px;
    --fedelan-container: 1440px;
    /* Gutter del catalogo: las fotos casi se tocan, como en el campo gris. */
    --fedelan-gutter: 6px;
}
/* Arriba de 1800 la caja crece una vez y se queda ahi. El catalogo pasa en el
   mismo corte de tres a cuatro columnas, asi la tarjeta se mantiene entre 430 y
   455 en todo el rango de escritorio en vez de achicarse al sumar la columna.
   Mas ancho que esto la tarjeta se infla y entran menos modelos en pantalla,
   que es justo lo que hay que evitar en pantallas grandes. */
@media (min-width: 1800px) {
    :root {
        --fedelan-container: 1760px;
        --fedelan-container-padding: 40px;
    }
}

@media (max-width: 768px) {
    :root {
        --fedelan-container-padding: 16px;
        --fedelan-header-height: 60px;
        --fedelan-gutter: 4px;
    }
}