/* =====================================================================
   404 DESIGN STUDIO — Tokens de diseño
   ---------------------------------------------------------------------
   Fuente única de verdad para color, tipografía, espacio, movimiento.
   Todo el sistema (base, componentes, secciones) consume estas variables.
   ===================================================================== */

:root {
  /* ---------------- Color — superficie oscura ---------------- */
  --bg: #000000;            /* fondo principal */
  --bg-2: #0A0A0A;          /* fondo secundario / bandas */
  --surface: #101010;       /* superficie elevada (paneles, tarjetas) */
  --surface-2: #161616;     /* superficie elevada 2 */
  --ink: #F5F5F5;           /* texto principal */
  --ink-dim: #8A8A8A;       /* texto secundario */
  --ink-faint: #7C7C7C;     /* texto terciario / metadatos (≥4.5:1 sobre fondo oscuro) */
  --ink-ghost: #2A2A2A;     /* numeración fantasma, marcas de agua */

  /* ---------------- Acento — azul eléctrico de precisión ---------- */
  --accent: #00E5FF;
  --accent-soft: rgba(0, 229, 255, .10);
  --accent-line: rgba(0, 229, 255, .38);

  /* ---------------- Líneas y bordes ---------------- */
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .055);
  --line-strong: rgba(255, 255, 255, .20);
  --line-accent: rgba(0, 229, 255, .30);

  /* ---------------- Tipografía ---------------- */
  --font: "Google Sans Flex", "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Escala fluida — nunca pensada sólo para 1920px */
  --t-mega: clamp(7rem, 26vw, 24rem);       /* el 404 */
  --t-display: clamp(2.7rem, 1.1rem + 7.2vw, 7.2rem);
  --t-h1: clamp(2.1rem, 1.2rem + 3.6vw, 4.6rem);
  --t-h2: clamp(1.7rem, 1.1rem + 2.4vw, 3.2rem);
  --t-h3: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  --t-h4: clamp(1.05rem, .98rem + .4vw, 1.3rem);
  --t-lead: clamp(1.08rem, .98rem + .7vw, 1.5rem);
  --t-body: clamp(.98rem, .93rem + .22vw, 1.125rem);
  --t-small: .875rem;
  --t-label: .72rem;
  --t-micro: .7rem;

  /* ---------------- Espacio ---------------- */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;
  --s10: 9rem;

  --gutter: clamp(1.25rem, .5rem + 3.2vw, 4rem);
  --section-y: clamp(4.5rem, 2rem + 9vw, 11rem);
  --maxw: 1440px;
  --maxw-text: 960px;
  --maxw-narrow: 680px;

  /* ---------------- Grid ---------------- */
  --grid-cols: 12;
  --grid-gap: clamp(1rem, .4rem + 1.4vw, 1.75rem);

  /* ---------------- Movimiento — curvas firmes, nunca las del navegador ---------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-draw: cubic-bezier(.32, .72, 0, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .18s;
  --dur: .34s;
  --dur-slow: .7s;
  --dur-reveal: 1s;

  /* ---------------- z-index ---------------- */
  --z-nebula: 0;
  --z-under: 0;
  --z-content: 2;
  --z-header: 900;
  --z-fab: 950;
  --z-cursor: 9999;
  --z-menu: 1000;
}