/* =====================================================================
   DESIGN TOKENS — Dirección "Vector"
   Todo el sistema visual se gobierna desde aquí. Ningún componente debe
   usar valores de color/espaciado/tipografía fuera de estas variables.
   ===================================================================== */

:root {
  /* --- Color: superficies --- */
  --color-bg: #0A0E14;
  --color-bg-elevated: #12161D;
  --color-surface: #161B23;
  --color-surface-hover: #1C222B;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-overlay: rgba(10, 14, 20, 0.72);

  /* --- Color: texto --- */
  --color-text-primary: #F5F6F4;
  --color-text-secondary: rgba(245, 246, 244, 0.72);
  --color-text-muted: rgba(245, 246, 244, 0.5);

  /* --- Color: marca / acentos --- */
  --color-accent: #FF5A1F;          /* energía / CTA / progresión */
  --color-accent-hover: #FF7440;
  --color-accent-dim: #7A2400;
  --color-accent-contrast: #170800; /* texto sobre acento */
  --color-data: #2FD1A3;            /* datos del motor / confianza técnica */

  /* --- Estado --- */
  --color-success: #2FD1A3;
  --color-warning: #F5C242;
  --color-danger: #E63946;
  --color-focus: #7FB2FF;

  /* --- Tipografía --- */
  --font-display: 'Archivo Expanded', 'Arial Narrow', sans-serif;
  --font-heading: 'Archivo Expanded', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --fs-hero: clamp(2.4rem, 5.2vw, 4.2rem);
  --fs-h1: clamp(2rem, 4vw, 3.1rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.3rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.15em;

  /* --- Espaciado --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;

  /* --- Radios --- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* --- Sombras / elevación --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-accent-glow: 0 0 0 1px rgba(255, 90, 31, 0.35), 0 8px 26px rgba(255, 90, 31, 0.22);
  --shadow-data-glow: 0 0 0 1px rgba(47, 209, 163, 0.3), 0 8px 22px rgba(47, 209, 163, 0.16);

  /* --- Motion --- */
  --duration-fast: 150ms;
  --duration-medium: 280ms;
  --duration-slow: 480ms;
  --duration-cinematic: 900ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: 6vw;
  --nav-height: 76px;
}

/* Respeta la preferencia de reducir movimiento en todo el sitio */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-medium: 0ms;
    --duration-slow: 0ms;
    --duration-cinematic: 0ms;
  }
}