/* Design tokens — única fuente de verdad de color, tipografía, espacio y movimiento. */
:root {
  /* Color */
  --void: #000;
  --cream: #eee3d3;
  --bone: #d9cbbb;
  --mute: #b9a899;                   /* texto secundario: >=4:1 también sobre la tela iluminada */
  --ink-dark: #14040a;
  --blood: #c4202e;
  --blood-hot: #e0343f;
  --blood-deep: #8a0f1a;
  --blood-text: #ee6670;             /* rojo claro para texto pequeno: legible sobre negro y sobre la tela roja iluminada */
  --ember: 255 150 110;              /* rgb sin comas: la luz cálida del cursor */
  --hairline: rgb(238 227 211 / 0.25);
  --hairline-soft: rgb(238 227 211 / 0.12);

  /* Tipografía */
  --font-display: "Gambetta", "Times New Roman", serif;
  --font-text: "Gambetta", Georgia, serif;
  --font-label: "Gambetta", Georgia, serif;

  /* Escala de pesos (Gambetta variable, wght 300–700). Sobre negro la tinta clara "sangra" y se ve
     más gruesa de lo que es: los pesos bajos rinden en texto grande, los altos en lo pequeño y en el contorno. */
  --w-light: 300;       /* párrafos grandes, voz secundaria */
  --w-regular: 400;     /* lectura corrida */
  --w-medium: 500;      /* frases con cuerpo, filas solidas */
  --w-semibold: 600;    /* títulos, etiquetas pequeñas */
  --w-bold: 700;        /* numerales y palabras en tinta maciza, énfasis máximo */

  /* Espacio */
  --gutter: clamp(20px, 5vw, 72px);
  --gutter-wide: clamp(20px, 8vw, 140px);
  --gutter-nav: clamp(20px, 4vw, 56px);
  --nav-h: 68px;
  --section-pad: clamp(100px, 16vh, 180px);

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* Capas */
  --z-stage: 0;
  --z-content: 1;
  --z-nav: 20;
  --z-cursor: 100;
}