@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
--font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

/* atomic scale */
--fs-64:64px;--fs-44:44px;--fs-28:28px;--fs-22:22px;--fs-18:18px;--fs-16:16px;--fs-14:14px;--fs-13:13px;
--fw-regular:400;/* @kind font */
--fw-medium:500;/* @kind font */
--fw-semibold:600;/* @kind font */
--fw-bold:700;/* @kind font */
--lh-tight:1.1;/* @kind font */
--lh-snug:1.3;/* @kind font */
--lh-normal:1.55;/* @kind font */
--lh-single:1;/* @kind font */
--tracking-normal:0;--tracking-label:0.06em;

/* composite role tokens — use via style={{font:'var(--text-heading-lg)'}} */
--text-display-lg:600 64px/1.05 var(--font-sans);
--text-display-md:600 44px/1.1 var(--font-sans);
--text-heading-lg:600 28px/1.25 var(--font-sans);
--text-heading-md:600 22px/1.3 var(--font-sans);
--text-heading-sm:600 18px/1.4 var(--font-sans);
--text-body-lg:400 18px/1.55 var(--font-sans);
--text-body-md:400 16px/1.6 var(--font-sans);
--text-body-sm:400 14px/1.5 var(--font-sans);
--text-label:600 13px/1.2 var(--font-sans);
--text-button:600 16px/1 var(--font-sans);
}