/* ============================================================ tokens.css — El Recreo FM (Rediseño) Sistema de diseño: "Arcade nocturno con identidad de radio" Variables base (custom properties). NO escribir colores sueltos en otros CSS: usar siempre estas variables. Paleta extraída de los 5 mockups de referencia. ============================================================ */ :root { /* ── FONDOS / SUPERFICIES ────────────────────────────────── Nunca negro puro. Azul-negro profundo de los mockups. */ --bg: #0a0a16; /* fondo base de toda la app */ --bg-deep: #060611; /* zonas más oscuras / vignette */ --bg-elevated: #12122a; /* tarjetas sobre el fondo */ --surface: #161634; /* superficie de cards / paneles */ --surface-2: #1d1d44; /* superficie elevada / hover */ --surface-line: #2a2a55; /* bordes sutiles de separación */ /* ── NEONES (acentos) ────────────────────────────────────── Cada sección usa UN neón dominante (no arcoíris). */ --neon-cian: #00e5ff; /* Noticias / En Vivo / radio */ --neon-magenta: #ff2bd6; /* Redes / Comunidad */ --neon-lima: #a8ff00; /* Cursos / acentos de éxito */ --neon-amarillo: #ffe600; /* Concurso / destacados */ --neon-violeta: #9d4dff; /* Podcast / decoración */ --neon-naranja: #ff7a1a; /* "ON AIR" / alertas en vivo */ --neon-rojo: #ff3b5c; /* "EN VIVO" activo / errores */ /* Variantes suaves (fondos teñidos, 12% sobre superficie) */ --cian-soft: rgba(0, 229, 255, 0.12); --magenta-soft: rgba(255, 43, 214, 0.12); --lima-soft: rgba(168, 255, 0, 0.12); --amarillo-soft: rgba(255, 230, 0, 0.12); --violeta-soft: rgba(157, 77, 255, 0.12); --naranja-soft: rgba(255, 122, 26, 0.12); /* Neón dominante por defecto (se sobrescribe por sección con data-neon o clase de sección). */ --neon: var(--neon-cian); --neon-soft: var(--cian-soft); /* ── TEXTO ─────────────────────────────────────────────────*/ --text: #f3f4ff; /* texto principal */ --text-soft: #b9bce0; /* texto secundario */ --text-muted: #7a7da8; /* texto terciario / labels */ --text-on-neon: #0a0a16; /* texto sobre fondo neón sólido */ /* ── TIPOGRAFÍA ──────────────────────────────────────────── display = SOLO títulos de sección y logos de juego. sans = todo el contenido (legible). */ --font-display: "Orbitron", "Exo 2", system-ui, sans-serif; --font-sans: "Inter", "Exo 2", system-ui, -apple-system, sans-serif; /* Escala fluida con clamp(min, fluido, max) — px de gama baja 360px hasta pantallas grandes 430px+. */ --fs-xs: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem); /* labels chicos */ --fs-sm: clamp(0.80rem, 0.76rem + 0.20vw, 0.92rem); /* texto secundario*/ --fs-base: clamp(0.94rem, 0.89rem + 0.25vw, 1.06rem); /* cuerpo */ --fs-md: clamp(1.10rem, 1.02rem + 0.40vw, 1.30rem); /* subtítulos */ --fs-lg: clamp(1.40rem, 1.20rem + 1.00vw, 1.90rem); /* títulos card */ --fs-xl: clamp(1.90rem, 1.50rem + 2.00vw, 2.90rem); /* títulos sección */ --fs-2xl: clamp(2.60rem, 1.90rem + 3.40vw, 4.20rem); /* display gigante */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; /* ── ESPACIADO (escala 4px) ───────────────────────────────*/ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ /* Ancho máximo de contenido (la app es móvil-first) */ --content-max: 520px; /* ── RADIOS ────────────────────────────────────────────────*/ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ── SOMBRAS NEÓN (3 intensidades) ───────────────────────── Usar var(--glow-*) cambiando --neon por sección. */ --glow-1: 0 0 6px var(--neon); /* sutil */ --glow-2: 0 0 10px var(--neon), 0 0 20px var(--neon-soft); /* medio */ --glow-3: 0 0 14px var(--neon), 0 0 34px var(--neon), 0 0 60px var(--neon-soft); /* fuerte */ /* Sombra de elevación normal (no neón) */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-pop: 0 14px 40px rgba(0, 0, 0, 0.6); /* Text-shadow neón para títulos */ --text-glow: 0 0 8px var(--neon), 0 0 24px var(--neon-soft); /* ── Z-INDEX (capas, una sola fuente de verdad) ───────────*/ --z-base: 0; --z-deco: 5; /* partículas / íconos flotantes */ --z-content: 10; --z-header: 40; --z-nav: 50; /* barra inferior fija */ --z-banner: 60; /* banners promocionales interstitial */ --z-toast: 70; --z-modal: 80; --z-splash: 100; /* ── MOVIMIENTO ────────────────────────────────────────────*/ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 140ms; --dur-mid: 260ms; --dur-slow: 420ms; /* ── SAFE AREAS (notch / gestos) ───────────────────────────*/ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Alto de la barra de navegación inferior (sin safe area) */ --nav-h: 90px; } /* ── Neón dominante por sección ────────────────────────────── Aplicar data-neon="lima" (etc.) en o en un contenedor para que --neon y los glows cambien en cascada. */ [data-neon="cian"] { --neon: var(--neon-cian); --neon-soft: var(--cian-soft); } [data-neon="magenta"] { --neon: var(--neon-magenta); --neon-soft: var(--magenta-soft); } [data-neon="lima"] { --neon: var(--neon-lima); --neon-soft: var(--lima-soft); } [data-neon="amarillo"] { --neon: var(--neon-amarillo); --neon-soft: var(--amarillo-soft); } [data-neon="violeta"] { --neon: var(--neon-violeta); --neon-soft: var(--violeta-soft); } [data-neon="naranja"] { --neon: var(--neon-naranja); --neon-soft: var(--naranja-soft); } /* Respeta usuarios que piden menos movimiento */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; } }