/* Tipografía. Roboto hace todo el trabajo; Barlow es la cara de acento y
   aparece SOLO en números: pasos, horas, precios, montos, OTP.
   Los tamaños son los reales del onboarding (incluido 13.5px). */
:root {
  --font-core:   "Roboto", Arial, sans-serif;
  --font-accent: "Barlow", "Roboto", Arial, sans-serif;

  /* Display y títulos */
  --t-display:   700 40px/46px var(--font-core);   /* h1 de pantalla, tracking -0.03em */
  --t-display-2: 700 34px/40px var(--font-core);   /* h1 de pantalla de cierre */
  --t-h1:        700 32px/38px var(--font-core);
  --t-h2:        700 24px/30px var(--font-core);   /* título de login / modal grande */
  --t-h3:        700 21px/27px var(--font-core);
  --t-title:     700 20px/26px var(--font-core);   /* título de tarjeta de paso */
  --t-subtitle:  700 18px/24px var(--font-core);   /* título de tarjeta de documento */
  --t-card:      700 16px/22px var(--font-core);   /* encabezado de bloque */
  --t-strong:    700 15px/21px var(--font-core);

  /* Cuerpo */
  --t-lead:      400 17px/26px var(--font-core);   /* bajada del h1 */
  --t-body:      400 14px/21px var(--font-core);
  --t-prose:     400 13.5px/22px var(--font-core); /* prosa larga de manual */
  --t-body-sm:   400 13px/19px var(--font-core);   /* ayuda bajo el label */
  --t-body-xs:   400 12px/18px var(--font-core);

  /* Etiquetas y controles */
  --t-label:     700 14px/20px var(--font-core);   /* label de campo */
  --t-label-sm:  700 13px/18px var(--font-core);
  --t-input:     400 14px/20px var(--font-core);
  --t-btn:       700 15px/19px var(--font-core);   /* botón primario */
  --t-btn-sm:    700 14px/18px var(--font-core);
  --t-pill:      400 13px/18px var(--font-core);   /* pastilla inactiva */
  --t-pill-on:   700 13px/18px var(--font-core);   /* pastilla activa */
  --t-micro:     700 12px/16px var(--font-core);
  --t-badge:     700 11px/14px var(--font-core);   /* estado: Pendiente/Completado */
  --t-overline:  900 11px/14px var(--font-core);   /* "PASO 2 DE 5 · PERFIL", +0.1em, mayúsculas */
  --t-tag:       700 10px/14px var(--font-core);   /* "OPCIONAL", +0.04em, mayúsculas */

  /* Números — Barlow */
  --t-num-xl:    900 24px/1 var(--font-accent);    /* dígito de OTP */
  --t-num-lg:    900 17px/20px var(--font-accent); /* paso actual del medidor */
  --t-num:       700 15px/20px var(--font-accent); /* selector de hora, precio */
  --t-num-md:    700 14px/20px var(--font-accent); /* lada, monto */
  --t-num-sm:    900 12px/16px var(--font-accent); /* numeración de tarjeta 01..05 */
  --t-num-xs:    900 10px/14px var(--font-accent); /* número dentro de la pastilla */
  --t-tick:      400 11px/14px var(--font-accent); /* marcas de hora del deslizador */

  /* Tracking: el sistema va apretado en títulos y suelto en overlines */
  --track-tight:  -0.03em;  /* display */
  --track-snug:   -0.02em;  /* h2, h3, título */
  --track-micro:  -0.01em;  /* botón, pastilla */
  --track-wide:    0.04em;  /* etiqueta OPCIONAL */
  --track-caps:    0.1em;   /* overline */
}