/* ==========================================================
   TOKENS: única fuente de verdad del diseño.
   Cambia un color o tamaño aquí y se actualiza en toda la página.
   Paleta tomada del mockup:
   - Teal    = infraestructura
   - Naranja = talento / acción principal
   ========================================================== */
:root {
  /* Color */
  --color-bg: #06152b;          /* fondo general */

--color-bg-alt: #04101f;      /* secciones alternas */

--color-bg-header: #0b1f3a;   /* barra superior */

--color-surface: #102849;     /* paneles, cards, formularios */

--color-border: #1f4f72;

--color-border-strong: #2f6d99;

--color-text: #f4f8ff;

--color-text-muted: #8fa4bc;

--color-teal: #22e6ff;

--color-orange: #ffb33b;

--color-orange-hover: #ffc85c;

--color-on-orange: #081018;

--color-danger: #ff6b6b;

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

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --text-hero: clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-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: 4rem;

  /* Forma y layout */
  --radius-sm: 4px;
  --radius-lg: 16px;
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 72px;
}