/* Capa base del sistema de diseño (docs/design-system/CUTOVER.md F2).
 *
 * Reglas globales de elemento: reset, tamaño de texto nominal, foco, movimiento reducido.
 * Va en `@layer base`: gana a todo `legacy` aunque el selector sea menos específico, así que acá solo
 * entra lo que debe valer para toda la app. Nunca se declara aquí un tamaño de h1-h6 ni el aspecto de
 * un componente (eso es `components/`), porque pisaría a todas las hojas legacy a la vez.
 *
 * Política de accesibilidad (CUTOVER.md D1): P1 piso de 13 px, P4 anillo de foco de 3 px,
 * P5 texto en rem, P6 prefers-reduced-motion global. */
@layer base {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* Escala nominal: 18 px en M/L y 16 px en móvil (token --text-18, ver tokens/tupos.css). Fuente, color y fondo
       de la página también viven aquí: las páginas públicas no cargan el CSS legacy. */
    body {
        margin: 0;
        min-height: 100dvh;
        font-family: var(--font-body);
        font-size: var(--text-18);
        line-height: 1.5;
        color: var(--fg-1);
        background: var(--bg);
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-family: var(--font-display);
    }

    /* Solo enlaces sin clase: los que tienen clase los define su pieza. */
    a:where(:not([class])) {
        color: var(--accent);
    }

    /* Los controles no heredan el tamaño del body por defecto. 18 px ≥ 16 px, así que Safari iOS
       tampoco hace zoom al enfocar un campo. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea,
    button {
        font-family: inherit;
        font-size: var(--text-18);
    }

    /* Anillo de foco universal. :focus-visible no dispara en clics de mouse: no ensucia el POS táctil. */
    a:focus-visible, button:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible,
    [tabindex]:focus-visible, [role="button"]:focus-visible,
    summary:focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}