/**
 * BAIRS — Design tokens
 * Sistema de diseño extendido. Todo componente nuevo lee de aquí.
 * Las variables --color-primary y --color-dark del legacy en style.css siguen
 * vigentes; esta capa las complementa, no las reemplaza.
 */

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-roman.var.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Inter Variable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-italic.var.woff2') format('woff2-variations');
}

:root {
    /* ─── Color extendido ─── */
    --color-primary-soft: #38bdf8;
    --color-accent: #00d4ff;
    --color-warm: #ff8a3d;
    --color-bg-0: #07090d;
    --color-bg-1: #0f141b;
    --color-bg-2: #1a2230;
    --color-line: rgba(255, 255, 255, 0.08);

    /* ─── Tipografía ─── */
    --font-display: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* ─── Espaciado (escala 4px) ─── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --space-32: 128px;
    --space-48: 192px;

    /* ─── Radios ─── */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;

    /* ─── Sombras ─── */
    --shadow-glow: 0 0 60px rgba(0, 212, 255, 0.18);
    --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* ─── Movimiento ─── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-micro: 180ms;
    --dur-normal: 320ms;
    --dur-narrative: 700ms;
}

/**
 * Tipografía base — eleva el cuerpo del sitio sin depender de cada plantilla.
 * El legacy `body { font-family: var(--font-primary) }` en style.css sigue
 * funcionando; aquí lo sobrescribimos con la variable nueva (compatible).
 */
html {
    font-family: var(--font-body);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter alternates: I sin serif, ojo de la a, etc. */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.hero-category {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero-title {
    letter-spacing: -0.04em;
    line-height: 0.95;
}

/* Eyebrow / category label estilo mono — usar con clase utilitaria */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary-soft);
}

/* Medida tipográfica óptima para texto largo */
.measure {
    max-width: 65ch;
}

/* Pretty wrap para titulares (Chromium, Safari) */
@supports (text-wrap: pretty) {
    p, li {
        text-wrap: pretty;
    }
}

/**
 * Respeto global a prefers-reduced-motion.
 * Las utilidades JS también lo chequean, pero esto cubre cualquier
 * animación CSS que se nos pase por alto.
 */
@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;
    }
}

/**
 * Focus visible global — outline accesible y consistente.
 * Override del legacy ":focus { outline: 2px solid var(--color-primary) }" en style.css
 * para usar el acento luminoso, mejor contraste.
 */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}