:root,
html:root {
    --app-root-font-size: 14.5px;
    --app-compact-letter-spacing: 0.075em;
    --app-compact-control-font-size: 0.72rem;
    --app-compact-badge-font-size: 0.6875rem;
    --text-xs: 0.6875rem;
    --text-xs--line-height: calc(0.95 / 0.6875);
    --text-sm: 0.8125rem;
    --text-sm--line-height: calc(1.15 / 0.8125);
    --text-base: 0.9375rem;
    --text-base--line-height: calc(1.4 / 0.9375);
    --text-lg: 1.0625rem;
    --text-lg--line-height: calc(1.55 / 1.0625);
    --text-xl: 1.1875rem;
    --text-xl--line-height: calc(1.65 / 1.1875);
    --text-2xl: 1.375rem;
    --text-2xl--line-height: calc(1.85 / 1.375);
    --text-3xl: 1.625rem;
    --text-3xl--line-height: calc(2.05 / 1.625);
    --text-4xl: 2rem;
    --text-4xl--line-height: calc(2.3 / 2);
    --text-5xl: 2.375rem;
    --text-5xl--line-height: 1.08;
}

html {
    font-size: var(--app-root-font-size);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-size: var(--text-base);
}

html [class^="tracking-"],
html [class*=" tracking-"] {
    letter-spacing: var(--app-compact-letter-spacing) !important;
}

html button[class*="text-"],
html a.inline-flex[class*="text-"],
html [role="button"][class*="text-"] {
    font-size: var(--app-compact-control-font-size) !important;
    letter-spacing: min(var(--app-compact-letter-spacing), 0.075em) !important;
}

html span[class*="rounded-full"][class*="text-"],
html span[class*="rounded-xl"][class*="text-"],
html span[class*="rounded-2xl"][class*="text-"],
html [class*="badge"][class*="text-"],
html [class*="status"][class*="text-"] {
    font-size: var(--app-compact-badge-font-size) !important;
    letter-spacing: min(var(--app-compact-letter-spacing), 0.075em) !important;
}

html [class*="text-[10px]"] {
    font-size: 0.625rem !important;
}

html [class*="text-[11px]"],
html [class*="text-[12px]"] {
    font-size: var(--app-compact-badge-font-size) !important;
}