/* ── Espress web · tokens ────────────────────────────────────────────────────
   Copiados 1:1 de `_ds/…/tokens/colors.css` del handoff de Claude Design. Solo
   están los que las tres páginas web usan; la paleta completa vive en el export.

   ⚠️ LA CARA DE TEXTO NO ES LA DEL HANDOFF. El export declara "Helvetica Neue LT
   Std", que NUNCA se licenció — la app la reemplazó por Inter (OFL, libre de
   embeber) el 2026-08-12 y la web hace lo mismo. Servir los .otf de Helvetica
   desde un dominio público sería distribuirla. Inter tiene x-height mayor, así
   que el texto se lee un punto más grande al mismo tamaño; los tamaños quedan
   como los dejó el diseño.

   ⚠️ PP MONUMENT EXTENDED ESTÁ CABLEADA PERO NO LICENCIADA PARA WEB. La licencia
   que Erik va a comprar antes de subir a las tiendas es la de App; un sitio
   necesita la de Web, que es otra compra en Pangram Pangram. Está acá para poder
   revisar la página con la tipografía real — NO se publica hasta esa licencia.
   ──────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"PP Monument Extended";src:url("../assets/fonts/PPMonumentExtended-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Monument Extended";src:url("../assets/fonts/PPMonumentExtended-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

:root{
  --red-500:#fe0100;
  --red-550:#ff0100;
  --red-600:#d90100;
  /* Tanda 43 · A: naranja bitcoin, el nivel CYPHERPUNK. Blanco sobre este naranja da 2,2:1,
     así que el naranja solo es un anillo, una marca, un relleno bajo tinta NEGRA o texto
     sobre negro (8,4:1). Nunca tipo blanco sobre naranja ni naranja sobre blanco. */
  /* Erik, 2026-10-01: the CYPHERPUNK orange is as vivid as the brand red, not Bitcoin's own
     #f7931a. He chose it from three on the real card (batch 45, point 28). */
  --btc-500:#ff7300;
  --on-btc:#000000;
  --black:#000000;
  --white:#ffffff;
  --off-white:#f8f8f8;
  --card:#f7f7f7;
  --gray-400:#c6c6c6;
  --gray-550:#707070;
  --line:#ededed;
  --line-strong:#e6e6e6;

  /* Los usa `c/` (café compartido). Copiados 1:1 de `_ds/…/tokens/colors.css` del
     handoff. `--text-secondary` es un alias de `--gray-550` en el design system;
     `--text-on-bean` existe porque sobre `--bean-bg` el gris secundario solo
     llega a 3.91:1 y este a 5.54:1. */
  --bean-bg:#e8e4df;
  --text-secondary:var(--gray-550);
  --text-on-bean:#595959;

  --font-display:"PP Monument Extended",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Tanda 53 · 5: `--motion-colour` pasa al valor de `tokens/motion.css` del design system (--dur-base
     250ms, lineal), el que carga el export y el que cita el README del batch 53 ("250 ms linear"). El
     port de agosto lo había dejado en 180ms con la curva estándar de Material: no venía del diseño.
     Lo usan también el carril de pago y el relevo de las chips del hero. */
  --motion-colour:var(--dur-base) var(--ease-linear);
  /* Tanda 45 · D3: `--motion-reveal` de `tokens/motion.css` del design system (--dur-reveal 500ms,
     --ease-out cubic-bezier(.33,1,.68,1)). Lo usa el relevo del hero. */
  --motion-reveal:500ms cubic-bezier(0.33,1,0.68,1);

  /* Tanda 53 · 5: lo que pide el botón MENU → X (`menuButton()` del export), copiado 1:1 de
     `tokens/motion.css` del design system. Solo los que la web usa. Abrir es spring, cerrar es ease:
     nunca al revés (README §Motion). */
  --ease-out:cubic-bezier(0.33,1,0.68,1);      /* Easing.out(Easing.cubic) */
  --ease-in:cubic-bezier(0.32,0,0.67,0);       /* Easing.in(Easing.cubic), solo para cerrar */
  --ease-linear:linear;
  --spring-travel:cubic-bezier(0.2,0.9,0.25,1.12); /* t120 f9 */
  --dur-fast:150ms;
  --dur-collapse:220ms;
  --dur-base:250ms;
  --dur-travel:420ms;
  --motion-indicator:var(--dur-travel) var(--spring-travel);
  --motion-collapse:var(--dur-collapse) var(--ease-in);
}
/* La regla de Reduce Motion de `tokens/motion.css`, para los tokens de arriba: se anulan las duraciones
   salvo `--dur-fast` y `--dur-base` (un cruce de color no es movimiento). El botón MENU, además, quita
   toda transición con Reduce Motion (site.css), como `menuButton()`. */
@media (prefers-reduced-motion:reduce){:root{--dur-collapse:0ms;--dur-travel:0ms}}