/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — sistema visual claro de la v2
   ═══════════════════════════════════════════════════════════════════════════
   Las tres versiones (A, B y C) cargan este fichero y NINGUNA escribe un
   color, un tamaño, un espacio, un radio ni una sombra a mano fuera de aquí.
   No es higiene: el panel de paletas (#4) repinta la página cambiando estas
   variables en vivo, así que todo valor que se escriba directo en una regla es
   un valor que el panel no puede mover y que sale mal en la exportación que se
   le pasa al agente de animaciones.

   Reglas de diseño de la v2 en PLAN-V2.md §4. Reemplazan a variants/SYSTEM.md,
   que salió del rechazo a las variantes oscuras de julio y no aplica aquí.

   Los grises no son una rampa bonita: cada uno se eligió por su contraste
   medido sobre blanco y sobre --bg-alt, y el comentario de cada uno lleva el
   número. Cambiar uno sin volver a medir rompe el criterio de AA.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── marca ────────────────────────────────────────────────────────────────
     Tinta, blanco de oscuro y la firma. La firma es el verde de dForms,
     decisión de Josue del 29-sep (#30): reemplaza al lima del kit
     (assets/brand/KIT.md) en toda la v2, y es el mismo verde que llevan los
     vídeos en claro. El kit original sigue en lima hasta que se pase aparte;
     la v2 carga sus copias en verde de shared/marca/.
     El verde es FIRMA: vive en el logo, en los estados de éxito (fondo verde,
     ícono en tinta) y en algún detalle. Nunca como texto ni como botón sobre
     blanco: mide 1.78:1 contra blanco, que es ilegible. Por eso no existe
     ningún token que lo ponga en un `color:`; los que hay lo ponen siempre de
     fondo. */
  --brand-ink:#1A1A1C;
  --brand-on-dark:#FEFEFE;
  --brand-verde:#3DDC84;

  /* El morado del puntaje. La página NO lo usa: vive dentro del producto, en
     los vídeos. Está aquí porque el panel de paletas exporta estos tokens para
     que el agente de animaciones vuelva a renderizar, y el puntaje es uno de
     los dos colores del producto que cambia con la paleta (#14). */
  --puntaje:#8B5CF6;

  /* ── grises ───────────────────────────────────────────────────────────────
     Contraste medido contra #FFFFFF / contra --bg-alt (#FAFAFA). Los tres que
     llevan texto se midieron además contra los tres tonos del lavado pastel
     del hero, que es la superficie más clara de la página y la que decide:
     --g-400 nunca baja de 3.55 y --g-500 nunca baja de 4.94. */
  --g-0:#FFFFFF;
  --g-50:#FAFAFA;   /* superficie alterna */
  --g-100:#F2F2F3;  /* botón secundario */
  --g-200:#E6E6E8;  /* bordes de tarjeta y hairlines */
  --g-300:#D2D2D6;
  --g-400:#7E7E87;  /* 4.02 / 3.85 — sólo texto grande (≥24px en 700) */
  --g-500:#67676F;  /* 5.61 / 5.37 — metadatos y fineprint */
  --g-600:#45454C;  /* 9.51 / 9.11 — cuerpo */
  --g-700:#2A2A2F;

  /* ── roles ────────────────────────────────────────────────────────────────
     Lo que usan las reglas. Los tokens de arriba son la paleta; éstos son los
     papeles, y son los que el panel de paletas reasigna. */
  --fg:var(--brand-ink);       /* titular tono 1, texto fuerte */
  --fg-2:var(--g-400);         /* titular tono 2. AA de texto grande, 3.55:1 */
  --fg-body:var(--g-600);      /* cuerpo, 8.43:1 */
  --fg-muted:var(--g-500);     /* metadatos, 4.94:1 */
  --bg:var(--g-0);
  --bg-alt:var(--g-50);
  --bg-dark:var(--brand-ink);
  --fg-on-dark:var(--brand-on-dark);
  --fg-on-dark-2:#A0A0A8;      /* 6.69:1 sobre --bg-dark */
  --line:var(--g-200);
  --line-on-dark:#33333A;
  /* La firma, como papel. La marca dice qué color es; esto dice dónde va: el
     logo, los estados de éxito y algún detalle, siempre de FONDO y con el
     contenido en --fg-on-firma encima. El panel de paletas la mueve con el
     acento libre y calcula la tinta que se lee sobre ella. */
  --firma:var(--brand-verde);
  --fg-on-firma:var(--brand-ink);  /* 9.74:1 sobre el verde; el blanco da 1.78 */

  /* Lavado pastel del hero. El fondo animado (#5, shared/fondo.js) pinta con
     estas mismas variables, no con las suyas, y las relee cuando el panel de
     paletas las cambia. El lavado estático de shared/secciones.css también
     las usa: es lo que se ve antes de que llegue el módulo. */
  --wash-1:#EEF1FB;
  --wash-2:#F7EEF6;
  --wash-3:#EDF6F2;
  /* La grilla tenue del hero (#5). Sale de la tinta, no es un gris nuevo: así
     sigue a la paleta sin que el panel tenga que moverla. El 4% lo decide el
     texto chico: donde un filete cruza la nota de precio (--g-500), su
     contraste baja de 4.94 a 4.59 en el peor de los tres lavados, y al 5% ya
     queda en 4.47, bajo el 4.5 de AA. El segundo tono del titular baja de
     3.55 a 3.29, sobre el 3:1 del texto grande. No subirla sin volver a medir. */
  --grilla:color-mix(in srgb,var(--fg) 4%,transparent);

  /* El panel donde vive el producto (#30). Es el gris plano del fondo de los
     vídeos en claro, `--panel` en la guía de estilo de las animaciones
     (hyperframes-landing-assets/dforms-v2/style_guide.md): la página dibuja el
     panel y el vídeo lo llena entero, así que el panel y el vídeo tienen que
     ser el mismo gris o se ve el escalón. Reemplaza a la ventana oscura del
     #3, que empataba con el negro de los vídeos de antes. */
  --window-chrome:#F5F5F7;
  /* El filo interior del panel. Es la tinta a muy baja opacidad, no un color
     nuevo: separa el gris del panel del gris claro de las secciones alternas
     (#FAFAFA), que sin él se funden. */
  --window-rim:rgb(26 26 28 / .06);

  /* Negro de MATE, no del diseño. Sólo vive dentro de `mask-image`, donde el
     canal alfa es lo único que cuenta y el color es indiferente: es el opaco
     que deja ver lo de debajo. No es una cuarta tinta y el panel de paletas no
     lo mueve; está aquí para que no haya ni un literal suelto en las hojas. */
  --matte:#000;

  /* ── tipografía ───────────────────────────────────────────────────────────
     Hanken Grotesk en toda la página, ya autoalojada con respaldo de métricas
     ajustadas (ver los @font-face de cada versión). Pesos 400, 500, 600 y 700;
     el 800 y el 900 siguen vetados como peso de un texto. La única excepción
     es la ola del cursor en los titulares (#47): un pico de paso, sólo en las
     letras bajo el puntero y sólo mientras está encima (--w-ola).

     El rango de la spec es 72–96px para el display y 18–20px para el cuerpo, y
     tiene que cumplirse en TODO el escritorio, no sólo a 1440. Los factores
     salen de ahí: 7.1vw toca 72px justo a 1024, que es el escritorio más
     angosto, y el techo de 92px lo deja quieto de 1300 en adelante. El cuerpo
     arranca en 18px, no en 17: con 17 se salía del rango en cualquier pantalla
     por debajo de 1333px, que son casi todos los portátiles.
     Por debajo del escritorio los dos bajan: ahí ya no aplica el rango y lo
     que manda es que quepa a 360. */
  --font-sans:'Hanken Grotesk','Hanken Grotesk Fallback',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,monospace;

  --t-display:clamp(40px,7.1vw,92px);
  /* El titular de sección: 48–64px en TODO el escritorio, igual que el
     display cumple 72–96. El 4.4vw/60px que traía #3 nunca se usó (no había
     secciones) y no aguanta el rango: a 1024 daba 45px y el techo se quedaba
     en 60. 4.7vw toca 48 justo a 1024 y el techo de 64 lo deja quieto de 1362
     en adelante. Por debajo del escritorio manda que quepa a 360. */
  --t-h2:clamp(32px,4.7vw,64px);
  --t-h3:clamp(19px,1.7vw,24px);
  --t-lead:clamp(18px,1.4vw,20px);
  --t-body:18px;
  --t-small:15px;
  --t-label:12px;
  /* La palabra suelta que se lee de un golpe: la de cada paso (Crea, Califica,
     Agenda…) y la cifra de una tarjeta (MIT, $0, Self-host). Vive entre el
     titular de sección y el h3 a propósito: son palabras que forman una lista,
     no subtítulos, y con --t-h2 (hasta 64px) le robarían el sitio al titular
     que las introduce. */
  --t-step:clamp(24px,2.6vw,36px);

  --w-body:400;
  --w-medium:500;
  --w-semi:600;
  --w-display:700;
  /* El pico de la ola del cursor sobre un titular (#47). El fichero de la
     fuente trae el eje entero (100 a 900); el @font-face de cada versión
     declara de 400 a 700, así que la ola usa su propia cara (base.css). */
  --w-ola:900;

  --track-display:-0.035em;
  --track-h2:-0.03em;
  --track-label:.08em;

  --lh-display:1.0;
  --lh-h3:1.2;
  --lh-body:1.55;

  --measure:64ch;          /* cuerpo: 60–70 caracteres */
  --measure-display:24ch;  /* titular: corta en dos líneas a 1440 */

  /* ── espacios ─────────────────────────────────────────────────────────────
     Escala fija. Nada de listas de etiqueta y valor: es lo que dejaba el hueco
     de «Kit / Aplicar» en la landing actual. */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;
  --s-10:128px;
  --s-section:clamp(64px,9vw,128px);
  --gutter:clamp(20px,4vw,48px);
  --maxw:1240px;
  /* El ancho de la ventana de producto. Es más angosta que el contenedor a
     propósito: en la referencia el producto no llega a los bordes, y así la
     sombra ancha tiene sitio donde caer. */
  --maxw-window:1100px;
  /* Ancho mínimo de una columna de grilla que se autoajusta (el pie, la fila
     de datos del bloque oscuro). Por debajo de esto una columna de enlaces
     deja de leerse como columna. */
  --w-col:160px;
  --nav-h:72px;
  /* La zona de toque mínima (#22): lo que pide un dedo, 44 px de lado. La
     ponen los ::before de base.css, que no cambian lo que se ve. */
  --hit:44px;
  /* El ancho de una tarjeta del carrusel. Es fijo a propósito: con `1fr` las
     tarjetas se encogen hasta que caben las diez y el raíl deja de ser un
     raíl. Fijo, el raíl se desborda y se desplaza, que es el gesto. */
  --w-tarjeta:320px;
  /* Cuánto miden los bordes que se desvanecen de la marquesina. */
  --fade:clamp(40px,8vw,120px);
  /* El lado de una celda de la grilla del hero (#5). */
  --grilla-celda:var(--s-8);

  /* ── radios ───────────────────────────────────────────────────────────── */
  --r-1:8px;
  --r-2:12px;
  --r-3:16px;   /* tarjetas: 16–20 */
  --r-4:20px;
  --r-5:24px;   /* ventana de producto */
  --r-pill:999px;

  /* ── sombras ──────────────────────────────────────────────────────────────
     La de tarjeta es casi invisible a propósito. La de la ventana es la única
     sombra grande de la página: amplia, suave y muy difusa, que es lo que hace
     que el producto flote sobre el fondo claro. */
  --sh-card:0 1px 2px rgba(26,26,28,.04),0 1px 1px rgba(26,26,28,.03);
  --sh-btn:0 1px 2px rgba(26,26,28,.10);
  /* Más corta y pareja (Josue, 30-sep): la de antes bajaba 64 px y cargaba
     el borde de abajo, y las ventanas grandes se leían inclinadas. */
  --sh-window:0 1px 3px rgba(26,26,28,.05),0 8px 24px -6px rgba(26,26,28,.08),0 20px 48px -12px rgba(26,26,28,.10);
  --sh-nav:0 1px 0 var(--line);

  /* ── movimiento ───────────────────────────────────────────────────────────
     Springs cortos, nada de fade genérico. Las curvas son el mismo out-expo
     apretado en dos duraciones; el «spring» es el overshoot suave de --e-spring,
     para entradas de un solo elemento. */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.32,.5,1); /* impeccable-disable-line bounce-easing -- el pop de los titulares, aprobado por Josue (#47, #49) */
  --d-1:160ms;
  --d-2:240ms;
  --d-3:420ms;
  /* La entrada de los titulares (#47, #49), un pop: cada palabra sale
     --d-escalon después de la anterior, sube desde --tit-sube más abajo y
     crece desde --tit-escala, y llega con --e-rebote, un resorte amortiguado
     (se pasa un 23 % de su sitio y vuelve) que tarda --d-tit. Con .4em, sin
     escala y el out-expo de siempre, la entrada no se notaba. */
  --d-escalon:70ms;
  --tit-sube:.9em;
  --tit-escala:.8;
  --d-tit:800ms;
  --e-rebote:linear(0,.108,.36,.654,.917,1.106,1.208,1.233,1.202,1.141,1.072,1.013,.971,.95,.946,.954,.969,.985,.998,1.008,1.012,1.013,1.01,1.007,1.003,1,.998,.997,1);
  /* Una vuelta entera de la marquesina. Lenta a propósito: es fondo, no una
     cosa que pida que la mires. */
  --d-marquesina:48s;
  /* El vaivén del lavado del hero (#5): lo que tarda la mancha más rápida en
     ir y volver. Las otras dos van más lentas y desfasadas, así que el dibujo
     no se repite a la vista. Lento por la misma razón que la marquesina. */
  --d-fondo:24s;
  /* Cuánto scroll cuesta cada paso de A mientras la sección está fija (#8).
     Media pantalla: lo bastante para leer el paso sin tener que frenar, y
     los cinco en dos pantallas y media. */
  --tramo-paso:50svh;

  --z-nav:50;
}

/* El panel de paletas (#4, shared/paletas.js) engancha aquí: escribe en línea
   sobre <html> los colores de la marca, los grises, los de oscuro, el lavado
   y la firma, y los papeles de arriba los siguen solos. No mueve la ventana de
   producto (--window-chrome y --window-rim): empata con el borde del vídeo, y
   los vídeos no cambian con la paleta.
   Si un día uno de esos colores cambia en una media query, se declara sobre
   su gemela de escritorio (`--x:var(--x-desktop, valor)`) y la media query
   pisa `--x`: el panel escribe la gemela y el móvil sigue mandando. */