/* ============================================================
   TOKENS · Taller de Producción de Eventos Musicales Independientes
   Paleta extraída de la identidad del CV (2026):
   tinta #242424 · volt #C7FF6A · hueso #F1EADE
   ============================================================ */
:root{
  /* --- Color --- */
  --ink:        #242424;
  --ink-soft:   #3A3A3A;
  --ink-mute:   #6B6862;
  --bone:       #FFFFFF;
  --bone-deep:  #F2F1EE;
  --paper:      #FFFFFF;
  --volt:       #C7FF6A;
  --volt-deep:  #A8E63F;
  --neon:       #00FFA4;   /* acento Live Huum, sólo en proyectos */
  --wa:         #25D366;

  --line:       rgba(36,36,36,.16);
  --line-hard:  var(--ink);

  /* --- Tipografía --- */
  --font-display: 'Archivo', 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --font-body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'Barlow Condensed', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-hero:  clamp(2.9rem, 11.5vw, 8.5rem);
  --fs-h1:    clamp(2.3rem, 6.5vw, 4.6rem);
  --fs-h2:    clamp(1.9rem, 4.6vw, 3.3rem);
  --fs-h3:    clamp(1.25rem, 2.2vw, 1.7rem);
  --fs-lead:  clamp(1.05rem, 1.9vw, 1.4rem);
  --fs-body:  clamp(1rem, 1.35vw, 1.075rem);
  --fs-small: .875rem;
  --fs-micro: .74rem;

  /* --- Espaciado / retícula --- */
  --gap:      clamp(1rem, 2.4vw, 1.75rem);
  --pad-x:    clamp(1.15rem, 5vw, 4.5rem);
  --section:  clamp(3.75rem, 9vw, 7.5rem);
  --maxw:     1280px;
  --maxw-txt: 62ch;

  /* --- Formas --- */
  --r-sm: 8px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Sombra sólida desplazada — firma gráfica del CV */
  --shadow-hard:    6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-soft:    0 18px 44px rgba(36,36,36,.14);

  --ease: cubic-bezier(.2,.7,.3,1);

  /* --- Motion ---------------------------------------------------
     Dos velocidades: interfaz (rápida, responde a la mano) y
     narrativa (lenta, acompaña el scroll). Sin rebotes ni elásticos.
     motion.js lee los mismos valores para no duplicar números. */
  --ease-out:     cubic-bezier(.16,1,.3,1);      /* expo out: entradas */
  --ease-in-out:  cubic-bezier(.65,0,.35,1);     /* transiciones de estado */
  --ease-cine:    cubic-bezier(.22,.61,.12,1);   /* aperturas de imagen */

  --dur-ui:     180ms;   /* hover, press, focus */
  --dur-fast:   360ms;   /* cambios de estado, menús */
  --dur-base:   720ms;   /* reveals de texto */
  --dur-slow:  1100ms;   /* reveals de imagen */
  --dur-cine:  1600ms;   /* apertura del hero */

  --stagger:     70ms;   /* entre elementos hermanos */
  --stagger-ui:  40ms;   /* filas de datos, no deben hacerse esperar */

  --dist-sm:  12px;
  --dist-md:  28px;
  --dist-lg:  64px;
  --blur-in:  8px;
}
