/* Colorblind accessibility modes — WCAG 2.1 AA compliant Activated via data-colorblind-mode attribute on Modes: protanopia, deuteranopia, tritanopia */ /* ═══ PROTANOPIA (red-blind) ═══ */ html[data-colorblind-mode="protanopia"] { --tp-red: #0072B2; /* red → blue */ --tp-green: #E69F00; /* green → amber */ --tp-accent: #0072B2; --cb-success: #E69F00; --cb-danger: #0072B2; --cb-warning: #F0E442; --cb-info: #56B4E9; } html[data-colorblind-mode="protanopia"] .ct-badge-type, html[data-colorblind-mode="protanopia"] .med-btn-gold, html[data-colorblind-mode="protanopia"] .fd-badge { background: rgba(0,114,178,.12); color: #0072B2; } html[data-colorblind-mode="protanopia"] .pk-save, html[data-colorblind-mode="protanopia"] .fd-pkg .save { color: #E69F00; } /* ═══ DEUTERANOPIA (green-blind) ═══ */ html[data-colorblind-mode="deuteranopia"] { --tp-red: #D55E00; /* keep orange-red distinguishable */ --tp-green: #0072B2; /* green → blue */ --tp-accent: #D55E00; --cb-success: #0072B2; --cb-danger: #D55E00; --cb-warning: #F0E442; --cb-info: #56B4E9; } html[data-colorblind-mode="deuteranopia"] .ct-badge-eco, html[data-colorblind-mode="deuteranopia"] .pk-save { color: #0072B2; background: rgba(0,114,178,.1); } /* ═══ TRITANOPIA (blue-blind) ═══ */ html[data-colorblind-mode="tritanopia"] { --tp-red: #D55E00; --tp-green: #009E73; --tp-blue: #CC79A7; /* blue → pink */ --tp-accent: #D55E00; --cb-success: #009E73; --cb-danger: #D55E00; --cb-warning: #E69F00; --cb-info: #CC79A7; } html[data-colorblind-mode="tritanopia"] .mn-badge, html[data-colorblind-mode="tritanopia"] .mn-card { border-color: #CC79A7; } /* ═══ Common — Patterns + shapes supplement color ═══ */ html[data-colorblind-mode] .ct-badge-access::before { content: "♿ "; } html[data-colorblind-mode] .ct-badge-halal::before { content: "☪ "; } html[data-colorblind-mode] .ct-badge-family::before { content: "👨‍👩‍👧 "; } html[data-colorblind-mode] .ct-badge-eco::before { content: "🌿 "; } html[data-colorblind-mode] .pk-save::before { content: "▼ "; } html[data-colorblind-mode] .fc-badge-acc { border: 2px dashed currentColor; } /* Ensure sufficient contrast on all modes */ html[data-colorblind-mode] .ct-type-card { border-left-width: 6px; } html[data-colorblind-mode] .mn-card { border-left-width: 6px; } html[data-colorblind-mode] .med-pkg { border-left-width: 6px; } /* ═══ Accessibility toggle button ═══ */ .cb-toggle { position: relative; cursor: pointer; } .cb-menu { display: none; position: absolute; right: 0; top: 100%; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.15); padding: 8px 0; min-width: 200px; z-index: 1000; } .cb-toggle.open .cb-menu { display: block; } .cb-menu button { display: block; width: 100%; padding: 10px 16px; border: none; background: none; text-align: left; font-size: 13px; cursor: pointer; font-weight: 500; } .cb-menu button:hover { background: rgba(0,0,0,.04); } .cb-menu button.active { background: rgba(225,29,72,.08); color: #e11d48; font-weight: 700; }