- Set html font-size to 100% (respects browser settings) - Set body font-size to 1rem (16px minimum) - Add font smoothing for better readability - Add safe-bottom class for mobile notch support - Add touch-target utility for WCAG 44x44px minimum
25 lines
557 B
CSS
25 lines
557 B
CSS
@import 'tailwindcss';
|
|
|
|
/* Ensure minimum 16px base for accessibility (UX-02) */
|
|
html {
|
|
font-size: 100%; /* 16px default, respects user browser settings */
|
|
}
|
|
|
|
body {
|
|
font-size: 1rem; /* 16px minimum */
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Safe area padding for mobile devices with notches */
|
|
.safe-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
/* Utility for adequate touch targets (44x44px minimum per WCAG) */
|
|
.touch-target {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|