/* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; background-color: var(--bg-primary); color: var(--text-primary); font-size: var(--body-size); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ---- Language-specific base typography ---- */ /* English (Latin) — set on */ html[lang="en"] body { font-family: 'Inter', -apple-system, sans-serif; } html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; } /* Arabic — set on */ html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', -apple-system, sans-serif; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 600; } /* ---- Base heading/text sizes (shared) ---- */ h1 { font-size: var(--h1-size); line-height: var(--lh-heading); color: var(--text-primary); } h2 { font-size: var(--h2-size); line-height: var(--lh-h2); color: var(--text-primary); } h3 { font-size: var(--h3-size); line-height: var(--lh-h3); color: var(--text-primary); } p { font-size: var(--body-size); line-height: var(--lh-body); } small, .caption { font-size: var(--caption-size); line-height: var(--lh-caption); color: var(--neutral-gray); } /* ---- Accessibility: visible keyboard focus ---- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- Screen-reader only utility ---- */ .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; }