/* ==========================================================================
   NEBULON — Design Tokens
   Ajusta estos valores para cambiar el look completo del sitio.
   ========================================================================== */

:root {
  /* ---- Color: base (espacio profundo) ---- */
  --bg: #05060b;
  --bg-elevated: #0b0e1a;
  --surface: #10142a;
  --surface-2: #161b38;
  --border: #23284a;
  --border-soft: #1a1e3a;

  /* ---- Color: acentos (nebulosa) ---- */
  --accent-violet: #6e5bff;
  --accent-cyan: #22d3ee;
  --accent-magenta: #c084fc;

  --gradient-nebula: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-magenta) 52%, var(--accent-cyan) 100%);
  --gradient-nebula-soft: linear-gradient(135deg, rgba(110, 91, 255, 0.18) 0%, rgba(192, 132, 252, 0.14) 52%, rgba(34, 211, 238, 0.16) 100%);
  --gradient-text: linear-gradient(100deg, #b9aeff 0%, #d9b8ff 45%, #7fe7f4 100%);

  /* ---- Color: texto ---- */
  --text-primary: #edeff7;
  --text-muted: #9498b3;
  --text-faint: #5c6082;

  /* ---- Color: estado ---- */
  --success: #4ade80;
  --focus-ring: #8b7bff;

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-hero: clamp(2.5rem, 5.2vw + 1rem, 4.75rem);
  --fs-h1: clamp(2.1rem, 3.4vw + 1rem, 3.25rem);
  --fs-h2: clamp(1.65rem, 2vw + 1rem, 2.35rem);
  --fs-h3: clamp(1.2rem, 1vw + 1rem, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.6vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* ---- Espaciado ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  /* ---- Layout ---- */
  --max-width: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ---- Sombra / elevación (sutil, no la genérica gris en todo) ---- */
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 60px -20px rgba(110, 91, 255, 0.35);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
}

@media (prefers-color-scheme: light) {
  /* El sitio está diseñado como experiencia oscura/tecnológica de forma intencional
     (parte de la identidad de marca), por lo que no se invierte en modo claro. */
}