/* =========================================================================
   tokens.css — ÚNICA fuente de color/tipo/espaciado/sombra/motion
   Sistema Corporativo Blah® · SPEC §3
   Ningún componente hardcodea color/medida — todo se deriva de aquí.
   ========================================================================= */

:root {
  /* ---- Color (paleta clara) ---- */
  --bg: #F7F7F7;
  --surface: #FFFFFF;
  --surface-2: #FCFCFD;

  --ink: #1A1A1A;
  --ink-2: #55555B;     /* cuerpo apagado */
  --muted: #ABABAB;

  --line: #E8E8EC;
  --line-2: #DFDFE4;

  --violeta: #6C63FF;
  --violeta-700: #5A4FE8;   /* hover */
  --violeta-100: #ECEBFF;   /* tinte */

  --rosa: #FF3366;
  --rosa-100: #FFE6EC;

  --good: #14B88A;          /* señal positiva puntual */

  /* ---- Tipografía (3 roles) ---- */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ls-display: -0.022em;   /* tracking apretado en headlines */

  /* Escala fluida */
  --t-display: clamp(2.1rem, 1.4rem + 2.6vw, 3.7rem);
  --t-h2: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  --t-h3: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  --t-lead: clamp(1.05rem, 0.98rem + 0.25vw, 1.25rem);
  --t-body: 17px;
  --t-sm: 15px;
  --t-label: 13px;

  /* ---- Espaciado (base 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --sp-10: 112px;

  --section-y: clamp(64px, 32px + 4vw, 120px);
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);

  /* ---- Radios ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Sombras en capas ---- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, .04), 0 1px 3px rgba(26, 26, 26, .06);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, .06), 0 12px 28px rgba(26, 26, 26, .08);
  --shadow-lg: 0 8px 24px rgba(26, 26, 26, .08), 0 24px 56px rgba(26, 26, 26, .12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-1: 0.18s;
  --dur-2: 0.4s;
  --dur-3: 0.6s;

  --z-header: 100;
}

/* Reduced-motion: duraciones a 0 (cada animación cae a estado final) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}