/* ═══════════════════════════════════════════════════════════
   ONA Music Studio — Design Tokens
   ───────────────────────────────────────────────────────────
   Archivo central de variables de diseño.
   Cualquier cambio aquí se propaga a todo el sitio.

   PARA CAMBIAR EL AZUL: modifica --accent (y sus derivadas)
   PARA CAMBIAR EL FONDO: modifica --black y --surface
   PARA CAMBIAR LA TIPOGRAFÍA: modifica --mono o --display
═══════════════════════════════════════════════════════════ */

:root {

  /* ── FONDOS ──────────────────────────────────────────────
     --black     Fondo principal del body y de las tarjetas
                 de pricing. El negro más puro del sitio.
     --surface   Fondo de la nav, contact tabs, dropdown
                 items en hover, pricing card destacada.
     --surface-2 Dropdown del custom-select, indicador del
                 toggle de navegación.
  ─────────────────────────────────────────────────────── */
  --black:     #080808;
  --surface:   #0f0f0f;
  --surface-2: #161616;

  /* ── BORDES ──────────────────────────────────────────────
     --border       Separadores entre secciones, items de
                    equipo, galería, mapa, footer.
     --border-light Inputs de formulario, dropdown, pricing
                    button, tags de equipo.
  ─────────────────────────────────────────────────────── */
  --border:       #222222;
  --border-light: #2e2e2e;

  /* ── TEXTO ───────────────────────────────────────────────
     --white      Texto principal: h1, h2, nombres de equipo,
                  precios, inputs activos, footer logo.
     --white-dim  Texto secundario: subtítulos, párrafos,
                  hero-sub, labels de form, marcas de equipo.
     --white-ghost Decorativos y placeholders: números de
                  sección sin acento, scroll-hint, copyright.
  ─────────────────────────────────────────────────────── */
  --white:       #f5f5f5;
  --white-dim:   #9a9a9a;
  --white-ghost: #333333;

  /* ── ACENTO AZUL ─────────────────────────────────────────
     Cambiar --accent actualiza TODOS los detalles en azul:

     HERO
       · "EVERY-THING." — texto principal del h1 (+ glow)
       · Línea corta antes del tag "Estudio de grabación"
       · Línea del indicador de scroll (degradado)
       · Borde y glow del círculo giratorio de fondo
       · Resplandor atmosférico (radial gradient de fondo)

     SECCIONES
       · Números "01 —", "02 —", "03 —", "04 —"
       · Línea decorativa ::after de cada label de sección
         (degradado azul → transparente)

     EQUIPO
       · Números 01–14 de cada ítem del listado
       · Tags de categoría (Monitores, Micrófono, etc.)
       · Borde izquierdo al hover sobre cada fila

     MAPA
       · Punto central del marcador (con glow)
       · Pulso animado del marcador
       · Enlace "Cómo llegar →" al hover

     PRICING
       · Badge "Más solicitado"
       · Dot activo del carrusel móvil
       · Hover de los botones de las tarjetas

     CONTACTO
       · Tab activo (indicador superior + texto + icono)
       · Focus de todos los inputs de texto
       · Focus / open de los custom-selects
       · Opción seleccionada en los dropdowns

     GALERÍA
       · Tinte azul en cada foto al hover (::after overlay)
       · Número editorial de cada foto al hover

     BOTÓN WHATSAPP
       · Fondo del botón (+ glow exterior)

     GLOBAL
       · Scrollbar thumb
       · "SOUND IS EVERYTHING." en el footer

     --accent-dim  Versión semitransparente (18 % opacidad)
                   para bordes sutiles y fondos de hover.
     --accent-glow Versión muy tenue (8 % opacidad)
                   para atmósferas, halos y degradados de fondo.
  ─────────────────────────────────────────────────────── */
  --accent:      #3a8eff;
  --accent-dim:  rgba(58, 142, 255, 0.18);
  --accent-glow: rgba(58, 142, 255, 0.08);

  /* ── TIPOGRAFÍA ──────────────────────────────────────────
     --mono    DM Mono — todo lo técnico y funcional:
               etiquetas, precios, formularios, datos de
               equipo, copys pequeños, claims del footer.
     --display Syne — todo lo expresivo:
               h1, h2, nombre del estudio, taglines grandes.
  ─────────────────────────────────────────────────────── */
  --mono:    'DM Mono', monospace;
  --display: 'Syne', sans-serif;

}

/* ── MODO CLARO ────────────────────────────────────────────
   Solo se sobreescriben los valores que cambian.
   Las fuentes (--mono, --display) no cambian nunca.
─────────────────────────────────────────────────────────── */
body.light {
  --black:     #f5f5f5;
  --surface:   #ebebeb;
  --surface-2: #e0e0e0;
  --border:    #d0d0d0;
  --border-light: #bbbbbb;
  --white:       #111111;
  --white-dim:   #555555;
  --white-ghost: #aaaaaa;

  /* Azul más oscuro en claro para mantener contraste */
  --accent:      #1d5fcf;
  --accent-dim:  rgba(29, 95, 207, 0.15);
  --accent-glow: rgba(29, 95, 207, 0.06);
}