/* ============================================================================
LANT AUDIO — tokens.css · FUENTE DE VERDAD DEL DISEÑO
----------------------------------------------------------------------------
Trazable 1:1 al design system de la marca (paleta + componentes), capturado
desde el CSS aplicado del sistema de diseño.
Estética: OSCURA / editorial. Negro de fondo, naranja como acento/energía,
crema como superficie destacada. Tipografía Montserrat.
Reglas de este archivo:
- Los tokens SEMÁNTICOS apuntan a los de MARCA, nunca al revés.
- Este archivo refleja el manual: NO se corrige aquí. Cualquier override de
contraste vive en styles.css.
- Las fuentes se cargan en el (Google Fonts). Snippet al final.
========================================================================== */
:root {
/* ---- MARCA · Base cromática (hex del design system) --------------------- */
--lant-white: #ffffff;
--lant-black: #000000;
/* Naranja de marca — el único acento de color del sistema */
--lant-orange: #ff4e00; /* primario / energía / acento */
--lant-orange-hover: #e04600; /* estado hover sobre naranja */
--lant-orange-press: #c23c00; /* estado pressed / acento sobre crema (ver AA) */
--lant-orange-tint-10: rgba(255,78,0,.10); /* fondos sutiles, barras de aviso */
--lant-orange-tint-16: rgba(255,78,0,.16);
/* Neutros (escala de grises del sistema) */
--lant-gray-100: #f5f5f5;
--lant-gray-200: #e6e6e7;
--lant-gray-300: #c9cacb;
--lant-gray-400: #a6a8aa; /* texto secundario sobre negro */
--lant-gray-500: #808285; /* texto muted sobre negro */
--lant-gray-600: #5f6163;
--lant-gray-700: #404244; /* bordes */
--lant-gray-800: #242526; /* superficie */
--lant-gray-900: #131314; /* fondo elevado */
/* Cremas (superficie destacada / "featured") */
--lant-cream-100: #faf6ee;
--lant-cream-200: #f3e8d6; /* superficie crema principal */
--lant-cream-300: #e9dab9; /* hover sobre crema */
--lant-cream-400: #decb9f;
--lant-cream-500: #c9af7c;
/* ---- SEMÁNTICOS · lo que usa el sitio (apuntan a la marca) -------------- */
/* Fondos y superficies */
--bg: var(--lant-black); /* fondo base del sitio */
--bg-elevated: var(--lant-gray-900); /* barras, header sólido */
--surface: var(--lant-gray-800); /* tarjetas por defecto */
--surface-hover: var(--lant-gray-700);
--surface-cream: var(--lant-cream-200);/* tarjeta destacada / propuesta */
--surface-cream-hover: var(--lant-cream-300);
/* Bordes */
--border: var(--lant-gray-700);
--border-subtle: var(--lant-gray-800); /* divisores finos entre filas */
--border-on-cream: rgba(0,0,0,.14); /* borde sobre superficie crema */
/* Texto */
--text: var(--lant-white); /* texto primario sobre oscuro */
--text-secondary: var(--lant-gray-400); /* párrafos secundarios (AA ✓ ~8.6:1) */
--text-muted: var(--lant-gray-500); /* meta / eyebrows apagados (AA ✓ ~5.4:1) */
--text-on-orange: var(--lant-black); /* SIEMPRE negro sobre naranja (ver AA) */
--text-on-cream: var(--lant-black); /* texto principal sobre crema */
/* Acento / acción */
--accent: var(--lant-orange);
--accent-hover: var(--lant-orange-hover);
--accent-press: var(--lant-orange-press);
--link: var(--lant-orange); /* enlaces sobre fondo oscuro */
/* Acento naranja como TEXTO sobre crema — variante oscurecida AA-safe.
ÚNICA válida para naranja-texto a tamaño de cuerpo sobre crema.
Ver nota de contraste abajo. */
--accent-on-cream: #a83400; /* ~5.3:1 sobre --surface-cream ✓ */
/* Estado de error (validación de formularios / calculadora) */
--danger: #e5484d; /* borde de campo inválido */
/* ---- TIPOGRAFÍA -------------------------------------------------------- */
--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: var(--font-sans); /* Montserrat 800 para display */
--font-body: var(--font-sans);
/* Pesos usados: 400 (cuerpo), 500 (medio), 600 (semibold), 700 (eyebrow/label),
800 (display / precios / títulos) */
/* Tracking (letter-spacing) — del design system */
--ls-tight: -0.02em; /* display y titulares grandes */
--ls-wide: 0.08em; /* labels, botones */
--ls-widest: 0.16em; /* eyebrows en mayúscula */
/* Escala tipográfica responsive con clamp() (sin breakpoints).
Proporciones fieles a los mockups, ampliadas para el hero de un one-page. */
--fs-display: clamp(2.75rem, 8vw, 5.5rem); /* "HI-FI. ON SIGHT." */
--fs-h1: clamp(2rem, 5vw, 3.25rem); /* titulares de manifiesto/cierre */
--fs-h2: clamp(1.6rem, 3.4vw, 2.25rem);/* títulos de sección */
--fs-h3: clamp(1.3rem, 2.4vw, 1.75rem);/* nombre de tier / tarjetas */
--fs-lead: clamp(1rem, 1.5vw, 1.2rem); /* subheads, párrafos guía */
--fs-body: 0.9375rem; /* 15px — cuerpo */
--fs-sm: 0.8125rem; /* 13px — descripciones, listas */
--fs-xs: 0.75rem; /* 12px — meta */
--fs-eyebrow: 0.625rem; /* 10px — eyebrows [ ... ] */
/* ---- ESPACIO / LAYOUT -------------------------------------------------- */
--wrap-max: 1100px; /* ancho de contenido (del mockup de paquetes) */
--wrap-narrow: 640px; /* ancho estrecho (propuesta, texto largo) */
--gutter: clamp(1.25rem, 5vw, 2rem);
--section-y: clamp(4rem, 10vw, 7rem); /* padding vertical de sección */
/* ---- RADIOS ------------------------------------------------------------ */
--radius-sm: 2px; /* botones/CTA — la marca usa esquinas casi rectas */
--radius-md: 4px;
--radius-lg: 8px; /* tarjetas */
--r-pill: 999px; /* disponible; la marca NO usa pills por defecto */
/* ---- SOMBRAS ----------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 4px 16px rgba(0,0,0,.5);
--shadow-lg: 0 12px 40px rgba(0,0,0,.6);
--shadow-glow-orange: 0 0 32px rgba(255,78,0,.35); /* halo naranja en destacados */
/* ---- MOTION ------------------------------------------------------------ */
--ease-standard: cubic-bezier(.4, 0, .2, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 400ms;
}
/* ============================================================================
NOTAS DE CONTRASTE (WCAG AA) — leer antes de asignar color a texto
----------------------------------------------------------------------------
El único color de marca es el naranja #ff4e00. Reglas verificadas:
· Naranja como FONDO → texto NEGRO (--text-on-orange).
negro/naranja = 6.45:1 ✓ blanco/naranja = 3.26:1 ✗ (NUNCA blanco).
· Naranja como TEXTO → solo sobre fondos OSCUROS.
#ff4e00 sobre negro = 6.45:1 ✓ (cuerpo y titulares OK).
· Sobre superficie CREMA (#f3e8d6):
- Texto principal → NEGRO (--text-on-cream), alto contraste.
- Naranja-texto a tamaño cuerpo → usar --accent-on-cream (#a83400) = 5.3:1 ✓.
El --lant-orange-press (#c23c00) sobre crema queda en ~4.3:1: sirve para
acentos GRANDES (≥18px/bold) pero NO pasa AA como texto pequeño.
· Grises de texto sobre negro: secondary #a6a8aa ✓ (~8.6:1), muted #808285 ✓ (~5.4:1).
Si en implementación hace falta un ajuste, el override va en styles.css.
Este archivo NO se toca.
========================================================================== */
/* ============================================================================
FUENTES — cargar en el , NO con @font-face aquí.
----------------------------------------------------------------------------
(En producción se puede self-hostar Montserrat 400/500/600/700/800 latin
para quitar la dependencia de red, como hace el design system original.)
========================================================================== */