@exxatdesignux/ui 0.2.19 → 0.4.0

package/src/tokens/high-contrast.css

@@ -1,1195 +0,0 @@
-/* ==========================================================================
-   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;
-  }
-}