/* ============================================================
   NOVA Launch · Design Tokens v1.0
   Fuente única de verdad para colores, tipografía, espaciado,
   radios, sombras, transiciones y capas.
   ============================================================ */

:root {
  /* ---------- Color · Backgrounds ---------- */
  --color-bg-primary:    #070B14;
  --color-bg-secondary:  #101827;
  --color-bg-elevated:   #151E2E;
  --color-bg-overlay:    rgba(7, 11, 20, 0.85);

  /* ---------- Color · Texto ---------- */
  --color-text-primary:   #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-text-muted:     #94A3B8;
  --color-text-disabled:  #64748B;

  /* ---------- Color · Accent (azul NOVA) ---------- */
  --color-accent:         #3B82F6;
  --color-accent-hover:   #60A5FA;
  --color-accent-pressed: #2563EB;
  --color-accent-soft:    rgba(59, 130, 246, 0.12);

  /* ---------- Color · Borders ---------- */
  --color-border:         rgba(148, 163, 184, 0.12);
  --color-border-strong:  rgba(148, 163, 184, 0.24);
  --color-border-accent:  rgba(59, 130, 246, 0.4);

  /* ---------- Color · Estados ---------- */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;

  /* ---------- Color · Efectos ---------- */
  --color-glow-accent: rgba(59, 130, 246, 0.35);

  /* ---------- Gradientes ---------- */
  --gradient-accent: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%);
  --gradient-text:   linear-gradient(135deg, #F8FAFC 0%, #94A3B8 100%);
  --gradient-mesh-1: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.18), transparent 50%);
  --gradient-mesh-2: radial-gradient(circle at 80% 70%, rgba(96, 165, 250, 0.12), transparent 50%);

  /* ---------- Tipografía · Familias ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---------- Tipografía · Tamaños ---------- */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.5rem;    /* 24px */
  --fs-xl:   2rem;      /* 32px */
  --fs-2xl:  2.5rem;    /* 40px */
  --fs-3xl:  3.5rem;    /* 56px */
  --fs-4xl:  4.5rem;    /* 72px */

  /* ---------- Tipografía · Line height ---------- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Tipografía · Letter spacing ---------- */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.05em;
  --ls-wider:  0.12em;

  /* ---------- Espaciado (base 4px) ---------- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   2.5rem;
  --space-8:   3rem;
  --space-9:   4rem;
  --space-10:  5rem;
  --space-11:  6rem;
  --space-12:  8rem;

  --section-py-mobile:  var(--space-9);
  --section-py-desktop: var(--space-11);

  /* ---------- Radios ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);

  --glow-accent-sm: 0 0 0 1px var(--color-border-accent), 0 4px 16px var(--color-glow-accent);
  --glow-accent-lg: 0 0 0 1px var(--color-border-accent), 0 12px 40px var(--color-glow-accent);

  --inset-border-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---------- Transiciones ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  --transition-base: all var(--duration-normal) var(--ease-out);

  /* ---------- Capas (z-index) ---------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --nav-height-mobile:  64px;
  --nav-height-desktop: 72px;

  /* ---------- Iconografía ---------- */
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
}