/* Global styles — loaded once by the shell MFE and every standalone PWA. * * Sections (read top-down): * 1. Font hosting (ADR-005: self-host Devanagari, never call Google Fonts) * 2. Modern CSS reset (light, opinionated) * 3. Body / typography defaults * 4. Locale-aware line-height (Devanagari needs more) * 5. Focus-visible ring (a11y, WCAG 2.1 AA) * 6. Reduced-motion handling * 7. Form-element resets so platform defaults don't clash with the design * system's Field/Input components */ /* ── 1. Font ─────────────────────────────────────────────────────────── */ /* Fonts come from the system stack — Inter is widely installed via the * OS or browser preinstalled fonts; Devanagari is available natively on * every modern OS (Android: Noto Sans Devanagari; iOS: Kohinoor * Devanagari; Windows: Mangal/Aparajita; macOS: Devanagari MT). Self- * hosted woff2 returns once we have a subsetted asset to ship. */ /* ── 2. Reset ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Headings + body text don't dictate margins; layout components control * vertical rhythm via gap / margin tokens. Eliminates fighting browser * defaults inside Stack/Card. */ h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; } ul, ol { padding-left: 1.5rem; } img, picture, svg, video { display: block; max-width: 100%; } button { border: 0; background: none; font: inherit; cursor: pointer; } button:disabled { cursor: not-allowed; } /* ── 3. Body defaults ────────────────────────────────────────────────── */ :root { font-family: "Inter", "Noto Sans Devanagari", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.4; color: #0f172a; background: #ffffff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Better tap response on touch devices; eliminates the 300ms delay. */ touch-action: manipulation; } body { min-height: 100dvh; } /* ── 4. Devanagari line-height bump ──────────────────────────────────── */ /* `:lang(ne)` is set on the tag by the locale toggle. Devanagari * characters have ascenders/descenders that pile into the next row at the * Latin 1.4 default. */ :lang(ne) { line-height: 1.6; font-family: "Noto Sans Devanagari", "Inter", system-ui, sans-serif; } /* ── 5. Focus ring (a11y) ────────────────────────────────────────────── */ /* Hide the default outline ONLY for mouse users (`:focus` without * `:focus-visible`). Keyboard / AT users always see the ring. */ :focus { outline: none; } :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; } /* ── 6. Reduced motion ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── 7. Form-element baseline ────────────────────────────────────────── */ /* All inputs across all apps get this treatment automatically. Per- * component styling layers on top via inline style / className, but * the visual contract (border, hover, focus, error, autofill, disabled) * lives in one place. */ input, textarea, select, button { font: inherit; color: inherit; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input:not([type]), textarea, select { -webkit-appearance: none; appearance: none; background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; min-height: 52px; width: 100%; font-size: 16px; /* >=16 prevents iOS Safari zoom-on-focus */ color: #0f172a; line-height: 1.4; /* Subtle inner shadow gives the input a touch of depth without * looking 90s-skeuomorphic. Disappears on focus where the halo * takes over. */ box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } /* Placeholder reads as helper, not as content. */ input::placeholder, textarea::placeholder { color: #94a3b8; opacity: 1; } /* Hover — only fires for devices with a real pointer (skips touch * so phones don't "stick" in hover state after a tap). */ @media (hover: hover) { input:hover:not(:disabled):not(:focus):not([aria-invalid="true"]), textarea:hover:not(:disabled):not(:focus):not([aria-invalid="true"]), select:hover:not(:disabled):not(:focus):not([aria-invalid="true"]) { border-color: #cbd5e1; background: #fafbfc; } } /* Focus — replaces the global :focus-visible outline for form fields * with a brand-coloured ring on the border itself. The 4px halo at * 12% opacity reads as a soft spotlight rather than a sharp glow. */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: #dc2626; background: #ffffff; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12), inset 0 1px 0 rgba(15, 23, 42, 0); } /* Error state — visible at a glance, not just a colour shift. * Pink tinted background + crimson border + crimson halo. */ input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #dc2626; background: #fef2f2; } input[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible, select[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28); } /* Disabled — neutralised, no transition jitter. */ input:disabled, textarea:disabled, select:disabled { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; cursor: not-allowed; } /* Autofill — Chrome / Safari paint a yellow background by default that * obliterates our design tokens. Override via inset shadow + leave the * text colour explicit. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ffffff inset; -webkit-text-fill-color: #0f172a; caret-color: #0f172a; transition: background-color 0s 9999s; } /* Number input — kill the spinner; spinners on phone inputs are * basically never what users want. */ input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Search input — kill the clear-X and OS-specific decorations. */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } /* Screen-reader-only utility class. Use in code; this * exists as a CSS fallback for places where we drop the React primitive. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }