/* ─────────────────────────────────────────
   Tuinbit · Design Tokens
   ───────────────────────────────────────── */
:root {
  --paper:      #FFFFFF;
  /* #020C14 es la tinta del manual de marca, la del logotipo. */
  --ink:        #020C14;
  --ink-70:     rgba(2,12,20,0.70);
  --ink-40:     rgba(2,12,20,0.40);
  /* terciaria que cumple AA (5,4:1 sobre el papel). --ink-40 se queda como
     está porque lo usa el hero; los rótulos de formulario y las notas usan esta. */
  --ink-55:     rgba(2,12,20,0.62);
  --ink-15:     rgba(2,12,20,0.15);
  --ink-06:     rgba(2,12,20,0.06);
  --paper-inv:  #020C14;
  --ink-inv:    #FFFFFF;
  --ink-inv-40: rgba(255,255,255,0.40);

  --veil: rgba(255,255,255,0.94);

  --font-sans: 'Urbanist', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* ── Escala tipográfica ───────────────────────────────────────
     Una sola progresión para toda la web. Antes convivían dos juegos
     de tokens y una veintena de clamp() escritos dentro de cada
     componente, así que ningún tamaño guardaba relación con el resto.

     Los saltos son cortos en el rango de lectura (13·17·20·23·26) y
     largos en los de display (34·46·62), que es lo que produce
     jerarquía sin que el cuerpo del texto se resienta. */
  /* Ojo con los espacios: en CSS la suma dentro de clamp() exige un espacio
     a cada lado del +. Estos dos tokens lo tenían pegado al vw ("0.15vw+
     0.71rem"), así que el clamp era inválido y el navegador caía a los 16px
     heredados. Todas las etiquetas micro de la web —las de Space Mono, que
     además es una fuente ancha— salían a 16px en vez de a 12, y por eso
     desbordaban y rompían las rejillas en móvil. */
  --t-display: clamp(2.125rem, 4.2vw + 0.8rem,  3.875rem);   /* 34 → 62 */
  --t-1:       clamp(1.75rem,  3vw   + 0.7rem,  2.875rem);   /* 28 → 46 */
  --t-2:       clamp(1.5rem,   1.9vw + 0.75rem, 2.125rem);   /* 24 → 34 */
  --t-3:       clamp(1.25rem,  1vw   + 0.85rem, 1.625rem);   /* 20 → 26 */
  --t-lead:    clamp(1.125rem, 0.6vw + 0.95rem, 1.4375rem);  /* 18 → 23 */
  --t-body:    clamp(1.0625rem, 0.45vw + 0.95rem, 1.25rem);  /* 17 → 20 */
  --t-small:   clamp(0.9375rem,0.3vw + 0.86rem, 1.0625rem);  /* 15 → 17 */
  --t-micro:   clamp(0.75rem,  0.15vw + 0.71rem, 0.8125rem); /* 12 → 13 */

  /* Los nombres antiguos quedan como alias: el hero, el formulario y el
     pie siguen usándolos y así no hay dos escalas conviviendo. */
  --text-display: var(--t-display);
  --text-hero:    var(--t-display);
  --text-h1:      var(--t-1);
  --text-h2:      var(--t-2);
  --text-h3:      var(--t-3);
  --text-lg:      var(--t-lead);
  --text-base:    var(--t-body);
  --text-sm:      var(--t-small);
  --text-xs:      var(--t-micro);
  --text-label:   var(--t-micro);

  --lh-headline: 0.97;
  --lh-body:     1.6;
  --ls-tight:   -0.03em;
  --ls-wide:     0.08em;
  --measure:     62ch;

  --s-1: clamp(0.5rem,  0.8vw,  0.75rem);
  --s-2: clamp(1rem,    1.5vw,  1.5rem);
  --s-3: clamp(1.5rem,  2.5vw,  2.5rem);
  --s-4: clamp(2.5rem,  4vw,    4rem);
  --s-5: clamp(3rem,    5vw,    5rem);
  --s-6: clamp(4rem,    6vw,    6rem);
  --s-7: clamp(5rem,    8vw,    8rem);

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --gap:    clamp(0.75rem, 1.5vw, 1.25rem);
  --max-w:  1440px;

  --ease-out:   cubic-bezier(0.22,1,0.36,1);
  --ease-inout: cubic-bezier(0.87,0,0.13,1);
  --dur-xs: 200ms;
  --dur-sm: 400ms;
  --dur-md: 700ms;
  --dur-lg: 1200ms;

  --z-bg:      0;
  --z-content: 10;
  --z-header:  100;
  --z-loader:  200;
  --z-cursor:  300;
}