/* ─────────────────────────────────────────────────────────────── * High-contrast theme - activated by ``. * Redefines the color tokens to WCAG AAA contrast ratios. * All other tokens (spacing, radii, motion) remain unchanged. * ─────────────────────────────────────────────────────────────── */ html[data-contrast='high'] { /* Brand primary: darker, higher contrast against white */ --color-brand-primary-50: #f0f5ff; --color-brand-primary-100: #d6e4ff; --color-brand-primary-200: #adc6ff; --color-brand-primary-300: #85a5ff; --color-brand-primary-400: #597ef7; --color-brand-primary-500: #2f54eb; --color-brand-primary-600: #1d39c4; --color-brand-primary-700: #10239e; --color-brand-primary-800: #061178; --color-brand-primary-900: #030852; --color-brand-primary-950: #000028; /* Vendor accent: darker green */ --color-mode-vendor-600: #0f5132; --color-mode-vendor-700: #0a3622; --color-mode-vendor-800: #062617; --color-mode-vendor-900: #041a10; /* Neutrals → black & white */ --color-neutral-50: #ffffff; --color-neutral-100: #f5f5f5; --color-neutral-200: #cccccc; --color-neutral-300: #999999; --color-neutral-400: #666666; --color-neutral-500: #4d4d4d; --color-neutral-600: #333333; --color-neutral-700: #1a1a1a; --color-neutral-800: #0d0d0d; --color-neutral-900: #000000; --color-neutral-950: #000000; --color-text-primary: #000000; --color-text-secondary: #000000; --color-text-muted: #333333; --color-text-inverse: #ffffff; --color-border-default: #000000; --color-border-strong: #000000; --color-border-hairline: #000000; --color-border-hairline-strong: #000000; --color-border-hairline-inverse: #ffffff; --color-surface-app: #ffffff; --color-surface-base: #ffffff; --color-surface-page: #ffffff; --color-surface-raised: #ffffff; --color-surface-inset: #f5f5f5; --color-surface-sunken: #f5f5f5; /* Stronger shadows for separation */ --shadow-sm: 0 0 0 1px #000000; --shadow-md: 0 0 0 2px #000000; --shadow-lg: 0 0 0 2px #000000; --shadow-xl: 0 0 0 3px #000000; --shadow-elevation-1: 0 0 0 1px #000000; --shadow-elevation-2: 0 0 0 2px #000000; --shadow-elevation-3: 0 0 0 2px #000000; --shadow-elevation-4: 0 0 0 3px #000000; --shadow-urgent-pulse-start: 0 0 0 2px #000000; --shadow-urgent-pulse-end: 0 0 0 0 transparent; /* Glass tokens - fall back to solid surfaces in high-contrast mode */ --color-glass-bg-primary: var(--color-brand-primary-800); --color-glass-bg-primary-medium: var(--color-brand-primary-800); --color-glass-bg-light: var(--color-neutral-0); --color-glass-bg-medium: var(--color-neutral-0); --glass-blur-sm: blur(0px); --glass-blur-md: blur(0px); --glass-blur-lg: blur(0px); --shadow-glass: 0 0 0 2px #000000; --shadow-glass-primary: 0 0 0 2px #000000; --gradient-brand-accent: none; --gradient-action: none; --gradient-brand-surface: none; --gradient-neutral-soft: none; --gradient-map-thumbnail: none; --fx-panel-shadow-rest: 0 0 0 1px #000000; --fx-panel-shadow-hover: 0 0 0 2px #000000; --fx-panel-hairline: 0 0 0 1px #000000; --fx-panel-hairline-strong: 0 0 0 2px #000000; --fx-button-primary-bg: var(--color-brand-primary-800); --fx-button-primary-shadow: 0 0 0 2px #000000; --fx-button-primary-shadow-hover: 0 0 0 3px #000000; --fx-button-secondary-bg: #ffffff; --fx-button-secondary-shadow: 0 0 0 2px #000000; --fx-button-secondary-shadow-hover: 0 0 0 3px #000000; --fx-button-ghost-bg-hover: #f5f5f5; --fx-button-ghost-bg-active: #e5e5e5; --fx-button-danger-bg: #ffffff; --fx-button-danger-shadow: 0 0 0 2px #000000; --fx-card-bg: #ffffff; --fx-card-border: 0 0 0 2px #000000; --fx-card-shadow: 0 0 0 1px #000000; --fx-card-shadow-hover: 0 0 0 2px #000000; --fx-card-overlay: none; } html[data-contrast='high'] [data-ambient-deal-card]::before { opacity: 0; } html[data-contrast='high'] ::selection { background: #000000; color: #ffffff; } @media (hover: hover) and (pointer: fine) { html[data-contrast='high'] * { scrollbar-color: #000000 #ffffff; } html[data-contrast='high'] *::-webkit-scrollbar-track { background: #ffffff; } html[data-contrast='high'] *::-webkit-scrollbar-thumb { background-color: #000000; border-color: #ffffff; } }