/**
 * variables.css
 *
 * Sistema de tokens de diseño de "Ruedas en Movimiento".
 * Paleta industrial editorial: negro, grafito, amarillo de seguridad
 * y naranja industrial, sobre un layout en modo oscuro permanente.
 */

:root {
    /* ---------- Color: base ---------- */
    --color-negro: #0A0B0D;
    --color-grafito-900: #121317;
    --color-grafito-800: #191B20;
    --color-grafito-700: #22252B;
    --color-grafito-600: #2D3038;
    --color-borde-sutil: rgba(255, 255, 255, 0.08);
    --color-borde-medio: rgba(255, 255, 255, 0.14);

    /* ---------- Color: acentos industriales ---------- */
    --color-amarillo: #FFC72C;
    --color-amarillo-intenso: #FFD966;
    --color-naranja: #FF6A1A;
    --color-naranja-intenso: #FF8A4C;

    /* ---------- Color: superficies de cristal (glassmorphism) ---------- */
    --superficie-cristal: rgba(25, 27, 32, 0.62);
    --superficie-cristal-clara: rgba(255, 255, 255, 0.05);
    --borde-cristal: rgba(255, 255, 255, 0.10);
    --desenfoque-cristal: 18px;

    /* ---------- Color: texto ---------- */
    --texto-principal: #F5F5F3;
    --texto-secundario: #B7BCC4;
    --texto-atenuado: #7D828C;
    --texto-sobre-acento: #14161A;

    /* ---------- Tipografía ---------- */
    --fuente-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --fuente-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fuente-datos: 'JetBrains Mono', 'Courier New', monospace;

    /* ---------- Espaciado ---------- */
    --espacio-xs: 0.5rem;
    --espacio-sm: 1rem;
    --espacio-md: 1.75rem;
    --espacio-lg: 3rem;
    --espacio-xl: 5rem;
    --espacio-xxl: 8rem;

    /* ---------- Radios ---------- */
    --radio-sm: 8px;
    --radio-md: 16px;
    --radio-lg: 24px;
    --radio-completo: 999px;

    /* ---------- Sombras ---------- */
    --sombra-suave: 0 4px 24px rgba(0, 0, 0, 0.35);
    --sombra-elevada: 0 20px 60px rgba(0, 0, 0, 0.5);
    --sombra-resplandor-amarillo: 0 0 0 1px rgba(255, 199, 44, 0.25), 0 8px 30px rgba(255, 199, 44, 0.12);

    /* ---------- Transiciones ---------- */
    --transicion-rapida: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-media: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-lenta: 600ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ---------- Contenedor ---------- */
    --ancho-contenedor: 1320px;

    /* ---------- Altura de navbar ---------- */
    --altura-navbar: 84px;
}

@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;
    }
}