/*
 * Tema NEUTRO de Iris — el punto de partida de una web nueva.
 *
 * Copia este archivo sobre `../tokens.css` y edítalo: los colores y la
 * tipografía de aquí no son de ninguna marca, así que una web recién
 * instalada nace sobria en vez de nacer con la identidad de otra.
 *
 * La escala tipográfica y la de espaciado se conservan tal cual, y eso
 * es deliberado: no son identidad de marca sino el SISTEMA con el que
 * están construidos todos los bloques. Cambiarlas descuadraría los
 * diseños; cambiar los colores, no.
 *
 * La fuente es la del sistema, que pesa cero y no provoca saltos de
 * maquetación. Cuando la web tenga la suya, se autoaloja en
 * `../fonts/` y se apunta aquí — nunca desde un CDN.
 */

/* ---------------------------------------------------------------------
 * Tipografía autoalojada.
 *
 * Outfit, licencia OFL, servida desde el propio dominio y NUNCA desde un
 * CDN (regla del proyecto: sin dependencias externas en producción).
 * Es la versión VARIABLE: un solo archivo de 31 KB cubre todo el rango
 * 400–700, frente a los 183 KB que ocupaban los pesos sueltos.
 *
 * `font-display: swap` para que el texto se lea desde el primer instante
 * con la fuente del sistema y no haya un hueco en blanco (FOIT).
 * ------------------------------------------------------------------- */
/*
 * Sin `@font-face`: el tema neutro usa la pila del sistema, que pesa cero
 * y está siempre disponible. Cuando esta web tenga su tipografía, se
 * autoaloja en `../fonts/` y se declara aquí — nunca desde un CDN, por
 * rendimiento y por privacidad.
 */

:root {
    /* -----------------------------------------------------------------
     * Color
     *
     * El blanco NO es blanco puro: #F8F6F4 es un hueso cálido, y es lo
     * que le da al diseño su aire de papel en vez de pantalla.
     * --------------------------------------------------------------- */
    --color-surface: #ffffff;
    --color-surface-alt: #f4f4f5;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-accent: #2563eb;
    --color-accent-contrast: #ffffff;
    --color-border: #e4e4e7;

    /* Turquesa muy diluido, para fondos de realce y estados hover. */
    --color-accent-soft: #eff4ff;

    /* -----------------------------------------------------------------
     * Tipografía
     *
     * Escala fluida con clamp(): el tamaño se interpola con el ancho de
     * la ventana, así que no hacen falta breakpoints para el texto.
     * Los extremos salen de medir el diseño real (h1 = 52px a 1440px).
     * --------------------------------------------------------------- */
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem);
    --text-h2: clamp(1.5rem, 1.35rem + 0.7vw, 1.625rem);
    --text-h1: clamp(2.25rem, 1.55rem + 2.8vw, 3.25rem);

    /* Interlineados. El del cuerpo es deliberadamente amplio (2), tal y
       como está en el diseño de referencia: es parte de su carácter. */
    --leading-tight: 1.25;
    --leading-body: 2;

    --weight-normal: 400;
    --weight-bold: 700;

    /* -----------------------------------------------------------------
     * Espaciado (escala 4/8)
     * --------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    /* Aire vertical de una sección completa, fluido igual que el texto. */
    --space-section: clamp(3rem, 2rem + 4vw, 6rem);

    /* -----------------------------------------------------------------
     * Forma y elevación
     * --------------------------------------------------------------- */
    --radius-sm: 5px;
    --radius-md: 12px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 3px rgb(0 0 0 / 0.08);
    --shadow-2: 0 0 10px rgb(0 0 0 / 0.2);

    /* -----------------------------------------------------------------
     * Layout
     * --------------------------------------------------------------- */
    --layout-max: 1320px;
    --layout-gutter: var(--space-4);
}

/* ---------------------------------------------------------------------
 * Esta web es de MODO CLARO únicamente (decisión del propietario,
 * 2026-08-13). No hay bloque `prefers-color-scheme: dark`.
 *
 * `color-scheme: light` no es decorativo: sin él, a un visitante con el
 * sistema en oscuro el navegador le pinta por su cuenta los controles de
 * formulario, las barras de desplazamiento y los desplegables en oscuro,
 * y quedan fuera de sitio sobre un diseño claro. Con esta línea se le
 * dice que la página es clara y deja de intervenir.
 *
 * Volver a tener modo oscuro sería añadir aquí un bloque
 * `@media (prefers-color-scheme: dark)` redefiniendo los mismos tokens:
 * ni una línea del CSS de los bloques tendría que cambiar, porque
 * ninguno usa un color literal.
 * ------------------------------------------------------------------- */
:root { color-scheme: light; }