/**
 * variables.css
 * -----------------------------------------------------------------------
 * Tokens de diseño de TAKIX Radio. Toda la paleta, tipografía, espaciado
 * y radios viven aquí como custom properties, para que el resto del CSS
 * nunca "invente" un valor y el modo oscuro/claro sea un simple cambio
 * de tokens (ver bloque [data-theme="light"] al final).
 * -----------------------------------------------------------------------
 */

:root {
    /* ---- Tipografía ------------------------------------------------- */
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;
    --fs-4xl: 3.75rem;

    /* ---- Espaciado (escala de 4px) ----------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4.5rem;
    --sp-9: 6rem;

    /* ---- Radios y bordes ---------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 999px;

    /* ---- Elevación / sombra -------------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.4);

    /* ---- Transiciones --------------------------------------------------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 160ms;
    --t-base: 260ms;
    --t-slow: 420ms;

    /* ---- Capas (z-index) -------------------------------------------------- */
    --z-header: 100;
    --z-player: 90;
    --z-overlay: 200;

    /* ---- Marca: acento principal (independiente de la emisora activa) ---- */
    --brand-gold: #e8a33d;
    --brand-rose: #c9375a;

    /* ---- Acento dinámico de la emisora seleccionada (JS lo sobrescribe) --- */
    --accent: var(--brand-gold);

    /* ==================== TEMA OSCURO (por defecto) ==================== */
    --bg: #0a0a10;
    --bg-elevated: #131318;
    --bg-elevated-2: #1b1b22;
    --surface: #1c1c24;
    --surface-hover: #24242e;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    --text-primary: #f5f3ee;
    --text-secondary: #a8a6b8;
    --text-tertiary: #6f6d80;
    --text-on-accent: #12100a;

    --overlay-scrim: linear-gradient(180deg, rgba(10, 10, 16, 0.55) 0%, rgba(10, 10, 16, 0.85) 65%, #0a0a10 100%);
}

/* ============================ TEMA CLARO ============================= */
[data-theme='light'] {
    --bg: #f6f4ef;
    --bg-elevated: #ffffff;
    --bg-elevated-2: #efece4;
    --surface: #ffffff;
    --surface-hover: #f0eee7;
    --border: rgba(10, 10, 16, 0.08);
    --border-strong: rgba(10, 10, 16, 0.14);

    --text-primary: #16151c;
    --text-secondary: #55536a;
    --text-tertiary: #8a889a;
    --text-on-accent: #12100a;

    --shadow-sm: 0 2px 8px rgba(20, 16, 8, 0.06);
    --shadow-md: 0 8px 28px rgba(20, 16, 8, 0.08);
    --shadow-lg: 0 20px 60px rgba(20, 16, 8, 0.12);
    --shadow-glow: 0 0 0 1px rgba(10, 10, 16, 0.05), 0 12px 40px rgba(20, 16, 8, 0.1);

    --overlay-scrim: linear-gradient(180deg, rgba(10, 10, 16, 0.35) 0%, rgba(10, 10, 16, 0.7) 65%, #f6f4ef 100%);
}

/* Respeta la preferencia de movimiento reducido del sistema en todo el sitio */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}