@exxatdesignux/ui 0.2.18 → 0.2.19

package/src/tokens/high-contrast.css

@@ -0,0 +1,1195 @@
+/* ==========================================================================
+   HIGH CONTRAST MODE
+   ──────────────────────────────────────────────────────────────────────────
+   Three guiding principles (WCAG 1.4.6 Enhanced + research-backed UX):
+
+   1. FORCED-COLORS APPROACH
+      Strip gradients, shadows, and background images.
+      Use borders to define shape and elevation — not fills.
+      Limited palette: 4–6 named tokens, nothing decorative.
+
+   2. DON'T RELY ON COLOR ALONE
+      Error/warning states get a thick border AND an icon differentiator.
+      Charts and badges use luminance separation (grayscale steps), not hue.
+      Interactive state (hover / focus / active) is communicated via outline,
+      not background-color change alone.
+
+   3. DARK MODE ≠ HIGH CONTRAST
+      Dark mode  = aesthetic; uses subtle greys.
+      High-contrast dark = functional; uses near-black grey canvas, pure white
+      (#FFF), and a "hot" neon-yellow focus accent for maximum visibility.
+   ========================================================================== */
+
+/* ── Light High Contrast ─────────────────────────────────────────────────── */
+/*    Fluent 2 / Microsoft 6-color strategy.                                 */
+/*    Highlight = saturated bright brand color (follows theme hue).           */
+html[data-contrast="high"]:not(.dark) {
+  --hc-highlight: oklch(from var(--brand-color) 0.35 0.30 h);
+  --hc-highlight-text: oklch(1 0 0);
+
+  --background:         oklch(1 0 0);
+  --foreground:         oklch(0.14 0 0);
+  --card:               oklch(1 0 0);
+  --card-foreground:    oklch(0.14 0 0);
+  --popover:            oklch(1 0 0);
+  --popover-foreground: oklch(0.14 0 0);
+  --primary:            oklch(0.14 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --secondary:            oklch(1 0 0);
+  --secondary-foreground: oklch(0.14 0 0);
+  --muted:            oklch(0.94 0 0);
+  --muted-foreground: oklch(0.14 0 0);
+  --accent:            var(--hc-highlight);
+  --accent-foreground: var(--hc-highlight-text);
+  --destructive:            oklch(0.45 0.24 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border:            oklch(0.14 0 0);
+  --border-control:    oklch(0.14 0 0);
+  --border-control-3:  oklch(0.14 0 0);
+  --border-control-35: oklch(0.14 0 0);
+  --control-border:    oklch(0.14 0 0);
+  --input:            oklch(0.14 0 0);
+  --input-background: oklch(1 0 0);
+  --ring: var(--hc-highlight);
+  --sidebar:                    oklch(1 0 0);
+  --sidebar-foreground:         oklch(0.14 0 0);
+  --sidebar-primary:            oklch(0.14 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent:             oklch(0.90 0 0);
+  --sidebar-accent-foreground:  oklch(0.14 0 0);
+  --sidebar-border:             oklch(0.14 0 0);
+  --sidebar-ring:               var(--hc-highlight);
+  --sidebar-section-label-foreground: oklch(0.40 0 0);
+  --chart-1: oklch(0.14 0 0);
+  --chart-2: oklch(0.35 0 0);
+  --chart-3: oklch(0.55 0 0);
+  --chart-4: oklch(0.72 0 0);
+  --chart-5: oklch(0.86 0 0);
+  --chip-1:           oklch(0.14 0 0);
+  --chip-2:           oklch(0.14 0 0);
+  --chip-3:           oklch(0.14 0 0);
+  --chip-4:           oklch(0.14 0 0);
+  --chip-5:           oklch(0.14 0 0);
+  --chip-destructive: oklch(0.45 0.24 25);
+  --interactive-hover:            oklch(0.88 0 0);
+  --interactive-hover-foreground: oklch(0.14 0 0);
+  --interactive-hover-subtle:     oklch(0.92 0 0);
+  --interactive-hover-soft:       oklch(0.92 0 0);
+  --interactive-hover-medium:     oklch(0.86 0 0);
+  --interactive-hover-strong:     oklch(0.82 0 0);
+  --interactive-hover-row:        oklch(0.88 0 0);
+  --overlay: color-mix(in oklch, var(--foreground) 18%, transparent);
+  --dt-row-bg:          oklch(1 0 0);
+  --dt-row-hover:       oklch(0.92 0 0);
+  --dt-row-selected:    var(--accent);
+  --dt-row-selected-fg: var(--accent-foreground);
+  --dt-header-bg:       oklch(1 0 0);
+  --dt-group-bg:        oklch(0.92 0 0);
+  --dt-new-row-bg:      oklch(1 0 0);
+  --dt-new-row-border:  oklch(0.14 0 0);
+}
+
+/* ── Dark High Contrast ──────────────────────────────────────────────────── */
+/*    Same 6-color strategy inverted for dark canvas.                        */
+/*    Highlight = very bright saturated brand (like MS cyan but brand hue).  */
+html[data-contrast="high"].dark {
+  --hc-highlight: oklch(from var(--brand-color) 0.78 0.30 h);
+  --hc-highlight-text: oklch(0.08 0 0);
+
+  --background:         oklch(0.14 0 0);
+  --foreground:         oklch(0.96 0 0);
+  --card:               oklch(0.14 0 0);
+  --card-foreground:    oklch(0.96 0 0);
+  --popover:            oklch(0.20 0 0);
+  --popover-foreground: oklch(0.96 0 0);
+  --primary:            oklch(0.96 0 0);
+  --primary-foreground: oklch(0.10 0 0);
+  --secondary:            oklch(0.14 0 0);
+  --secondary-foreground: oklch(0.96 0 0);
+  --muted:            oklch(0.22 0 0);
+  --muted-foreground: oklch(0.96 0 0);
+  --accent:            var(--hc-highlight);
+  --accent-foreground: var(--hc-highlight-text);
+  --destructive:            oklch(0.72 0.18 18);
+  --destructive-foreground: oklch(0.10 0 0);
+  --border:            oklch(0.75 0 0);
+  --border-control:    oklch(0.75 0 0);
+  --border-control-3:  oklch(0.75 0 0);
+  --border-control-35: oklch(0.75 0 0);
+  --control-border:    oklch(0.75 0 0);
+  --input:            oklch(0.75 0 0);
+  --input-background: oklch(0.14 0 0);
+  --ring: var(--hc-highlight);
+  --sidebar:                    oklch(0.14 0 0);
+  --sidebar-foreground:         oklch(0.96 0 0);
+  --sidebar-primary:            oklch(0.96 0 0);
+  --sidebar-primary-foreground: oklch(0.10 0 0);
+  --sidebar-accent:             oklch(0.24 0 0);
+  --sidebar-accent-foreground:  oklch(0.96 0 0);
+  --sidebar-border:             oklch(0.75 0 0);
+  --sidebar-ring:               var(--hc-highlight);
+  --sidebar-section-label-foreground: oklch(0.65 0 0);
+  --chart-1: oklch(0.96 0 0);
+  --chart-2: oklch(0.75 0 0);
+  --chart-3: oklch(0.55 0 0);
+  --chart-4: oklch(0.38 0 0);
+  --chart-5: oklch(0.22 0 0);
+  --chip-1:           oklch(0.96 0 0);
+  --chip-2:           oklch(0.96 0 0);
+  --chip-3:           oklch(0.96 0 0);
+  --chip-4:           oklch(0.96 0 0);
+  --chip-5:           oklch(0.96 0 0);
+  --chip-destructive: oklch(0.72 0.18 18);
+  --interactive-hover:            oklch(0.26 0 0);
+  --interactive-hover-foreground: oklch(0.96 0 0);
+  --interactive-hover-subtle:     oklch(0.22 0 0);
+  --interactive-hover-soft:       oklch(0.22 0 0);
+  --interactive-hover-medium:     oklch(0.28 0 0);
+  --interactive-hover-strong:     oklch(0.32 0 0);
+  --interactive-hover-row:        oklch(0.26 0 0);
+  --overlay: color-mix(in oklch, var(--foreground) 22%, transparent);
+  --dt-row-bg:          oklch(0.14 0 0);
+  --dt-row-hover:       oklch(0.22 0 0);
+  --dt-row-selected:    var(--accent);
+  --dt-row-selected-fg: var(--accent-foreground);
+  --dt-header-bg:       oklch(0.14 0 0);
+  --dt-group-bg:        oklch(0.22 0 0);
+  --dt-new-row-bg:      oklch(0.14 0 0);
+  --dt-new-row-border:  oklch(0.96 0 0);
+}
+
+/* Neutralize brand tint washes in HC so bg-brand-tint doesn't compete     */
+html:is([data-contrast="high"], [data-contrast="windows"]):not(.dark) {
+  --brand-tint:        oklch(0.94 0 0);
+  --brand-tint-light:  oklch(0.97 0 0);
+  --brand-tint-subtle: oklch(0.98 0 0);
+}
+html:is([data-contrast="high"], [data-contrast="windows"]).dark {
+  --brand-tint:        oklch(0.22 0 0);
+  --brand-tint-light:  oklch(0.18 0 0);
+  --brand-tint-subtle: oklch(0.16 0 0);
+}
+
+/* ── Structural rules shared by BOTH light and dark HC ──────────────────── */
+/*    Pattern 1: "Borders over Fills" — strip decorative chrome              */
+html:is([data-contrast="high"], [data-contrast="windows"]) {
+
+  /* 1a. Remove ALL box-shadows (elevation via outline, not shadow) */
+  & * {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  /* 1b. Strip gradient fills from cards; use border to define shape */
+  & [data-slot="card"] {
+    background-image: none !important;
+    border: 2px solid var(--foreground) !important;
+  }
+
+  /* 1c. Thicker borders on all form controls (WCAG 1.4.11: 3:1 UI contrast) */
+  & [data-slot="input"],
+  & [data-slot="select-trigger"],
+  & [data-slot="textarea"],
+  & [data-slot="checkbox"],
+  & [data-slot="switch"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+  }
+
+  /* 1d. Sidebar defined by its edge border, not background colour */
+  & [data-slot="sidebar"] {
+    border-inline-end: 2px solid var(--sidebar-border) !important;
+  }
+
+  /* Nested secondary panel (Library rail) — border like sidebar; ring alone is invisible in HC */
+  & [data-slot="secondary-panel"] {
+    border: 2px solid var(--foreground) !important;
+    box-shadow: none !important;
+  }
+
+  /* 1e. Tab list — border not fill */
+  & [data-slot="tabs-list"] {
+    background-color: transparent !important;
+    border: 2px solid var(--foreground) !important;
+  }
+
+  /* 1f. Badge / chip — border-based; no decorative fills */
+  & [data-slot="badge"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    box-shadow: none !important;
+    outline: none !important;
+    color: var(--foreground) !important;
+  }
+
+  & [data-slot="badge"] * {
+    color: var(--foreground) !important;
+  }
+
+  /* Status chip — same treatment as Badge (border-based, no decorative fill) */
+  & [data-slot="status-badge"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    box-shadow: none !important;
+    outline: none !important;
+    color: var(--foreground) !important;
+  }
+
+  /* Sidebar wrapper is positioning-only when it wraps Badge/StatusBadge — avoid double border */
+  & [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]),
+  & [data-slot="sidebar-menu-badge"]:has([data-slot="status-badge"]) {
+    border-width: 0 !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
+  & [data-slot="view-toolbar-count"] {
+    border-width: 2px !important;
+    border-color: currentColor !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    color: var(--foreground) !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
+  & [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])):not(:has([data-slot="status-badge"])) {
+    border-width: 2px !important;
+    border-color: currentColor !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    color: var(--foreground) !important;
+  }
+
+  /* Segmented tab buttons: global HC button border + count pill border = double ring */
+  & button[data-slot="view-segmented-item"] {
+    border-width: 0 !important;
+    border-color: transparent !important;
+  }
+
+  /* Radix Tabs — active state must not rely on muted fill / pseudo underline only */
+  & [data-slot="tabs-trigger"] {
+    color: var(--foreground) !important;
+    opacity: 1 !important;
+  }
+
+  & [data-slot="tabs-trigger"][data-state="active"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: none !important;
+    font-weight: 600 !important;
+  }
+
+  /* KPI strip + chart card mini-metrics — force readable copy (muted grays fail in HC) */
+  & [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) {
+    color: var(--foreground) !important;
+  }
+
+  & [data-slot="key-metrics"] :where(svg) {
+    color: var(--foreground) !important;
+  }
+
+  /* List / menu rows — Highlight brand color for selection */
+  & [data-slot="dropdown-menu-item"][data-highlighted],
+  & [data-slot="dropdown-menu-checkbox-item"][data-highlighted],
+  & [data-slot="dropdown-menu-radio-item"][data-highlighted],
+  & [data-slot="dropdown-menu-sub-trigger"][data-highlighted],
+  & [data-slot="select-item"][data-highlighted],
+  & [data-slot="command-item"][data-selected],
+  & [data-slot="command-item"][aria-selected="true"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  & [data-slot="dropdown-menu-item"][data-highlighted] *,
+  & [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *,
+  & [data-slot="dropdown-menu-radio-item"][data-highlighted] *,
+  & [data-slot="dropdown-menu-sub-trigger"][data-highlighted] *,
+  & [data-slot="select-item"][data-highlighted] *,
+  & [data-slot="command-item"][data-selected] *,
+  & [data-slot="command-item"][aria-selected="true"] * {
+    color: var(--accent-foreground) !important;
+  }
+
+  /* List hub views toolbar + segmented radiogroup (not Radix Tabs / tabs-list) */
+  & [data-slot="view-segmented-toolbar"] {
+    background-color: transparent !important;
+    border: 2px solid var(--foreground) !important;
+  }
+
+  & [data-slot="view-segmented-item"][aria-pressed="true"],
+  & [data-slot="view-segmented-item"][aria-checked="true"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: none !important;
+  }
+
+  /* Floating surfaces — portal menus, popovers, sheets, dialogs */
+  & [data-slot="dropdown-menu-content"],
+  & [data-slot="dropdown-menu-sub-content"],
+  & [data-slot="popover-content"],
+  & [data-slot="select-content"],
+  & [data-slot="dialog-content"],
+  & [data-slot="sheet-content"],
+  & [data-slot="drawer-content"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+
+  & [data-slot="command"] {
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+
+  /* Strip conditional-formatting inline bg from table cells in HC */
+  & td[style*="background"] {
+    background: var(--dt-row-bg) !important;
+  }
+  & td.pinned-cell {
+    background-color: var(--dt-row-bg) !important;
+  }
+  & tr:hover td.pinned-cell,
+  & tr:hover td {
+    background-color: var(--dt-row-hover) !important;
+  }
+  & tr[data-state="selected"] td.pinned-cell,
+  & tr[data-state="selected"] td {
+    background-color: var(--dt-row-selected) !important;
+    color: var(--dt-row-selected-fg) !important;
+  }
+
+  /* Table selected rows — Highlight brand color (like MS Teams selection) */
+  & tr[data-state="selected"] {
+    background-color: var(--dt-row-selected) !important;
+    color: var(--dt-row-selected-fg) !important;
+  }
+  & tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) {
+    color: var(--accent-foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="badge"] {
+    background-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+    border-color: var(--accent-foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="badge"] * {
+    color: var(--accent) !important;
+  }
+
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"],
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: var(--accent-foreground) !important;
+    border-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+  }
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *,
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: var(--accent) !important;
+  }
+  & tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) {
+    background-color: var(--accent) !important;
+    border-color: var(--accent-foreground) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 2: Stronger focus ring (WCAG 2.4.11 / 2.4.12) ── */
+  & :focus-visible {
+    outline: 3px solid var(--ring) !important;
+    outline-offset: 3px !important;
+  }
+
+  /* ── Pattern 2: Error state — thick border + no colour-only signal ── */
+  & [aria-invalid="true"],
+  & [data-invalid] {
+    border-width: 3px !important;
+    border-color: var(--destructive) !important;
+    /* Downstream: pair with a ⚠ icon in the component for non-colour signal */
+  }
+
+  /* ── Pattern 3: Active nav — Highlight brand fill (like MS Teams) ── */
+  & [data-slot="sidebar-menu-button"][data-active="true"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: none !important;
+  }
+  & [data-slot="sidebar-menu-button"][data-active="true"] * {
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"],
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] {
+    background-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+    border-color: var(--accent-foreground) !important;
+  }
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *,
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * {
+    color: var(--accent) !important;
+  }
+  & [data-slot="toggle-group-item"][data-state="on"] {
+    outline: 2px solid var(--accent) !important;
+    outline-offset: -2px !important;
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3b: Checked checkboxes — Highlight brand fill ── */
+  & [data-slot="checkbox"][data-state="checked"],
+  & [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: var(--accent) !important;
+    border-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="checkbox"][data-state="checked"] *,
+  & [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3c: Checked radio buttons — Highlight brand fill ── */
+  & [data-slot="radio-group-item"][data-state="checked"] {
+    background-color: var(--accent) !important;
+    border-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="radio-group-item"][data-state="checked"] [data-slot="radio-group-indicator"] span {
+    background-color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3d: Toggle on state — Highlight brand fill ── */
+  & [data-slot="toggle"][data-state="on"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    border: 2px solid var(--accent) !important;
+  }
+
+  /* ── Pattern 3e: Switch (toggle-switch) — visible track + knob ── */
+  & [role="switch"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+  }
+  & [role="switch"][aria-checked="true"] {
+    background-color: var(--accent) !important;
+    border-color: var(--accent) !important;
+  }
+  & [role="switch"] > span {
+    background-color: var(--foreground) !important;
+  }
+  & [role="switch"][aria-checked="true"] > span {
+    background-color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3f: Select / dropdown item focus — Highlight brand fill ── */
+  & [data-slot="select-item"]:focus,
+  & [data-slot="dropdown-menu-item"]:focus,
+  & [data-slot="dropdown-menu-checkbox-item"]:focus,
+  & [data-slot="dropdown-menu-radio-item"]:focus,
+  & [data-slot="dropdown-menu-sub-trigger"]:focus {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="select-item"]:focus *,
+  & [data-slot="dropdown-menu-item"]:focus *,
+  & [data-slot="dropdown-menu-checkbox-item"]:focus *,
+  & [data-slot="dropdown-menu-radio-item"]:focus *,
+  & [data-slot="dropdown-menu-sub-trigger"]:focus * {
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3g: Dropdown check / radio indicator — inherit from parent ── */
+  & [data-slot="dropdown-menu-checkbox-item"][data-state="checked"],
+  & [data-slot="dropdown-menu-radio-item"][data-state="checked"] {
+    font-weight: 700 !important;
+  }
+
+  /* ── Pattern 4: Board cards — border-defined, no decorative fills ── */
+  & [data-slot="board-card"] {
+    border: 2px solid var(--foreground) !important;
+    background-image: none !important;
+  }
+
+  /* ── Pattern 6: List hub status badges — border not fill ── */
+  & [data-slot="list-hub-status-badge"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    color: var(--foreground) !important;
+  }
+
+  /* ── Pattern 6b: List page calendar — grid head, week gutter, day cells, nav group ── */
+  & [data-slot="list-page-calendar"] {
+    border: 2px solid var(--foreground) !important;
+  }
+  & [data-slot="list-page-calendar-head"] {
+    border: 2px solid var(--foreground) !important;
+    border-top-width: 0 !important;
+  }
+  & [data-slot="list-page-calendar-head"],
+  & [data-slot="list-page-calendar-head-cell"] {
+    background-color: var(--dt-header-bg) !important;
+    border-color: var(--foreground) !important;
+    color: var(--foreground) !important;
+    font-weight: 700 !important;
+  }
+  & [data-slot="list-page-calendar-week"] {
+    background-color: var(--dt-header-bg) !important;
+    border-color: var(--foreground) !important;
+    color: var(--foreground) !important;
+    font-weight: 700 !important;
+  }
+  & [data-slot="list-page-calendar-day"] {
+    border-color: var(--foreground) !important;
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+  & [data-slot="list-page-calendar-day"][data-today="true"] {
+    outline: 2px solid var(--accent) !important;
+    outline-offset: -2px !important;
+    background-color: var(--background) !important;
+  }
+  & [data-slot="list-page-calendar-day"][data-selected="true"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: 2px solid var(--accent) !important;
+    outline-offset: -2px !important;
+  }
+  & [data-slot="list-page-calendar-day"][data-selected="true"] * {
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="list-page-calendar-week-row"] {
+    border-color: var(--foreground) !important;
+  }
+  & [data-slot="button-group"] > [data-slot="button"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+    border-radius: 0 !important;
+  }
+  & [data-slot="button-group"] > [data-slot="button"]:first-child {
+    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
+  }
+  & [data-slot="button-group"] > [data-slot="button"]:last-child {
+    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
+  }
+  & [data-slot="button-group"] > [data-slot="button"]:not(:first-child) {
+    border-left-width: 2px !important;
+    margin-inline-start: -2px !important;
+  }
+
+  /* ── Pattern 7: Insight cards — border-based, strip gradient bg ── */
+  & [aria-label="Insight"],
+  & [data-slot="insight-card"] {
+    border: 2px solid var(--foreground) !important;
+    background-image: none !important;
+    background: var(--background) !important;
+  }
+
+  /* ── Pattern 8: Coach marks — strong border + readable text ── */
+  & [data-slot="coach-mark"] {
+    border: 2px solid var(--foreground) !important;
+    background: var(--background) !important;
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+    background-image: none !important;
+    opacity: 1 !important;
+  }
+  & [data-slot="coach-mark"] *:not(button):not(button *) {
+    color: var(--foreground) !important;
+  }
+
+  /* ── Pattern 9: Avatars — thicken ring, strip blend modes, force contrast ── */
+  & [data-slot="avatar"] {
+    border: 2px solid var(--foreground) !important;
+  }
+  & [data-slot="avatar"]::after {
+    display: none !important;
+  }
+  & [data-slot="avatar-fallback"] {
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="avatar"] {
+    border-color: var(--accent-foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="avatar-fallback"] {
+    background-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+  }
+
+  /* ── Pattern 10: Breadcrumbs — ensure separators are visible ── */
+  & [data-slot="breadcrumb-separator"] {
+    color: var(--foreground) !important;
+  }
+  & [data-slot="breadcrumb-link"] {
+    color: var(--foreground) !important;
+    text-decoration: underline !important;
+  }
+  & [data-slot="breadcrumb-page"] {
+    color: var(--foreground) !important;
+    font-weight: 700 !important;
+  }
+
+  /* ── Pattern 11: Tooltip / popover arrow — match border ── */
+  & [data-slot="tooltip-content"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+
+  /* ── Pattern 12: Separator — visible in HC ── */
+  & [data-slot="separator"] {
+    background-color: var(--foreground) !important;
+    opacity: 1 !important;
+  }
+
+  /* ── Pattern 13: Strip ALL hardcoded Tailwind palette colors ──────────── */
+  & [data-slot="banner"],
+  & [data-slot="local-banner"] {
+    background-color: var(--background) !important;
+    background-image: none !important;
+    border: 2px solid var(--foreground) !important;
+    color: var(--foreground) !important;
+  }
+  & [data-slot="banner"] *,
+  & [data-slot="local-banner"] * {
+    color: var(--foreground) !important;
+  }
+
+  & .recharts-bar-rectangle,
+  & .recharts-funnel-trapezoid {
+    stroke: var(--background) !important;
+    stroke-width: 2 !important;
+  }
+
+  & [role="progressbar"] {
+    border: 1px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+  }
+  & [role="progressbar"] > * {
+    background-color: var(--foreground) !important;
+  }
+
+  & [class*="text-emerald"],
+  & [class*="text-amber"],
+  & [class*="text-red-"],
+  & [class*="text-blue-"],
+  & [class*="text-green-"],
+  & [class*="text-yellow-"],
+  & [class*="text-slate-"],
+  & [class*="text-orange-"],
+  & [class*="text-pink-"],
+  & [class*="text-purple-"] {
+    color: var(--foreground) !important;
+  }
+
+  & [class*="text-brand"] {
+    color: var(--accent) !important;
+  }
+  & [class*="bg-brand"]:not([data-slot="coach-mark"]) {
+    background-color: var(--background) !important;
+  }
+  & [class*="border-brand"] {
+    border-color: var(--foreground) !important;
+  }
+
+  & [class*="bg-emerald"],
+  & [class*="bg-amber"],
+  & [class*="bg-red-"],
+  & [class*="bg-blue-"],
+  & [class*="bg-green-"],
+  & [class*="bg-yellow-"],
+  & [class*="bg-slate-"],
+  & [class*="bg-orange-"],
+  & [class*="bg-pink-"],
+  & [class*="bg-purple-"] {
+    background-color: var(--background) !important;
+  }
+
+  & [class*="border-emerald"],
+  & [class*="border-amber"],
+  & [class*="border-red-"],
+  & [class*="border-blue-"],
+  & [class*="border-green-"],
+  & [class*="border-yellow-"],
+  & [class*="border-slate-"],
+  & [class*="border-orange-"],
+  & [class*="border-pink-"],
+  & [class*="border-purple-"] {
+    border-color: var(--foreground) !important;
+  }
+}
+
+/* Coach mark HC override (top-level, outside nesting — bulletproof for portaled content) */
+html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] {
+  border: 2px solid var(--foreground) !important;
+  background: var(--background) !important;
+  background-color: var(--background) !important;
+  color: var(--foreground) !important;
+  background-image: none !important;
+  opacity: 1 !important;
+}
+html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] *:not(button):not(button *) {
+  color: var(--foreground) !important;
+}
+
+/* ── OS-level "Increase Contrast" — macOS / iOS / Android ───────────────── */
+@media (prefers-contrast: more) {
+  :root:not([data-contrast="off"]):not([data-contrast="windows"]) {
+    --foreground:        oklch(0.06 0 0);
+    --muted-foreground:  oklch(0.10 0 0);
+    --border:            oklch(0.10 0 0);
+    --border-control:    oklch(0.06 0 0);
+    --border-control-35: oklch(0.06 0 0);
+    --border-control-3:  oklch(0.06 0 0);
+    --ring:              oklch(0.06 0 0);
+  }
+  .dark:not([data-contrast="off"]):not([data-contrast="windows"]) {
+    --foreground:        oklch(1 0 0);
+    --muted-foreground:  oklch(0.88 0 0);
+    --border:            oklch(1 0 0);
+    --border-control:    oklch(0.88 0 0);
+    --border-control-35: oklch(0.88 0 0);
+    --border-control-3:  oklch(0.88 0 0);
+    --ring:              oklch(0.97 0.19 110);  /* neon yellow on dark */
+  }
+}
+
+/* ── Windows Forced Colors (High Contrast Mode in OS) ───────────────────── */
+/*    When `forced-colors: active`, Windows REPLACES our colours entirely.   */
+/*    Our job: map semantic roles to system palette keywords so the OS       */
+/*    colouring makes sense, and ensure borders/outlines remain visible.     */
+@media (forced-colors: active) {
+  :root {
+    --border:            CanvasText;
+    --border-control:    CanvasText;
+    --border-control-35: CanvasText;
+    --border-control-3:  CanvasText;
+    --ring:              Highlight;
+    --destructive:       LinkText;
+  }
+
+  /* Always show a 2px outline so focus is forced-color-safe */
+  :focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 2px !important;
+  }
+
+  body {
+    background-color: Canvas;
+    color: CanvasText;
+  }
+
+  a          { color: LinkText; }
+  button     { border: 1px solid ButtonText !important; }
+
+  /* Cards: OS strips bg fills — add explicit border so shape is preserved */
+  [data-slot="card"],
+  .card {
+    border: 2px solid CanvasText !important;
+  }
+
+  /* Sidebar edge */
+  [data-slot="sidebar"] {
+    border-inline-end: 2px solid CanvasText !important;
+  }
+
+  /* Wrapper-only sidebar badge (no inner Badge) — rare; keep single ring */
+  [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])) {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Positioning shell around <Badge/> — do not draw a second ring */
+  [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]) {
+    border: none !important;
+    background: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  [data-slot="badge"],
+  [data-slot="view-toolbar-count"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  [data-slot="badge"] *,
+  [data-slot="view-toolbar-count"] * {
+    color: CanvasText !important;
+  }
+
+  /* Avoid button chrome + inner count pill = double border */
+  button[data-slot="view-segmented-item"] {
+    border: none !important;
+  }
+
+  /* Radix Tabs (ChartCard, library, etc.) — gray inactive + invisible active in OS HC */
+  [data-slot="tabs-list"] {
+    border: 2px solid CanvasText !important;
+    background-color: transparent !important;
+  }
+
+  [data-slot="tabs-trigger"] {
+    color: CanvasText !important;
+    background-color: transparent !important;
+    opacity: 1 !important;
+  }
+
+  [data-slot="tabs-trigger"][data-state="active"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    outline: none !important;
+    font-weight: 600 !important;
+  }
+
+  /* Key metrics strip — labels/values/trend icons must not stay muted */
+  [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) {
+    color: CanvasText !important;
+  }
+
+  /* Menu / select / command palette — accent fill is often low-contrast in forced mode */
+  [data-slot="dropdown-menu-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="dropdown-menu-checkbox-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="dropdown-menu-radio-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="dropdown-menu-sub-trigger"][data-highlighted]:not([data-disabled]),
+  [data-slot="select-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="command-item"][data-selected]:not([data-disabled]),
+  [data-slot="command-item"][aria-selected="true"]:not([data-disabled]) {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+
+  [data-slot="dropdown-menu-item"][data-highlighted] *,
+  [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *,
+  [data-slot="dropdown-menu-radio-item"][data-highlighted] *,
+  [data-slot="dropdown-menu-sub-trigger"][data-highlighted] *,
+  [data-slot="select-item"][data-highlighted] *,
+  [data-slot="command-item"][data-selected] *,
+  [data-slot="command-item"][aria-selected="true"] * {
+    color: HighlightText !important;
+  }
+
+  /* Views toolbar (list hubs) + segmented radiogroup — selection via outline, not fill */
+  [data-slot="view-segmented-toolbar"] {
+    border: 2px solid CanvasText !important;
+    background: transparent !important;
+  }
+
+  [data-slot="view-segmented-item"] {
+    color: CanvasText !important;
+    background: transparent !important;
+  }
+
+  [data-slot="view-segmented-item"][aria-pressed="true"],
+  [data-slot="view-segmented-item"][aria-checked="true"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    outline: none !important;
+  }
+
+  /* Sidebar active item — Highlight brand fill */
+  [data-slot="sidebar-menu-button"][data-active="true"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    outline: none !important;
+  }
+  [data-slot="sidebar-menu-button"][data-active="true"] * {
+    color: HighlightText !important;
+  }
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"],
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] {
+    background-color: HighlightText !important;
+    color: Highlight !important;
+    border-color: HighlightText !important;
+  }
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *,
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * {
+    color: Highlight !important;
+  }
+
+  /* Strip conditional-formatting inline bg in forced-colors */
+  td[style*="background"] {
+    background: Canvas !important;
+  }
+  td.pinned-cell {
+    background-color: Canvas !important;
+  }
+  tr:hover td,
+  tr:hover td.pinned-cell {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+
+  /* Table selected rows — Highlight brand fill */
+  tr[data-state="selected"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] td {
+    background: Highlight !important;
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) {
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"],
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: HighlightText !important;
+    border-color: HighlightText !important;
+    color: Highlight !important;
+  }
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *,
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: Highlight !important;
+  }
+  tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) {
+    background-color: Highlight !important;
+    border-color: HighlightText !important;
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="badge"] {
+    background-color: HighlightText !important;
+    color: Highlight !important;
+    border-color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="badge"] * {
+    color: Highlight !important;
+  }
+  tr[data-state="selected"] [data-slot="avatar"] {
+    border-color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="avatar-fallback"] {
+    background-color: HighlightText !important;
+    color: Highlight !important;
+  }
+  /* Badge in forced-colors — opaque canvas bg */
+  [data-slot="badge"] {
+    background-color: Canvas !important;
+    border-color: CanvasText !important;
+    color: CanvasText !important;
+  }
+
+  /* Checked checkboxes — Highlight fill */
+  [data-slot="checkbox"][data-state="checked"] *,
+  [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: HighlightText !important;
+  }
+
+  /* Avatar in forced-colors */
+  [data-slot="avatar"] {
+    border: 2px solid CanvasText !important;
+  }
+  [data-slot="avatar"]::after {
+    display: none !important;
+  }
+  [data-slot="avatar-fallback"] {
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Checked checkboxes / radios — Highlight fill */
+  [data-slot="checkbox"][data-state="checked"],
+  [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  [data-slot="radio-group-item"][data-state="checked"] {
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+  }
+
+  /* Switch ON — Highlight fill */
+  [role="switch"][aria-checked="true"] {
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+  }
+  [role="switch"][aria-checked="true"] > span {
+    background-color: HighlightText !important;
+  }
+
+  /* Toggle ON — Highlight fill */
+  [data-slot="toggle"][data-state="on"],
+  [data-slot="toggle-group-item"][data-state="on"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    border-color: Highlight !important;
+  }
+
+  /* Progress bars — bordered track with CanvasText fill */
+  [role="progressbar"] {
+    border: 1px solid CanvasText !important;
+    background-color: Canvas !important;
+  }
+  [role="progressbar"] > * {
+    background-color: CanvasText !important;
+  }
+
+  /* Portal overlays — explicit Canvas pairing (OS often strips popover fills) */
+  [data-slot="dropdown-menu-content"],
+  [data-slot="dropdown-menu-sub-content"],
+  [data-slot="popover-content"],
+  [data-slot="select-content"],
+  [data-slot="dialog-content"],
+  [data-slot="sheet-content"],
+  [data-slot="drawer-content"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  [data-slot="command"] {
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Board cards — border-defined shape when fills are stripped */
+  [data-slot="board-card"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  [data-slot="secondary-panel"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* List hub status badges — border-only, text readable */
+  [data-slot="list-hub-status-badge"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+    font-weight: 700 !important;
+  }
+
+  [data-slot="list-page-calendar"],
+  [data-slot="list-page-calendar-head"],
+  [data-slot="list-page-calendar-head-cell"],
+  [data-slot="list-page-calendar-week"],
+  [data-slot="list-page-calendar-day"],
+  [data-slot="list-page-calendar-week-row"] {
+    border-color: CanvasText !important;
+    color: CanvasText !important;
+  }
+  [data-slot="list-page-calendar-head"],
+  [data-slot="list-page-calendar-head-cell"],
+  [data-slot="list-page-calendar-week"] {
+    background-color: Canvas !important;
+    font-weight: 700 !important;
+  }
+  [data-slot="list-page-calendar-day"] {
+    background-color: Canvas !important;
+  }
+  [data-slot="list-page-calendar-day"][data-selected="true"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  [data-slot="button-group"] > [data-slot="button"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Insight cards — strip gradient, add border */
+  [aria-label="Insight"],
+  [data-slot="insight-card"] {
+    border: 2px solid CanvasText !important;
+    background: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Coach marks / guided tours */
+  [data-slot="coach-mark"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+  [data-slot="coach-mark"] * {
+    color: CanvasText !important;
+  }
+
+  /* Avatars — thicken existing ::after ring */
+  [data-slot="avatar"]::after {
+    border-width: 2px !important;
+    border-color: CanvasText !important;
+  }
+
+  /* Breadcrumbs */
+  [data-slot="breadcrumb-separator"] {
+    color: CanvasText !important;
+  }
+  [data-slot="breadcrumb-link"] {
+    color: LinkText !important;
+  }
+  [data-slot="breadcrumb-page"] {
+    color: CanvasText !important;
+    font-weight: 700 !important;
+  }
+
+  /* Tooltip */
+  [data-slot="tooltip-content"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Export drawer */
+  [data-slot="export-drawer"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Separators */
+  [data-slot="separator"] {
+    background-color: CanvasText !important;
+    opacity: 1 !important;
+  }
+
+  /* Charts — forced-colors strips SVG fills; add stroke as fallback */
+  svg path, svg rect, svg circle {
+    forced-color-adjust: none;
+  }
+
+  /* Recharts radial bars, lines, and area — explicit stroke fallbacks */
+  .recharts-radial-bar-sector,
+  .recharts-line-curve,
+  .recharts-area-curve {
+    forced-color-adjust: none;
+    stroke: CanvasText !important;
+  }
+
+  .recharts-radial-bar-background-sector {
+    forced-color-adjust: none;
+    fill: Canvas !important;
+    stroke: GrayText !important;
+  }
+
+  .recharts-cartesian-axis-tick-value {
+    fill: CanvasText !important;
+  }
+
+  .recharts-cartesian-grid line {
+    stroke: GrayText !important;
+  }
+
+  .recharts-legend-item-text {
+    color: CanvasText !important;
+  }
+
+  .recharts-tooltip-wrapper {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+  }
+}