/* ========================================================================== TouchTo — High Contrast Mode Activated via .high-contrast on or prefers-contrast: more ========================================================================== */ /* Apply when .high-contrast is on */ .high-contrast { --color-bg: #000000; --color-surface: #1a1a1a; --color-surface-alt: #2a2a2a; --color-border: #ffffff; --color-border-strong: #ffffff; --color-text: #ffffff; --color-text-secondary: #e0e0e0; --color-text-muted: #b0b0b0; --color-text-inverse: #000000; --color-primary: #ffdd00; --color-primary-light: #ffe44d; --color-primary-dark: #ffdd00; --color-primary-bg: #1a1700; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-glow: 0 0 20px rgba(255, 221, 0, 0.5); background-color: #000000; color: #ffffff; } .high-contrast body { background-color: #000000; color: #ffffff; } /* Also respect OS-level high-contrast preference */ @media (prefers-contrast: more) { :root { --color-bg: #000000; --color-surface: #1a1a1a; --color-surface-alt: #2a2a2a; --color-border: #ffffff; --color-border-strong: #ffffff; --color-text: #ffffff; --color-text-secondary: #e0e0e0; --color-text-muted: #b0b0b0; --color-text-inverse: #000000; --color-primary: #ffdd00; --color-primary-light: #ffe44d; --color-primary-dark: #ffdd00; --color-primary-bg: #1a1700; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-glow: 0 0 20px rgba(255, 221, 0, 0.5); } } .high-contrast .card, .high-contrast .activity-card { border-width: 2px; } .high-contrast .bottom-nav { border-top-width: 2px; } .high-contrast img { filter: contrast(1.1); } .high-contrast .btn-primary { background: #ffdd00; color: #000000; } .high-contrast .btn-primary:hover { background: #ffe44d; } .high-contrast .btn-secondary { border-color: #ffdd00; color: #ffdd00; } .high-contrast .bottom-nav__item.active { color: #ffdd00; } .high-contrast .progress-bar__fill { background: #ffdd00; } .high-contrast :focus-visible { outline-color: #ffdd00; outline-width: 3px; } /* ========================================================================== WCAG-AAA fixes (audit tools/_hc-wcag.py): components with hardcoded brand colours that the token overrides above don't reach. Black-on-yellow ≈16:1, white-on-black =21:1. ========================================================================== */ /* Profile avatars (statusbar, settings, picker): arbitrary per-profile colours with white initials fail AAA. Force legible white-on-black + white ring. */ .high-contrast .statusbar__avatar, .high-contrast .profile-avatar, .high-contrast .profile-avatar--small, .high-contrast .r-profile-avatar { background: #000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; } /* Level-number circles in the home "Alle 7 Stufen" list (white-on-yellow). */ .high-contrast .stufen-row__num { background: #ffdd00 !important; color: #000000 !important; } /* Inline "Start" pill in the 3-day plan card (not a .btn-primary → missed the button rule above; was white-on-light-yellow). */ .high-contrast .plan-card__start { background: #ffdd00 !important; color: #000000 !important; } .high-contrast .plan-card__start i, .high-contrast .plan-card__start svg { color: #000000 !important; } /* Progress-story hero: brand gradient + white text → solid black + white text (white stays AAA on black; the translucent eyebrow/sentence are ≥12:1). */ .high-contrast .progress-story { background: #000000 !important; border: 2px solid #ffffff !important; } .high-contrast .progress-story__icon { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; } /* Progress screen is an older inline-styled screen; these additive classes let the stylesheet win over inline brand colours in high-contrast. */ .high-contrast .pg-stufe-num, .high-contrast .pg-rec-badge, .high-contrast .pg-komp-pill, .high-contrast .pg-diag-btn { background: #ffdd00 !important; color: #000000 !important; border-color: #ffdd00 !important; } .high-contrast .pg-diag-btn i, .high-contrast .pg-diag-btn svg { color: #000000 !important; } /* Diagnostik result: big stufe number + active progression dots inherit the stufe colour (yellow in HC) with white text → black-on-yellow. */ .high-contrast .diag-result-hero__num, .high-contrast .diag-stufe-dot.is-active { background: #ffdd00 !important; color: #000000 !important; } /* Diagnostik "focus" recommendation card: pale-green light element (green text on #f0fdf4) → dark card with white text + green accent, AAA + dark-consistent. */ .high-contrast .diag-focus-box { background: #06250f !important; border-color: #4ade80 !important; color: #ffffff !important; } .high-contrast .diag-focus-box i, .high-contrast .diag-focus-box svg { color: #4ade80 !important; }