/*
  tokens.css — variables únicamente. No hay reglas de layout ni de componente
  acá: si algo necesita cambiar una proporción, se toca este archivo y nada más.

  Justificación completa de cada decisión en el hilo de diseño del proyecto.
  Resumen de lo que no es obvio mirando los números:

  - Colores "-texto" y "-claro" son derivadas de la paleta de marca, no colores
    nuevos. Existen porque coral (2.67:1), gris cálido (2.97:1) y salvia
    (2.18:1) sobre crema no llegan a contraste de texto (4.5:1 WCAG AA).
    La paleta de marca sigue intacta como color de superficie y de trazo.
  - La escala tipográfica es fluida (clamp) entre 360px y 960px de viewport.
    960px = 60rem, el mismo ancho que el contenedor más ancho de la landing
    (la retícula de siete casilleros). Fuera de ese rango no crece más.
  - Los tamaños usan rem, no px, para que el zoom de texto del navegador
    los respete. El componente vw del clamp no rompe eso: vw es relativo al
    viewport, no al root font-size.
  - La escala de espaciado cambia de paso en 16: por debajo es espaciado de
    componente (necesita resolución de 4px), por encima es espaciado de
    maquetación (necesita saltos grandes para que cada bloque se lea como
    una sección distinta, no una continuación).
*/

:root {
  /* ===== Color: marca (intocable) ===== */
  --coral:        #E2734A;
  --crema:        #F4EDE4;
  --lino:         #E8DDD4;
  --oscuro:       #2D2D2D;
  --gris-calido:  #8A8A8A;
  --salvia:       #7BAE8E;

  /* ===== Color: derivadas de texto =====
     Mismo tono que su origen, ajustadas solo en luminosidad para llegar
     a contraste real sobre crema y lino. */
  --coral-texto:  #A7411B; /* 5.3:1 sobre crema — palabra destacada, enlaces */
  --coral-claro:  #ECB69F; /* coral aclarado — casillero de 5 min, nunca texto */
  --gris-texto:   #625E58; /* 5.5:1 sobre crema, 4.8:1 sobre lino — el fondo
                               más oscuro de los dos, así que el color se
                               calibra contra ese, no contra crema. Texto
                               secundario, contornos. */

  /* ===== Color: roles =====
     El resto del CSS consume roles, nunca colores crudos, salvo tokens.css. */
  --fondo:            var(--crema);
  --fondo-alterno:    var(--lino);
  --texto:            var(--oscuro);
  --texto-secundario: var(--gris-texto);
  --acento:           var(--coral);
  --acento-texto:     var(--coral-texto);
  --acento-suave:     var(--coral-claro);
  --logro:            var(--salvia);
  --contorno:         var(--gris-texto);
  --foco:             var(--coral-texto);

  /* ===== Tipografía ===== */
  --fuente: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --peso-cuerpo:   400;
  --peso-enfasis:  500;
  --peso-titulo:   700;

  /* Escala fluida, 360px → 960px de viewport. Ver justificación arriba. */
  --t-xs:  clamp(0.875rem, 0.8375rem + 0.17vw, 0.9375rem); /* 14 → 15 */
  --t-s:   clamp(1rem,     0.9625rem + 0.17vw, 1.0625rem); /* 16 → 17 */
  --t-m:   clamp(1.125rem, 1.0875rem + 0.17vw, 1.1875rem); /* 18 → 19, cuerpo */
  --t-l:   clamp(1.3125rem, 1.2rem + 0.5vw,    1.5rem);    /* 21 → 24 */
  --t-xl:  clamp(1.5625rem, 1.375rem + 0.83vw, 1.875rem);  /* 25 → 30 */
  --t-2xl: clamp(1.875rem, 1.575rem + 1.33vw,  2.375rem);  /* 30 → 38 */
  --t-3xl: clamp(2.125rem, 1.6rem + 2.33vw,    3rem);      /* 34 → 48 */

  /* Tokens fuera de la escala genérica t-*: no son un paso más de la
     progresión de arriba, son anclas puntuales para la jerarquía entre
     bloques de la landing (bloque 3 > bloque 8 > bloques 4 y 5, ver el
     mensaje de la ronda que los creó para la tabla completa). No se
     reusan en h1/h2 ni en otras páginas — por eso viven acá aparte y
     no se tocó t-xl/t-2xl/t-3xl, que sí están en uso en otros lados. */
  --t-elemento-firma: clamp(2.0625rem, 1.2rem + 3.83vw, 3.5rem);   /* 33 → 56, título del bloque 3 */
  --t-firma-cierre:   clamp(2rem,      1.4rem + 2.67vw, 3rem);     /* 32 → 48, firma del bloque 8 */
  --t-bloque-par:     clamp(1.9375rem, 1.525rem + 1.83vw, 2.625rem); /* 31 → 42, bloques 4 y 5 — mismo valor a propósito, para que pesen igual */

  --interlineado-titulo:  1.15;
  --interlineado-subtitulo: 1.3;
  --interlineado-cuerpo:  1.6;

  --tracking-titulo: -0.02em;
  --tracking-cuerpo:  0em;
  --tracking-etiqueta: 0.02em;

  --medida-texto: 34rem; /* ~62 caracteres a 18px */
  --medida-ancha: 60rem; /* solo para la retícula de cadencia */

  /* ===== Espaciado =====
     Base 4px expresada en rem (4px = 0.25rem con root de 16px). */
  --e-1: 0.25rem; /*  4 */
  --e-2: 0.5rem;  /*  8 */
  --e-3: 0.75rem; /* 12 */
  --e-4: 1rem;    /* 16 — quiebre component/maquetación */
  --e-5: 1.5rem;  /* 24 */
  --e-6: 2rem;    /* 32 */
  --e-7: 3rem;    /* 48 */
  --e-8: 4rem;    /* 64 */
  --e-9: 6rem;    /* 96 */
  --e-10: 8rem;   /* 128 */

  /* Ritmo entre bloques, fluido en el mismo rango que la tipografía */
  --ritmo-bloque: clamp(4rem, 2.8rem + 0.33vw, 6rem); /* 64 → 96 */

  /* ===== Forma ===== */
  --radio-casillero: 3px;  /* casi recto, referencia papel impreso, no componente de UI */
  --radio-control:   8px;  /* input, botón */
  --trazo:           1.5px;

  /* ===== Movimiento =====
     Ninguna transición ni animación se declara sin pasar por estos tokens,
     así prefers-reduced-motion los apaga a todos de una sola vez (ver base.css). */
  --dur-micro: 150ms; /* hover, foco, activo — rango 120-180ms */
  --ease-suave: cubic-bezier(0.33, 1, 0.68, 1);

  /* Entrada de la tilde en /lo-hice y /la-minima: acuse de recibo, no
     premio. Círculo y trazo suman 360ms, por debajo del tope de 500ms. */
  --dur-tilde-circulo: 240ms;
  --dur-tilde-check:   220ms;
  --retraso-tilde-check: 140ms;

  /* Entrada por partes del título y los párrafos (Detalle #6). */
  --dur-entrada-pieza: 320ms;
  --paso-entrada:      60ms;

  /* Entrada de los siete casilleros de la retícula de cadencia: paso más
     corto que el del texto porque son siete objetos chicos, no tres
     párrafos. Cada uno entra ya en su color final (nunca cambia de
     estado una vez visible: no es una animación de llenado). */
  --paso-entrada-celda: 40ms;
}