/* ============================================================
   VARIABLES.CSS
   Sistema de diseño de Sinestesia TV: colores, tipografías,
   espaciados y radios. Tocar este archivo alcanza para
   re-skinear todo el sitio.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --color-bg: #000000;              /* Fondo general */
  --color-primary: #ffffff;         /* Primario: blanco */
  --color-secondary: #b9f6ca;       /* Secundario: verde claro */
  --color-accent: #39ff6a;          /* Acento / CTA: verde flúor */
  --color-accent-hover: #2be857;    /* Acento en hover/active */
  --color-neutral-1: #fffefc;       /* Neutro 1: texto sobre fondo oscuro */
  --color-neutral-2: #1f1f1f;       /* Neutro 2: superficies (cards) */
  --color-neutral-2-soft: #292929;  /* Variante un poco más clara del neutro 2 */
  --color-on-accent: #04140a;       /* Texto sobre superficies verde flúor */

  /* ---------- Tipografía ---------- */
  --font-title: "Barlow Semi Condensed", sans-serif; /* Títulos */
  --font-body: "Montserrat", sans-serif;              /* Texto */

  /* ---------- Radios ---------- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---------- Espaciado (escala 8px) ---------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* ---------- Sombras ---------- */
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* ---------- Transiciones ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---------- Layout ---------- */
  --content-max-width: 1180px;
}