/* ============================================================
 * tokens.css — Sistema de diseño. Las variables de color las
 * inyecta studios.js por universo; aquí van escala, tipografía,
 * espaciado, ritmo y curvas de animación (lenguaje común).
 * ============================================================ */
:root {
  /* Colores por defecto (Punkt) — studios.apply() los sobrescribe */
  --bg: #FDFFFC;
  --bg-dark: #000000;
  --ink: #000000;
  --ink-invert: #FDFFFC;
  --accent: #E4EF54;
  --muted: #4B4C4B;
  --soft: #E9F4E4;
  --near-black: #242623;

  /* Tipografía */
  --font-display: 'Clash Display', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* Escala tipográfica fluida (clamp min · pref · max) */
  --t-hero:  clamp(3rem, 9vw, 9rem);
  --t-title: clamp(2.25rem, 6vw, 6rem);
  --t-h2:    clamp(1.5rem, 3.2vw, 2.75rem);
  --t-h3:    clamp(1.15rem, 1.8vw, 1.6rem);
  --t-lead:  clamp(1.05rem, 1.5vw, 1.35rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.05rem);
  --t-meta:  clamp(0.72rem, 0.85vw, 0.82rem);
  --tracking-tight: -0.02em;   /* ~ versalitas -20 */

  /* Espaciado / layout */
  --margin: clamp(1.25rem, 4vw, 4.5rem);   /* margen base del documento */
  --gap: clamp(0.75rem, 1.5vw, 1.5rem);
  --header-h: 3.25rem;
  --maxw: 1680px;

  /* Movimiento — lenguaje común, sutil y físico */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);     /* salida suave (sin overshoot) */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.45s;
  --dur: 0.8s;
  --dur-slow: 1.2s;
  --z-header: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001s; --dur: 0.001s; --dur-slow: 0.001s; }
}