/* ============================================================================ Tokens - Accessibility mode overrides system/tokens/accessibility-mode.css STATUS: DRAFT (2026-04-10) Real-user testing pending. Values are intentionally "gedämpft" - keep the brand character, raise contrast, eliminate motion. NOT extreme black/white/yellow. We iterate based on diverse-user feedback. Activated by [data-mode="accessible"] on . The Bridge persists the mode in config.toml; the IPC contract is documented in system/rules/accessibility-mode.md. See sibling notes in colors.md, typography.md, motion.md. ============================================================================ */ [data-mode="accessible"] { /* ---------------------------------------------------------------------- Colors - gedämpfte palette (AAA contrast, brand-faithful) Slightly deeper bases, slightly brighter accents. Same brand DNA, better separation. ---------------------------------------------------------------------- */ /* Backgrounds - deeper for stronger contrast */ --gm-bg-base: #021a16; /* deeper than --gm-pdk #04342c */ --gm-bg-elevated: #0a3d33; /* clearer separation from base */ --gm-bg-sunken: #000d0a; /* near-black for inputs */ --gm-bg-overlay: rgba(0, 13, 10, 0.92); /* Text - full brightness, maximum contrast */ --gm-text-primary: #ffffff; /* 19.0:1 on new bg-base */ --gm-text-secondary: #ecf8f3; /* 16.0:1 - was --gm-pls */ --gm-text-tertiary: #c8ecd9; /* 12.0:1 - was --gm-pli */ --gm-text-muted: #87d7b6; /* 8.0:1 - was --gm-pl, now lifted */ /* Accent - brighter, denser */ --gm-accent: #87d7b6; /* lifted from --gm-pl for visibility */ --gm-accent-strong: #c8ecd9; --gm-accent-fill: #11a378; /* slightly more saturated than --gm-p */ --gm-accent-hover: #25c594; /* Borders - much stronger for edge clarity (≥ 3:1 UI contrast) */ --gm-border-subtle: rgba(135, 215, 182, 0.30); --gm-border-default: rgba(135, 215, 182, 0.50); --gm-border-strong: rgba(135, 215, 182, 0.75); /* Status colors - kept high contrast */ --gm-success: #87d7b6; --gm-warning: #ffd166; /* lifted from #f57c00 - yellow register for max a11y contrast */ --gm-warning-light: #ffe28a; --gm-warning-dark: #d69400; --gm-danger: #ffb0b0; /* lifted from #fca5a5 */ --gm-info: #b0dcf3; /* lifted from #5db9e8 */ --gm-info-light: #d4ecf9; /* ---------------------------------------------------------------------- Typography - larger base, heavier minimum weights ---------------------------------------------------------------------- */ --gm-fs-xs: 0.9375rem; /* 15px - was 13px */ --gm-fs-sm: 1rem; /* 16px - was 14px */ --gm-fs-base: 1.125rem; /* 18px - was 16px */ --gm-fs-body: 1.1875rem; /* 19px - was 17px */ --gm-fs-lg: 1.4375rem; /* 23px - was 20px */ --gm-fs-xl: 1.6875rem; /* 27px - was 24px */ /* Line height looser for cognitive accessibility */ --gm-lh-base: 1.65; /* was 1.5 */ /* ---------------------------------------------------------------------- Shadows - disabled (edge contrast comes from borders, not shadows) ---------------------------------------------------------------------- */ --gm-shadow-sm: none; --gm-shadow-md: none; --gm-shadow-lg: none; } /* ---------------------------------------------------------------------- Component-level overrides for accessible mode These cannot be expressed as token swaps because they change geometry. ---------------------------------------------------------------------- */ /* Buttons grow to 64 px touch target */ [data-mode="accessible"] .gm .gm-btn { min-height: 64px; padding: var(--gm-space-4) var(--gm-space-8); } [data-mode="accessible"] .gm .gm-btn-sm { min-height: 56px; } [data-mode="accessible"] .gm .gm-btn-lg { min-height: 72px; } [data-mode="accessible"] .gm .gm-btn-icon { min-width: 64px; } /* Web buttons also grow */ [data-mode="accessible"] .gm .gm-web-btn { min-height: 64px; } /* Inputs grow */ [data-mode="accessible"] .gm input, [data-mode="accessible"] .gm textarea, [data-mode="accessible"] .gm select { min-height: 64px; padding: var(--gm-space-4) var(--gm-space-5); } /* Focus outlines - 4 px instead of subtle border-color */ [data-mode="accessible"] .gm *:focus-visible { outline: 4px solid var(--gm-accent); outline-offset: 3px; } /* No haptic chrome - flatten the bevelled buttons + panels. Edge contrast comes from the strong borders defined above. */ [data-mode="accessible"] .gm .gm-btn-primary, [data-mode="accessible"] .gm .gm-btn-secondary, [data-mode="accessible"] .gm .gm-btn-danger { background: var(--gm-accent-fill); border: 2px solid var(--gm-accent-hover); box-shadow: none; } [data-mode="accessible"] .gm .gm-btn-primary { background: var(--gm-accent-fill); color: #ffffff; } [data-mode="accessible"] .gm .gm-btn-secondary { background: var(--gm-bg-elevated); color: var(--gm-text-primary); border-color: var(--gm-border-strong); } [data-mode="accessible"] .gm .gm-btn-danger { background: #c0344a; border-color: #ff8095; color: #ffffff; } /* Panels - drop the inset highlight + drop shadow */ [data-mode="accessible"] .gm .gm-panel { box-shadow: none; border: 2px solid var(--gm-border-default); } /* Cards - same flattening */ [data-mode="accessible"] .gm .gm-card, [data-mode="accessible"] .gm .gm-web-card { border: 2px solid var(--gm-border-default); } /* LEDs - drop the glow shadows */ [data-mode="accessible"] .gm .gm-led-ok, [data-mode="accessible"] .gm .gm-led-warn, [data-mode="accessible"] .gm .gm-led-error { box-shadow: none; width: 14px; height: 14px; } /* Segment displays - drop the text-shadow glow */ [data-mode="accessible"] .gm .gm-segment-value { text-shadow: none; } /* Motion - already handled by motion.css's [data-mode="accessible"] hook, but reinforce here */ [data-mode="accessible"] .gm *, [data-mode="accessible"] .gm *::before, [data-mode="accessible"] .gm *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Particle canvas - already hidden by particles.css's [data-mode="accessible"] rule */