/* ==========================================================================
   REVAMP — Design Tokens
   Dirección: dark-luxury tech. Todo el sitio en oscuro profundo, acento azul
   eléctrico y detalles plata. Tipografía: Archivo Expanded + Hanken Grotesk.

   Nota: los nombres --*-light se conservan por compatibilidad con style.css,
   pero desde el rebrand mapean a la escala OSCURA (superficie del sitio).
   ========================================================================== */

:root {
  /* ---- Superficies (escala oscura única) ---- */
  --bg-dark: #07090e;          /* fondo más profundo: hero, footer, momentos clave */
  --bg-dark-alt: #0a0d13;
  --bg-dark-card: #10141d;
  --border-dark: #1d2431;

  --bg-light: #0a0d13;         /* fondo base del cuerpo */
  --bg-light-alt: #0d1119;     /* secciones alternas */
  --surface: #10141d;          /* cards, formularios */
  --surface-raised: #151a26;   /* inputs, chips sobre cards */
  --border-light: #1d2431;

  /* ---- Texto ---- */
  --text-dark-primary: #f2f4f8;
  --text-dark-secondary: #a3adbd;
  --text-dark-muted: #6d7686;

  --text-light-primary: #f2f4f8;
  --text-light-secondary: #a3adbd;
  --text-light-muted: #6d7686;

  /* ---- Acento de marca (azul eléctrico del logo) + plata ---- */
  --accent: #2f7de0;
  --accent-bright: #4a97f2;
  --accent-strong: #1f5fb8;
  --accent-soft: rgba(47, 125, 224, 0.14);
  --accent-soft-dark: rgba(47, 125, 224, 0.16);
  --accent-glow: rgba(58, 141, 240, 0.26);
  --silver: #b9c1cd;

  /* ---- Semántico ---- */
  --success: #34c07c;
  --success-soft: rgba(52, 192, 124, 0.14);
  --danger: #e0654a;
  --danger-soft: rgba(224, 101, 74, 0.14);
  --highlight: #d9a441;
  --highlight-soft: rgba(217, 164, 65, 0.14);

  /* ---- Tipografía ---- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.875rem;
  --fs-4xl: 3.5rem;
  --fs-5xl: 4.5rem;

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

  /* ---- Espaciado (escala 4/8pt) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radios ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ---- Sombras / glow (modo oscuro) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 32px 64px rgba(0, 0, 0, 0.55);
  --glow-accent: 0 10px 40px rgba(47, 125, 224, 0.22);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 20px;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 48px;
  }
}