/* * Base styles — minimal, token-driven. No component styles here. * Loaded after all legacy CSS (Bootstrap 4 / MDB / site CSS) — see _Layout.cshtml. * * Breakpoints (layout-driven, mobile-first): * mobile < 640px (default, no media query) * tablet 640px – 1023px @media (min-width: 640px) * desktop >= 1024px @media (min-width: 1024px) * * RTL: direction comes from . Logical properties only — no physical left/right. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family-base); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); color: var(--color-text); background-color: var(--color-background); } /* ---------- Headings (§3.1 + resolved P1-2, P1-3, P1-13) ---------- */ /* Mobile first: below 640px H1–H3 use the reduced sizes. */ h1 { font-size: var(--font-size-h1-mobile); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); } h2 { font-size: var(--font-size-h2-mobile); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); } h3 { font-size: var(--font-size-h3-mobile); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); } h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); } h5 { font-size: var(--font-size-h5); font-weight: var(--font-weight-h5); } h6 { font-size: var(--font-size-h6); font-weight: var(--font-weight-h6); } @media (min-width: 640px) { h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } } /* ---------- Links (§4.1 + resolved P1-4) ---------- */ a, a:visited { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } a:active { color: var(--color-primary-active); } /* ---------- Focus (§48 + resolved P1-5) ---------- */ /* Everything except text inputs, selects and textareas: visible outline. */ :focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } /* Text inputs, selects, textareas: design-system border + ring (§11, §12). */ input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus-border-color); box-shadow: var(--focus-ring); } /* ---------- Motion (§48) ---------- */ @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; } } /* ---------- Shared container (§8.1; 1200px includes padding, resolved P1-6) ---------- */ .ds-container { width: 100%; max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding-mobile); } @media (min-width: 640px) { .ds-container { padding-inline: var(--container-padding-tablet); } } @media (min-width: 1024px) { .ds-container { padding-inline: var(--container-padding-desktop); } }