/* ============================================================
   tokens.css — "El Índice" editorial design system
   Papel + tinta cálida + un único rojo Pantone (escaso).
   ============================================================ */
:root{
  /* palette — light (revista, por defecto) */
  --paper:      #F4F1EA;   /* papel hueso */
  --paper-2:    #EAE6DC;   /* bloque diferenciado / riel */
  --ink:        #141210;   /* tinta cálida, nunca negro puro */
  --ink-2:      #6B675E;   /* metadatos, versalitas, fechas */
  --line:       rgba(20,18,16,.14);
  --line-soft:  rgba(20,18,16,.07);
  --grid:       rgba(20,18,16,.04);   /* retícula de arquitecto */
  --accent:     #DD2847;   /* tinta de marca, <5% superficie */
  --amber:      #C8763A;   /* solo Personal (Dante & Kala) */
  --on-accent:  #F4F1EA;

  /* type */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-text:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(3.2rem, 13vw, 15rem);
  --fs-h1:   clamp(2.6rem, 8.5vw, 8.5rem);
  --fs-h2:   clamp(2rem, 6vw, 5rem);
  --fs-h3:   clamp(1.5rem, 3vw, 2.4rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body: 1.05rem;
  --fs-meta: 0.78rem;

  /* spacing (8-base, ritmo editorial) */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:168px;
  --mx: clamp(22px, 6vw, 128px);        /* margen de página */

  --r-card:2px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-elastic: cubic-bezier(.2,.9,.3,1.3);
  --dur-micro:150ms;
  --dur-reveal:640ms;
  --dur-theme:400ms;
}

html[data-theme="dark"]{
  --paper:   #0E0D0C;
  --paper-2: #17150F;
  --ink:     #EDE9E0;
  --ink-2:   #9A968C;
  --line:      rgba(237,233,224,.16);
  --line-soft: rgba(237,233,224,.08);
  --grid:      rgba(237,233,224,.05);
  --accent:  #FF3B57;   /* un punto más brillante sobre carbón */
  --amber:   #E0894A;
  --on-accent:#0E0D0C;
}