/* ============================================================
   tokens.css — definición del sistema de diseño
   Sección 4.4 de la especificación, tal cual.
   No agregar tokens acá sin actualizar la especificación.
   ============================================================ */

:root {
  /* Color */
  --tinta:        #0B0D17;
  --tinta-alta:   #14172A;
  --tinta-borde:  #232741;
  --papel:        #E8E9F3;
  --papel-tenue:  #8D91AD;
  --violeta:      #6C4DF6;
  --violeta-alto: #8B72FF;
  --cian:         #22D3EE;
  --coral:        #FF7A50;
  --coral-alto:   #FF9470;

  /* Tipografía */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-cuerpo:  "Archivo", system-ui, sans-serif;
  --f-mono:    "Martian Mono", ui-monospace, monospace;

  --t-display:  clamp(2.75rem, 7vw, 5.5rem);
  --t-seccion:  clamp(1.75rem, 3.5vw, 2.75rem);
  --t-tarjeta:  1.25rem;
  --t-cuerpo:   1.0625rem;
  --t-chico:    0.9375rem;
  --t-etiqueta: 0.75rem;

  /* Espaciado */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px; --e-11: 160px;

  /* Layout */
  --ancho-max: 1200px;
  --gutter: 24px;
  --radio-tarjeta: 12px;
  --radio-pildora: 999px;

  /* Movimiento */
  --dur-rapida: 150ms;
  --dur-base:   300ms;
  --dur-lenta:  600ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}