/* ============================================================================
   BIF — Design System · Base
   ----------------------------------------------------------------------------
   Reset moderno + tipografía global + scrollbar + selección + grano global.
   Cargar SIEMPRE después de tokens.css.
   ============================================================================ */

/* ──────────── Fuentes ──────────── */
/* IMPORTANTE: cargar las fuentes con <link rel="stylesheet"> en el <head>
   de cada página (paralelo, no bloqueante). NO usar @import aquí: encadena
   descargas y empeora LCP. Ver public/index.html como referencia. */

/* ──────────── Reset moderno ──────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    /* Bloquear scroll horizontal a nivel <html> también — sin esto, iOS Safari
       permite "rubber-band" lateral aunque body tenga overflow-x: hidden. */
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    /* Safari 16+ — `clip` es más estricto que `hidden`: no permite NI overflow
       NI scroll programático. Mata el rubber-band horizontal definitivamente. */
    overflow-x: clip;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--bif-bone);
    /* Grano aplicado como background-image directo del body (no overlay fijo).
       Esto evita un layer de compositing fijo + mix-blend-mode (los dos
       efectos más caros) y deja el grano como pintura única cacheada. */
    background-color: var(--bif-black);
    background-image: var(--grain-svg);
    background-size: 180px 180px;
    background-repeat: repeat;
    overflow-x: hidden;
    overflow-x: clip;                   /* Safari 16+: más estricto que hidden */
    position: relative;
    width: 100%;
    max-width: 100%;
    /* iOS Safari: evitar overscroll horizontal incluso si algo se desborda */
    overscroll-behavior-x: none;
    /* iOS Safari: deshabilitar el pan/scroll horizontal con el dedo.
       pan-y = solo permite scroll vertical, ignora gestos horizontales. */
    touch-action: pan-y;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
    color: var(--bif-fire);
}

ul, ol {
    list-style: none;
}

/* ──────────── Tipografía global ──────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--bif-white);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); letter-spacing: var(--ls-wider); }

p {
    line-height: var(--lh-relaxed);
    color: var(--bif-bone);
}

strong, b {
    font-weight: var(--fw-bold);
    color: var(--bif-white);
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ──────────── Selección de texto ──────────── */
::selection {
    background: var(--bif-blood);
    color: var(--bif-white);
}

::-moz-selection {
    background: var(--bif-blood);
    color: var(--bif-white);
}

/* ──────────── Scrollbar custom (Webkit) ──────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bif-black);
}

::-webkit-scrollbar-thumb {
    background: var(--bif-graphite);
    border: 2px solid var(--bif-black);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bif-blood);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bif-graphite) var(--bif-black);
}

/* ──────────── Focus visible (accesibilidad WCAG) ──────────── */
:focus-visible {
    outline: 2px solid var(--bif-fire);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* ──────────── Reduce motion (accesibilidad) ──────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ──────────── [hidden] siempre gana ────────────
   El atributo HTML `hidden` (equivalente a display:none) tiene specificity 0
   y queda pisado por cualquier `.clase { display: grid/flex }`. Esta regla
   asegura que `hidden` SIEMPRE oculte, sin importar otros display que tenga
   el elemento por su clase. Práctica estándar; el !important aquí está
   justificado porque `hidden` es la fuente de verdad declarativa del autor. */
[hidden] {
    display: none !important;
}

/* ──────────── Helpers de accesibilidad ──────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bif-fire);
    color: var(--bif-white);
    font-family: var(--font-display);
    letter-spacing: var(--ls-wider);
    z-index: var(--z-toast);
    transition: top var(--dur-base) var(--ease-out);
}

.skip-link:focus {
    top: var(--sp-4);
}