/* tokens.css — ÚNICA fuente de verdad de color, tipo, espacio, radio, sombra y movimiento.
   Ningún componente escribe un valor a mano: todos consumen estas variables.
   Los valores salen de PALETA.md; si uno cambia, se cambia en los dos. */
:root {
  /* Neutros */
  --kv-lino: #FAF8F5;
  --kv-nube: #FFFFFF;
  --kv-bruma: #F0ECE7;
  --kv-perla: #DDD8D2;

  /* Texto */
  --kv-tinta: #221C33;
  --kv-tinta-suave: #5A5470;
  --kv-tinta-tenue: #6E6982;

  /* Acentos */
  --kv-lavanda: #7C6BF5;            /* sin texto encima: 3.98:1 sobre blanco */
  --kv-lavanda-profunda: #5A46D6;   /* botones y enlaces con letra blanca, y nada más */
  --kv-lavanda-bruma: #E8E5FD;
  --kv-cielo: #5BC2E7;
  --kv-cielo-bruma: #DFF3FA;

  /* CTA */
  --kv-ambar: #F58A3C;              /* siempre con --kv-tinta encima, nunca blanco */
  --kv-ambar-bruma: #FDEBDA;
  --kv-ambar-profundo: #DD7326;     /* hover del ámbar; con --kv-tinta encima da 5.1:1 */

  /* Error: sólo validación del formulario */
  --kv-error: #C4453D;

  /* Translúcidos derivados: la tinta y el lino con alfa, para velos y fondos con desenfoque */
  --kv-tinta-62: rgba(34, 28, 51, .62);
  --kv-tinta-85: rgba(34, 28, 51, .85);
  --kv-lino-velo: rgba(250, 248, 245, .82);
  --kv-nube-velo: rgba(255, 255, 255, .45);

  /* Degradados */
  --kv-amanecer: linear-gradient(180deg, var(--kv-cielo-bruma) 0%, var(--kv-lavanda-bruma) 58%, var(--kv-lino) 100%);
  --kv-velo-tarjeta: var(--kv-tinta-62);
  --kv-degradado-foto: linear-gradient(180deg, rgba(34, 28, 51, 0) 42%, var(--kv-tinta-85) 100%);

  /* Escena del hero. El único verde de la página vive aquí, a propósito. */
  --escena-cerro-lejano: #DAD5F4;
  --escena-cerro: #C7CBEA;
  --escena-cesped-claro: #A8CE98;
  --escena-cesped: #8DBB80;
  --escena-cesped-oscuro: #6FA36A;
  --escena-hoja: #86B77C;
  --escena-hoja-oscura: #6A9C63;
  --escena-tronco: #8C7262;
  --escena-muro: var(--kv-nube);
  --escena-muro-sombra: #ECE7F1;
  --escena-techo: var(--kv-tinta-suave);
  --escena-puerta: var(--kv-lavanda-profunda);
  --escena-ventana: var(--kv-cielo-bruma);
  --escena-sol: var(--kv-nube);
  --escena-estado: running;

  /* Tipografía */
  /* Montserrat en toda la página, por decisión de Carlos del 21 sep 2026.
     Los dos nombres de token se conservan para no tocar los componentes: el
     "serif" es ahora el tratamiento de titular, no una familia distinta.
     Lo que sostiene la jerarquía ya no es el contraste serif/sans sino el
     PESO y el TRACKING: display en 300 muy ajustado, cuerpo en 400 normal. */
  --fuente-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Peso y tracking de titular. Montserrat es geométrica: en 500 a 72 px se ve
     pesada y tecnológica; en 300 con tracking negativo se lee editorial. */
  --peso-display: 300;
  --peso-marca: 500;
  --tracking-display: -.03em;
  --txt-xs: 13px;
  --txt-sm: 15px;
  --txt-base: 17px;
  --txt-lg: 20px;
  --txt-xl: 24px;
  --txt-2xl: clamp(28px, 4vw, 36px);
  --txt-3xl: clamp(34px, 6vw, 52px);
  --txt-4xl: clamp(42px, 8vw, 72px);
  --interlineado-titular: 1.15;
  --interlineado-cuerpo: 1.6;
  --medida: 68ch;

  /* Espaciado: escala de 4 y nada fuera de ella */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --esp-9: 96px;
  --esp-10: 128px;

  /* Radios */
  --radio-sm: 8px;
  --radio-md: 14px;
  --radio-lg: 24px;
  --radio-xl: 32px;
  --radio-pill: 999px;

  /* Sombras teñidas de tinta, no de negro */
  --sombra-1: 0 1px 2px rgba(34, 28, 51, .06), 0 2px 8px rgba(34, 28, 51, .04);
  --sombra-2: 0 4px 12px rgba(34, 28, 51, .08), 0 12px 32px rgba(34, 28, 51, .06);
  --sombra-3: 0 12px 28px rgba(34, 28, 51, .12), 0 32px 64px rgba(34, 28, 51, .10);

  /* Movimiento */
  --mov-rapido: 160ms;
  --mov-medio: 280ms;
  --mov-lento: 500ms;
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);

  /* Foco visible: anillo de 3px con separación de 2px */
  --anillo-foco: 0 0 0 2px var(--kv-lino), 0 0 0 5px var(--kv-lavanda);

  /* Layout */
  --ancho-max: 1200px;
  --margen-lateral: 20px;
  --encabezado-alto: 76px;
  --encabezado-alto-compacto: 56px;
  --toque-min: 44px;

  /* Puntos de quiebre, sólo como referencia: las media queries no aceptan variables.
     --bp-sm: 600px · --bp-md: 900px · --bp-lg: 1200px */
}

/* Con movimiento reducido las transiciones bajan a 0.01ms y la escena se congela en un fotograma.
   Se hace aquí, en las variables, para no necesitar !important en los componentes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-rapido: .01ms;
    --mov-medio: .01ms;
    --mov-lento: .01ms;
    --escena-estado: paused;
  }
}