/* Tipografía. Display Space Grotesk, cuerpo Hanken Grotesk, cifras/mono DM Mono. */
:root {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tamaños */
  --fs-hero: 42px;   /* cifra protagonista (saldo, disponible) */
  --fs-title: 22px;  /* título de pantalla */
  --fs-h2: 16px;     /* encabezado de sección / nombre */
  --fs-body: 14px;   /* cuerpo */
  --fs-label: 12px;  /* etiquetas, metadatos */
  --fs-mono: 11px;   /* códigos, hex, cuentas */

  /* Pesos */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-semibold: 600;/* @kind font */
  --fw-bold: 700;    /* @kind font */

  /* Compuestos listos para `font:` */
  --text-hero: var(--fw-bold) var(--fs-hero) / 1.05 var(--font-display);
  --text-title: var(--fw-bold) var(--fs-title) / 1.15 var(--font-display);
  --text-h2: var(--fw-semibold) var(--fs-h2) / 1.2 var(--font-body);
  --text-body: var(--fw-medium) var(--fs-body) / 1.45 var(--font-body);
  --text-label: var(--fw-medium) var(--fs-label) / 1.35 var(--font-body);
}