/* ============================================================================ Global font scaling ---------------------------------------------------------------------------- Makes EVERY Tailwind text size respond to the user's --font-scale setting, which is chosen in Settings → Interface, persisted in localStorage under 'nia-font-scale', and applied on every page by the early inline loader in each page's . Why this file exists: the app previously scaled only a handful of elements that were hand-wired with calc(px * var(--font-scale)). The ~450 Tailwind text utilities (text-xs … text-4xl and text-[8px]…text-[11px]) did not scale at all, so the control appeared to do almost nothing. These rules cover them globally. font-size is scaled; line-height is set as a UNITLESS ratio so it scales with the font instead of staying fixed. leading-* rules come last so explicit line-heights in the markup still win. ============================================================================ */ :root { --font-scale: 1; } /* Standard Tailwind text utilities (font-size in rem, Tailwind's own ratios). */ .text-xs { font-size: calc(0.75rem * var(--font-scale)) !important; line-height: 1.333 !important; } .text-sm { font-size: calc(0.875rem * var(--font-scale)) !important; line-height: 1.429 !important; } .text-base { font-size: calc(1rem * var(--font-scale)) !important; line-height: 1.5 !important; } .text-lg { font-size: calc(1.125rem * var(--font-scale)) !important; line-height: 1.556 !important; } .text-xl { font-size: calc(1.25rem * var(--font-scale)) !important; line-height: 1.4 !important; } .text-2xl { font-size: calc(1.5rem * var(--font-scale)) !important; line-height: 1.333 !important; } .text-3xl { font-size: calc(1.875rem * var(--font-scale)) !important; line-height: 1.2 !important; } .text-4xl { font-size: calc(2.25rem * var(--font-scale)) !important; line-height: 1.111 !important; } .text-5xl { font-size: calc(3rem * var(--font-scale)) !important; line-height: 1 !important; } /* Arbitrary pixel sizes used throughout the app. font-size only — they inherit line-height, which is correct for the small single-line labels they mark up. */ .text-\[8px\] { font-size: calc(8px * var(--font-scale)) !important; } .text-\[9px\] { font-size: calc(9px * var(--font-scale)) !important; } .text-\[10px\] { font-size: calc(10px * var(--font-scale)) !important; } .text-\[11px\] { font-size: calc(11px * var(--font-scale)) !important; } /* Responsive variants actually used in the markup (md: only). Placed after the base rules so they win at the md breakpoint, preserving responsive bumps. */ @media (min-width: 768px) { .md\:text-xs { font-size: calc(0.75rem * var(--font-scale)) !important; line-height: 1.333 !important; } .md\:text-base { font-size: calc(1rem * var(--font-scale)) !important; line-height: 1.5 !important; } .md\:text-3xl { font-size: calc(1.875rem * var(--font-scale)) !important; line-height: 1.2 !important; } } /* Explicit line-heights stay authoritative (unitless so they scale with font). Last in the file so they beat the line-heights set on the text-* rules above. */ .leading-none { line-height: 1 !important; } .leading-tight { line-height: 1.25 !important; } .leading-snug { line-height: 1.375 !important; } .leading-normal { line-height: 1.5 !important; } .leading-relaxed { line-height: 1.625 !important; } .leading-loose { line-height: 2 !important; }