/*
 * El VOCABULARIO de design tokens de Iris, con sus valores neutros
 * (2026-10-07, v1.1).
 *
 * Los módulos y los bloques solo usan estas custom properties, nunca un
 * color o un tamaño suelto: esta lista es el contrato entre el producto y
 * el tema de cada web. Por eso vive en el NÚCLEO y se actualiza con él —un
 * token nuevo llega a todas las webs con su valor neutro— y no en la
 * carpeta del sitio, donde cada portal la habría tenido que copiar y
 * mantener a mano.
 *
 * La IDENTIDAD de una web va en `/assets/site/tokens.css`, que es solo de
 * ese portal: la base no lo trae, y declara únicamente lo que cambia —sus
 * colores, su fuente—. Se carga después de esta hoja y SIN capa, así que
 * gana siempre: por la regla de la cascada del proyecto, lo que una web
 * escribe sin `@layer` pasa por delante de todo el núcleo, y esta hoja
 * está en la capa más baja, `iris.tokens`. Una web sin `tokens.css` se ve
 * con estos valores, sobria y sin la marca de nadie.
 *
 * La escala tipográfica y la de espaciado son el SISTEMA con el que están
 * construidos todos los bloques, no identidad de marca: un tema puede
 * cambiarlas, pero descuadraría los diseños; cambiar los colores, no.
 *
 * Hasta la v1.1 estos valores vivían en `temas/neutro.css` de la carpeta
 * del sitio, y el `tokens.css` del repositorio base era el de Decantowebs.
 */
@layer iris.tokens {
    :root {
        /* -------------------------------------------------------------
         * Color
         * ----------------------------------------------------------- */
        --color-surface: #ffffff;
        --color-surface-alt: #f4f4f5;
        --color-text: #1f2937;
        --color-text-muted: #6b7280;
        --color-accent: #2563eb;
        --color-accent-contrast: #ffffff;
        --color-border: #e4e4e7;

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

        /* -------------------------------------------------------------
         * Tipografía
         *
         * La fuente es la del sistema, que pesa cero y no provoca saltos
         * de maquetación. La de una web se autoaloja en
         * `/assets/site/fonts/` y se declara en su `tokens.css`, nunca
         * desde un CDN. La escala es fluida con clamp(): el tamaño se
         * interpola con el ancho de la ventana, sin breakpoints.
         * ----------------------------------------------------------- */
        --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);

        --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);

        /* -------------------------------------------------------------
         * Modo claro
         *
         * `color-scheme: light` no es decorativo: sin él, a un visitante
         * con el sistema en oscuro el navegador le pinta en oscuro los
         * controles de formulario, las barras de desplazamiento y los
         * desplegables, fuera de sitio sobre un diseño claro. Un tema con
         * modo oscuro lo cambia en su `tokens.css` y redefine los colores
         * dentro de `@media (prefers-color-scheme: dark)`.
         * ----------------------------------------------------------- */
        color-scheme: light;
    }
}