body { font-family: var(--type-font-family-body); }h1, h2, h3, h4, h5, h6 { font-family: var(--type-font-family-headings); }@media (max-width: 767px) { :root { --font-size-body-xs: 12px; --line-height-body-xs: 12px; --font-size-body-sm: 12px; --line-height-body-sm: 16px; --font-size-body-md: 14px; --line-height-body-md: 20px; --font-size-body-lg: 16px; --line-height-body-lg: 24px; --font-size-body-xl: 18px; --line-height-body-xl: 28px; --font-size-headings-h1: 28px; --line-height-headings-h1: 32px; --font-size-headings-h2: 24px; --line-height-headings-h2: 28px; --font-size-headings-h3: 20px; --line-height-headings-h3: 24px; --font-size-headings-h4: 16px; --line-height-headings-h4: 20px; --font-size-headings-h5: 14px; --line-height-headings-h5: 16px; --spacing-2xs: var(--scale-100); --spacing-xs: var(--scale-100); --spacing-sm: var(--scale-200); --spacing-md: var(--scale-300); --spacing-lg: var(--scale-400); --spacing-xl: var(--scale-600); --spacing-xxl: var(--scale-800); }}:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--border-width-sm) solid var(--border-action-focus); outline-offset: 2px;}