/** * Handfish Theme: High Contrast * * Accessibility-first theme pushed to extremes for maximum clarity. * True black/white neutrals (zero chroma), bold saturated accents, * thick borders, crisp shadows, and Atkinson Hyperlegible font. * Apply with: * * (dark high-contrast) * (light high-contrast) */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://fonts.noisefactor.io/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.woff2') format('woff2'); } [data-theme="high-contrast-dark"] { /* Neutrals — zero chroma, true black to white (maximum range) */ --hf-color-1: oklch(5% 0 0); --hf-color-2: oklch(12% 0 0); --hf-color-3: oklch(20% 0 0); --hf-color-4: oklch(30% 0 0); --hf-color-5: oklch(70% 0 0); --hf-color-6: oklch(88% 0 0); --hf-color-7: oklch(100% 0 0); /* Accents — bold saturated blue hue ~260°, high chroma */ --hf-accent-1: oklch(18% 0.050 260); --hf-accent-2: oklch(28% 0.080 260); --hf-accent-3: oklch(72% 0.180 260); --hf-accent-4: oklch(88% 0.120 260); /* Semantic colors — maximally saturated, bolder than defaults */ --hf-red: oklch(65% 0.280 15); --hf-green: oklch(80% 0.260 145); --hf-yellow: oklch(92% 0.180 89); --hf-blue: oklch(65% 0.200 260); /* Typography — Atkinson Hyperlegible for maximum readability */ --hf-font-family: 'Atkinson Hyperlegible'; /* Crisp shadows — small blur, high opacity (not diffused) */ --hf-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.50); --hf-shadow: 0 2px 4px oklch(0% 0 0 / 0.55); --hf-shadow-md: 0 3px 6px oklch(0% 0 0 / 0.60); --hf-shadow-lg: 0 4px 8px oklch(0% 0 0 / 0.65); --hf-shadow-xl: 0 6px 12px oklch(0% 0 0 / 0.70); --hf-glow-accent: 0 0 8px oklch(72% 0.180 260 / 0.40); /* Glass — near-opaque, minimal blur (clarity over style) */ --hf-surface-opacity: 97%; --hf-surface-transparency: 3%; --hf-panel-opacity: 95%; --hf-panel-transparency: 5%; --hf-header-opacity: 92%; --hf-header-transparency: 8%; --hf-glass-blur: blur(6px); --hf-glass-blur-sm: blur(3px); --hf-glass-blur-lg: blur(10px); --hf-backdrop: oklch(0% 0 0 / 0.80); /* Borders — maximum visibility, heavy accent mix */ --hf-border: color-mix(in srgb, var(--hf-accent-3) 50%, transparent 50%); --hf-border-hover: color-mix(in srgb, var(--hf-accent-3) 70%, transparent 30%); --hf-border-focus: var(--hf-accent-3); /* Link colors — bold blue for maximum visibility */ --hf-link-color: oklch(72% 0.180 260); --hf-link-hover: oklch(82% 0.160 260); /* Thick borders and bold focus rings for accessibility */ --hf-border-width: 2px; --hf-focus-ring-width: 2px; --hf-focus-ring-offset: 3px; } [data-theme="high-contrast-light"] { /* Neutrals — zero chroma, true white to black (maximum range) */ --hf-color-1: oklch(100% 0 0); --hf-color-2: oklch(95% 0 0); --hf-color-3: oklch(88% 0 0); --hf-color-4: oklch(75% 0 0); --hf-color-5: oklch(40% 0 0); --hf-color-6: oklch(18% 0 0); --hf-color-7: oklch(5% 0 0); /* Accents — bold blue hue ~260°, adjusted lightness for light bg */ --hf-accent-1: oklch(95% 0.050 260); --hf-accent-2: oklch(88% 0.080 260); --hf-accent-3: oklch(38% 0.180 260); --hf-accent-4: oklch(26% 0.140 260); /* Semantic colors — maximally saturated, adjusted for light bg contrast */ --hf-red: oklch(42% 0.240 18); --hf-green: oklch(42% 0.160 148); --hf-yellow: oklch(72% 0.190 85); --hf-blue: oklch(40% 0.200 260); /* Typography — Atkinson Hyperlegible for maximum readability */ --hf-font-family: 'Atkinson Hyperlegible'; /* Crisp shadows — small blur, high opacity (not diffused) */ --hf-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.20); --hf-shadow: 0 2px 4px oklch(0% 0 0 / 0.25); --hf-shadow-md: 0 3px 6px oklch(0% 0 0 / 0.30); --hf-shadow-lg: 0 4px 8px oklch(0% 0 0 / 0.35); --hf-shadow-xl: 0 6px 12px oklch(0% 0 0 / 0.40); --hf-glow-accent: 0 0 8px oklch(38% 0.180 260 / 0.25); /* Glass — near-opaque, minimal blur (clarity over style) */ --hf-surface-opacity: 97%; --hf-surface-transparency: 3%; --hf-panel-opacity: 95%; --hf-panel-transparency: 5%; --hf-header-opacity: 92%; --hf-header-transparency: 8%; --hf-glass-blur: blur(6px); --hf-glass-blur-sm: blur(3px); --hf-glass-blur-lg: blur(10px); --hf-backdrop: oklch(100% 0 0 / 0.70); /* Borders — maximum visibility, heavy accent mix */ --hf-border: color-mix(in srgb, var(--hf-accent-3) 50%, transparent 50%); --hf-border-hover: color-mix(in srgb, var(--hf-accent-3) 70%, transparent 30%); --hf-border-focus: var(--hf-accent-3); /* Link colors — bold blue adjusted for light bg */ --hf-link-color: oklch(38% 0.180 260); --hf-link-hover: oklch(28% 0.160 260); /* Thick borders and bold focus rings for accessibility */ --hf-border-width: 2px; --hf-focus-ring-width: 2px; --hf-focus-ring-offset: 3px; }