/* ─── Color-blind–friendly overrides ─── Applied via [data-vision=""] on , layered on top of the base light / dark theme so only the problematic hues are remapped. */ /* ══════════════════════════════════════ Protanopia (red-blind ≈ 1 % of males) Red appears very dark / invisible. Strategy: primary → blue, error → orange, success → teal-blue ══════════════════════════════════════ */ /* — light — */ [data-vision="protanopia"] { --color-primary: #1B6AC9; --color-primary-hover: #155AA8; --color-primary-foreground: #FFFFFF; --color-primary-muted: #E8F0FA; --color-accent: #6D28D9; --color-error: #C45000; --color-error-foreground: #FFFFFF; --color-success: #0369A1; --color-success-foreground: #FFFFFF; --color-warning: #B45309; --color-warning-foreground: #FFFFFF; --color-info: #6D28D9; --color-info-foreground: #FFFFFF; --color-border-focus: #1B6AC9; } /* — dark — */ [data-vision="protanopia"][data-theme="dark"] { --color-primary: #5BA3F5; --color-primary-hover: #7BB8F7; --color-primary-foreground: #FFFFFF; --color-primary-muted: #1A2A3D; --color-accent: #A78BFA; --color-error: #F97316; --color-error-foreground: #FFFFFF; --color-success: #38BDF8; --color-success-foreground: #FFFFFF; --color-warning: #FBBF24; --color-warning-foreground: #1A1A1A; --color-info: #A78BFA; --color-info-foreground: #FFFFFF; --color-border-focus: #5BA3F5; } /* ══════════════════════════════════════ Deuteranopia (green-blind ≈ 6 % of males) Green appears brownish; red/green indistinguishable. Strategy: primary → blue, error → magenta, success → sky-blue ══════════════════════════════════════ */ /* — light — */ [data-vision="deuteranopia"] { --color-primary: #1B6AC9; --color-primary-hover: #155AA8; --color-primary-foreground: #FFFFFF; --color-primary-muted: #E8F0FA; --color-accent: #6D28D9; --color-error: #BE185D; --color-error-foreground: #FFFFFF; --color-success: #0369A1; --color-success-foreground: #FFFFFF; --color-warning: #B45309; --color-warning-foreground: #FFFFFF; --color-info: #6D28D9; --color-info-foreground: #FFFFFF; --color-border-focus: #1B6AC9; } /* — dark — */ [data-vision="deuteranopia"][data-theme="dark"] { --color-primary: #5BA3F5; --color-primary-hover: #7BB8F7; --color-primary-foreground: #FFFFFF; --color-primary-muted: #1A2A3D; --color-accent: #A78BFA; --color-error: #F472B6; --color-error-foreground: #FFFFFF; --color-success: #38BDF8; --color-success-foreground: #FFFFFF; --color-warning: #FBBF24; --color-warning-foreground: #1A1A1A; --color-info: #A78BFA; --color-info-foreground: #FFFFFF; --color-border-focus: #5BA3F5; } /* ══════════════════════════════════════ Tritanopia (blue-blind, rare) Blue appears greenish; yellow appears pinkish. Strategy: keep red primary, success → teal, warning → magenta, info → purple ══════════════════════════════════════ */ /* — light — */ [data-vision="tritanopia"] { --color-accent: #9333EA; --color-success: #0F766E; --color-success-foreground: #FFFFFF; --color-warning: #BE185D; --color-warning-foreground: #FFFFFF; --color-info: #9333EA; --color-info-foreground: #FFFFFF; } /* — dark — */ [data-vision="tritanopia"][data-theme="dark"] { --color-accent: #C084FC; --color-success: #2DD4BF; --color-success-foreground: #FFFFFF; --color-warning: #F472B6; --color-warning-foreground: #1A1A1A; --color-info: #C084FC; --color-info-foreground: #FFFFFF; }