diff --git a/src/app/global.css b/src/app/global.css index 2b2a85d..ab3976f 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -33,12 +33,26 @@ body { html { /* Prefer dynamic viewport height so layout can adapt to keyboard (if browser resizes) */ height: 100%; + /* Base font size: slightly larger for readability */ + font-size: 16px; +} +@media (min-width: 640px) { + html { + font-size: 17px; + } +} +@media (min-width: 1024px) { + html { + font-size: 18px; + } } body { min-height: 100%; min-height: 100dvh; background-color: var(--background); color: var(--foreground); + font-size: 1rem; + line-height: 1.6; } /* Full-height containers: use dvh so keyboard doesn’t squash the layout when overlay is used */ diff --git a/tailwind.config.js b/tailwind.config.js index a2f9e87..af40323 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,6 +18,11 @@ module.exports = { border: "var(--border)", muted: "var(--muted)", }, + fontSize: { + xs: ["0.8125rem", { lineHeight: "1.25rem" }], + sm: ["0.9375rem", { lineHeight: "1.375rem" }], + base: ["1.0625rem", { lineHeight: "1.625rem" }], + }, }, }, plugins: [],