/* ============================================================ Accessibility Overrides — TECH-5245 Applied via data-* attributes on , set by: - themeUtils.applyAccessibility() (wwwroot/js/interop.js) — live toggle - the FOUC-prevention init script in Components/App.razor — first paint ============================================================ */ /* ---- Font Size (data-font-size="small|large|xlarge", "medium" = default/no attribute) ---- */ :root[data-font-size="small"] { font-size: 87.5%; } :root[data-font-size="large"] { font-size: 112.5%; } :root[data-font-size="xlarge"] { font-size: 125%; } /* ---- High Contrast (data-contrast="high") ---- Overrides both the RGB-triplet tokens Tailwind consumes (tailwind-input.css `@theme inline` maps background/foreground/border/muted/card etc. to --ds-rgb-*) and the hex tokens consumed directly via var() in glass.css/theme-overhaul.css — both must be set or utility classes silently keep the low-contrast palette (class-toggle-without-CSS trap). */ :root[data-contrast="high"]:not(.dark) { --ds-rgb-text-primary: 0 0 0; --ds-rgb-text-secondary: 0 0 0; --ds-rgb-text-muted: 38 38 38; --ds-rgb-bg-primary: 255 255 255; --ds-rgb-bg-secondary: 255 255 255; --ds-rgb-bg-elevated: 255 255 255; --ds-rgb-border: 0 0 0; --ds-text-primary: #000000; --ds-text-secondary: #000000; --ds-text-muted: #262626; --ds-bg-primary: #ffffff; --ds-bg-secondary: #ffffff; --ds-bg-elevated: #ffffff; --ds-border: #000000; --ds-border-subtle: #000000; --ds-border-strong: #000000; --ds-glass-bg: rgba(255, 255, 255, 0.98); --ds-glass-border: rgba(0, 0, 0, 0.8); } :root.dark[data-contrast="high"] { --ds-rgb-text-primary: 255 255 255; --ds-rgb-text-secondary: 255 255 255; --ds-rgb-text-muted: 217 217 217; --ds-rgb-bg-primary: 0 0 0; --ds-rgb-bg-secondary: 0 0 0; --ds-rgb-bg-elevated: 0 0 0; --ds-rgb-border: 255 255 255; --ds-text-primary: #ffffff; --ds-text-secondary: #ffffff; --ds-text-muted: #d9d9d9; --ds-bg-primary: #000000; --ds-bg-secondary: #000000; --ds-bg-elevated: #000000; --ds-border: #ffffff; --ds-border-subtle: #ffffff; --ds-border-strong: #ffffff; --ds-glass-bg: rgba(0, 0, 0, 0.98); --ds-glass-border: rgba(255, 255, 255, 0.8); } /* Every visible border becomes explicit under high contrast, even where the component relies on a subtle/near-invisible default border. */ :root[data-contrast="high"] * { border-color: currentColor; } :root[data-contrast="high"] a, :root[data-contrast="high"] button { text-decoration: underline; } /* ---- Reduce Motion (data-motion="reduce") ---- */ :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* OS-level "reduce motion" preference — applies even without an explicit account toggle. */ @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; } } /* ---- Screen Reader Hints (data-a11y-hints="on") ---- Extra sr-only-style hints on critical actions are hidden by default and only rendered into the accessibility tree (visually-hidden) when this preference is on, to avoid duplicate announcements for users who did not opt in. */ :root:not([data-a11y-hints="on"]) .a11y-hint { display: none; } :root[data-a11y-hints="on"] .a11y-hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }