/* ==========================================================================
   DRIFT — Design Tokens
   Fuente única de verdad para color, tipografía, espaciado y movimiento.
   No hardcodear valores de esta lista en otros archivos.

   Sistema oscuro único. El negro real no es una preferencia estética: es lo
   que hace que el azul de marca lea como LUZ y no como relleno. Por eso no
   existe un modo claro — rompería la premisa del sistema.
   ========================================================================== */

:root {
  /* ---------- Color — superficies ---------- */
  --color-bg: #000000;
  --color-bg-elevated: #05070c;

  /* ---------- Color — texto ---------- */
  --color-text: #eef2f8;
  --color-text-muted: #98a4ba;
  --color-text-faint: #6b7890;

  /* ---------- Color — acento oficial DRIFT ---------- */
  --color-accent: #1e64ff;
  --color-accent-readable: #2e6cff;
  --color-accent-soft: #5f8dff;
  --color-accent-rgb: 30, 100, 255;

  /* ---------- Color — líneas y superficies traslúcidas ---------- */
  --color-border: rgba(126, 148, 186, 0.14);
  --color-border-rgb: 126, 148, 186;
  --color-border-strong: rgba(126, 155, 205, 0.28);
  --color-surface: rgba(126, 155, 205, 0.035);
  --color-grid-line: rgba(126, 155, 205, 0.055);
  --color-noise-opacity: 0.03;

  /* ---------- Tipografía ---------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* El tope en rem evita que el titular siga escalando cuando el contenedor
     ya alcanzó su ancho máximo en pantallas grandes. */
  --fs-hero: clamp(2rem, 2.85vw, 3.5rem);
  /* El mínimo de 1.95rem deja que el titular de Proceso (16.36em) entre en
     dos líneas con aire hasta 320px; con 2.1rem caía en tres y la última
     quedaba con una sola palabra. */
  --fs-display-lg: clamp(2.1rem, 4.6vw, 4.25rem);
  --fs-display-sm: clamp(1rem, 1.15vw, 1.2rem);
  --fs-body-md: clamp(0.95rem, 0.2vw + 0.9rem, 1.05rem);
  --fs-body-sm: 0.85rem;
  --fs-label: 0.72rem;

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.7;

  --ls-tight: -0.03em;
  --ls-wide: 0.16em;
  --ls-wider: 0.2em;

  /* ---------- Espaciado ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.125rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3rem;
  --space-2xl: 4.25rem;

  --section-padding: clamp(5rem, 9vw, 9rem);
  --section-head-gap: clamp(3rem, 6vw, 5rem);
  --container-max: 1360px;
  --container-padding: clamp(1.25rem, 4vw, 3.5rem);
  /* El inset real que deja el sistema `max-width: var(--container-max) +
     margin-inline: auto + padding-inline: var(--container-padding)` —el
     mismo que usan `.container`, `.header` y `.hero__grid`— medido desde el
     borde del viewport. Sólo hace falta para elementos que NO pueden usar
     ese trío de reglas directamente porque están en `position: absolute`,
     como `.hero__scroll-cue`. */
  --layout-edge: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--container-padding));
  /* Las medidas de titular van en rem, NO en ch: `ch` se resuelve contra el
     font-size del contenedor (tamaño de cuerpo), no contra el del titular,
     que es 3-4 veces mayor — y el título terminaría partido de más.
     La medida de copy sí usa ch porque se aplica a texto de cuerpo. */
  --measure-heading: 40rem;
  --measure-copy: 58ch;

  /* ---------- Bordes / radios ----------
     Geometría ortogonal deliberada: radios mínimos. La tarjeta redondeada
     con degradado es el tell visual más repetido de las webs genéricas. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---------- Motion system ---------- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 200ms;
  --dur-ui: 420ms;
  --dur-reveal: 900ms;

  /* ---------- Capas ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 100;
  --z-overlay: 300;
  --z-preloader: 400;

  color-scheme: dark;
}