/* ============================================================
   DELTA — Design Tokens (fuente única de verdad)
   Este archivo centraliza color, tipografía, radios, sombras
   y easing. Se importa ANTES de styles.css.
   No duplicar estas variables en otro archivo.
   ============================================================ */

:root {
  /* — Color: 3 capas de profundidad (marca oscura) — */
  --color-bg:        #080A0F;  /* fondo base */
  --color-surface:   #0D1018;  /* fondo secundario (secciones) */
  --color-surface-2: #131720;  /* fondo de cards */
  --color-text:      #F0F2F8;
  --color-muted:     #8A8FA8;
  --color-border:    rgba(255,255,255,0.07);
  --color-glass:     rgba(13,16,24,0.7);

  /* — Acento principal + variante vibrante — */
  --color-accent:    #4F7FFF;
  --color-accent-2:  #00E5C3;
  /* El extremo azul del gradiente se usa con texto blanco encima (botones
     primarios) — #4F7FFF puro da 3.6:1, insuficiente para WCAG AA en texto
     chico. #3660F2 es el mismo azul un poco más oscuro: da 5.1:1 y no se
     nota a simple vista frente al original. --color-accent (texto/íconos)
     no se toca, ese ya cumplía contraste sobrado. */
  --gradient-accent: linear-gradient(135deg, #3660F2 0%, #00E5C3 100%);
  --gradient-card:   linear-gradient(135deg, rgba(79,127,255,0.08) 0%, rgba(0,229,195,0.04) 100%);

  /* — Tipografía — */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --tracking-display: -0.03em; /* títulos grandes: negativo, look premium */

  /* — Espaciado — */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* — Radios: dos niveles consistentes — */
  --radius-control: 14px;              /* botones, inputs */
  --radius-feature: 24px;              /* cards, imágenes destacadas */
  --radius-sm: var(--radius-control);  /* alias retrocompatible */
  --radius-md: 14px;                   /* alias retrocompatible (antes 16px) */
  --radius-lg: var(--radius-feature);  /* alias retrocompatible */
  --radius-xl: 32px;                   /* piezas hero / bloques grandes */

  /* — Sombras — */
  --shadow-glow-accent:  0 0 40px rgba(79,127,255,0.18);
  --shadow-glow-accent2: 0 0 40px rgba(0,229,195,0.15);
  --shadow-card:         0 4px 32px rgba(0,0,0,0.4);

  /* — Easing: dos curvas fijas para TODO el sitio — */
  --ease-entrance: cubic-bezier(.22,1,.36,1);     /* reveals / entradas al viewport */
  --ease-state:    cubic-bezier(.45,.05,.55,.95); /* hover / estados (simétrica) */

  /* Duraciones de entrada según tamaño del elemento (600–1100ms) */
  --duration-sm: 600ms;   /* textos, badges, elementos chicos */
  --duration-md: 800ms;   /* cards, imágenes medianas */
  --duration-lg: 1100ms;  /* hero, bloques grandes */

  /* Transiciones de conveniencia (compatibilidad con el CSS existente) */
  --transition-fast: 0.18s var(--ease-state);
  --transition-mid:  0.32s var(--ease-state);
  --transition-slow: var(--duration-md) var(--ease-entrance);

  /* — Layout — */
  --max-width: 1200px;
  --nav-height: 72px;
}