:root{
/* --- Familias --- */
--font-sans:"Satoshi","Satoshi Static",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
/* La display de la identidad de marca. Hasta la 1.6.0 era un alias de
   --font-sans, que era la forma de decir "todavia no hay display". */
--font-display:"Parkinsans",var(--font-sans);
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

/* --- Pesos. OJO: 600 solo existe en la variable; con estaticos mapear 600 -> 700. --- */
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:900; /* @kind font */
/* El peso con el que se pinta la display de marca. Parkinsans llega a 800 y
   ese es el que usa la pieza de identidad. */
--fw-display:800; /* @kind font */

/* --- Tamanos --- */
--fs-display-xl:56px;
--fs-display-lg:44px;
--fs-display-md:36px;
--fs-h1:30px;
--fs-h2:24px;
--fs-h3:20px;
--fs-h4:17px;
--fs-body-lg:17px;
--fs-body:15px;
--fs-body-sm:13px;
--fs-caption:12px;
--fs-overline:11px;

/* --- Interlineado --- */
--lh-tight:1.1; /* @kind font */
--lh-snug:1.25; /* @kind font */
--lh-normal:1.45; /* @kind font */
--lh-relaxed:1.6; /* @kind font */

/* --- Tracking --- */
--ls-display:-0.02em; /* @kind font */
--ls-heading:-0.01em; /* @kind font */
--ls-body:0; /* @kind font */
--ls-overline:0.08em; /* @kind font */

/* --- Estilos compuestos (shorthand `font`: peso tamano/interlineado familia).
   EXCEPCION para el espejo en JS: no son valores escalares. Descomponer usando
   los --fw-*, --fs-*, --lh-* de arriba, que son la fuente de verdad. --- */
--text-display-lg:var(--fw-bold) var(--fs-display-lg)/var(--lh-tight) var(--font-display);
--text-h1:var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display);
--text-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display);
--text-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
--text-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-normal) var(--font-sans);
--text-body:var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
--text-body-lg:var(--fw-regular) var(--fs-body-lg)/var(--lh-normal) var(--font-sans);
--text-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-normal) var(--font-sans);
--text-body-strong:var(--fw-semibold) var(--fs-body)/var(--lh-normal) var(--font-sans);
--text-caption:var(--fw-medium) var(--fs-caption)/var(--lh-normal) var(--font-sans);
}
