/* ============================================================
   GlennGO — TOKENS DE MARCA (la piel del sitio vive AQUÍ)
   ------------------------------------------------------------
   Para probar una variante de marca SOLO se edita este archivo:
   - Cambiar acento:   --accent / --accent-2 / --accent-glow
   - Cambiar fuentes:  --font-display / --font-body / --font-mono
   - Cambiar fondo:    --bg / --surface
   El resto del sitio (main.css) consume estas variables y nunca
   colores duros. Verificación rápida: cambiar --accent debe
   re-tiñer botones, enlaces, líneas técnicas y el hero.
   ============================================================ */

:root {
  /* --- Superficie (dark first, único modo) --- */
  --bg: #0a0a0a;                 /* negro profundo base */
  --bg-elev: #101113;            /* superficie elevada (tarjetas) */
  --surface: #141618;            /* paneles/contenedores */
  --line: rgba(255, 255, 255, 0.08);       /* líneas técnicas finas */
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- Texto (marfil cálido sobre negro) --- */
  --text: #ece9e2;
  --text-dim: #a3a099;
  --text-faint: #6d6b65;

  /* --- ACENTO DE MARCA (teal GlennGO) --- */
  --accent: #0a9396;             /* teal base — botones, enlaces */
  --accent-2: #3fc6c9;           /* teal claro — hovers, números, glows */
  --accent-glow: rgba(63, 198, 201, 0.35); /* halo volumétrico */
  --accent-ink: #06201f;         /* texto sobre relleno acento */

  /* --- Alerta (solo micro-detalles: badges de problema) --- */
  --alert: #e05e5e;
  --alert-glow: rgba(224, 94, 94, 0.25);

  /* --- Tipografía --- */
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono", monospace;

  --fs-hero: clamp(2.6rem, 7vw, 5.2rem);
  --fs-h2: clamp(1.7rem, 4vw, 2.8rem);
  --fs-h3: clamp(1.15rem, 2.2vw, 1.45rem);
  --fs-body: clamp(1rem, 1.4vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;           /* versalitas micro-etiquetas */

  /* --- Forma y ritmo --- */
  --radius: 4px;                 /* esquinas casi rectas: precisión, no SaaS */
  --radius-lg: 8px;
  --container: 1200px;
  --section-pad: clamp(4.5rem, 10vw, 8.5rem);
  --gap: clamp(1rem, 2.5vw, 2rem);

  /* --- Movimiento (timing compartido con GSAP) --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;

  /* --- Cine --- */
  --grain-opacity: 0.05;         /* grano cinematográfico sutil */
  --vignette-opacity: 0.55;
}

/* Variante de ejemplo: descomentar para probar un acento ámbar técnico
   (misma mecánica para cualquier variante futura)
:root {
  --accent: #d99a2b;
  --accent-2: #f2c063;
  --accent-glow: rgba(242, 192, 99, 0.35);
  --accent-ink: #231303;
}
*/