/* oapf-modes.css — 30 UX mode token definitions * Source spec: public/uxDesignModes.txt (SVAAI / OAP Foundation) * * Applied via: data-theme="" on * Tokens consumed by: oapf-contrast.css, oapf-brand.css, component styles * * Token surface: * --mode-bg page background * --mode-surface card / panel surface * --mode-surface-alt secondary / hover surface * --mode-text primary body text * --mode-text-muted secondary / caption text * --mode-border border / divider * --mode-accent primary action color (brand turquoise where appropriate) * --mode-accent-deep hover / pressed accent * --mode-link hyperlink color * --mode-link-hover hyperlink hover * --mode-code-bg inline code background * --mode-code-text inline code foreground * --mode-input-bg form field background * --mode-input-text form field text * --mode-input-border form field border * --mode-shadow box-shadow rgba base * --mode-overlay modal backdrop * --mode-filter CSS filter on imagery (none | invert | sepia | ...) * --mode-font-scale relative font size multiplier (1 = default) * --mode-letter-spacing letter spacing override * --mode-line-height line height override */ /* ═══════════════════════════════════════════════════════════════════════════ * MODE 1 — Light (default) * ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { --mode-bg: #FFFFFF; --mode-surface: #F8FAFC; --mode-surface-alt: #F1F5F9; --mode-text: #0F172A; --mode-text-muted: #475569; --mode-border: #E2E8F0; --mode-accent: #3DB5B0; --mode-accent-deep: #2A7F7B; --mode-link: #0F766E; --mode-link-hover: #134E4A; --mode-code-bg: rgba(15,118,110,0.08); --mode-code-text: #0F766E; --mode-input-bg: #FFFFFF; --mode-input-text: #0F172A; --mode-input-border: #CBD5E1; --mode-shadow: rgba(15,23,42,0.08); --mode-overlay: rgba(15,23,42,0.55); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 2 — Dark * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --mode-bg: #0A0E1A; --mode-surface: #0F172A; --mode-surface-alt: #1E293B; --mode-text: #F1F5F9; --mode-text-muted: #94A3B8; --mode-border: #1E293B; --mode-accent: #3DB5B0; --mode-accent-deep: #5FD7D2; --mode-link: #5FD7D2; --mode-link-hover: #99F6E4; --mode-code-bg: rgba(95,215,210,0.12); --mode-code-text: #5FD7D2; --mode-input-bg: #1E293B; --mode-input-text: #F1F5F9; --mode-input-border: #334155; --mode-shadow: rgba(0,0,0,0.4); --mode-overlay: rgba(0,0,0,0.7); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 3 — Auto/Adaptive (mirrors OS preference; handled in JS) * CSS tokens match light; JS flips data-theme to "light" or "dark". * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="auto"] { /* Inherits :root tokens; JS resolves actual mode at runtime */ } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 4 — High Contrast (WCAG AAA 19:1) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="high-contrast"] { --mode-bg: #000000; --mode-surface: #0A0A0A; --mode-surface-alt: #141414; --mode-text: #FFFF00; --mode-text-muted: #FFEE00; --mode-border: #FFFF00; --mode-accent: #FFFF00; --mode-accent-deep: #FFD700; --mode-link: #00FFFF; --mode-link-hover: #AAFFFF; --mode-code-bg: rgba(255,255,0,0.12); --mode-code-text: #FFFF00; --mode-input-bg: #000000; --mode-input-text: #FFFF00; --mode-input-border: #FFFF00; --mode-shadow: rgba(255,255,0,0.2); --mode-overlay: rgba(0,0,0,0.85); --mode-filter: contrast(1.5); --mode-font-scale: 1; --mode-letter-spacing: 0.02em; --mode-line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 5 — Sepia (warm, 8:1, low blue light) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="sepia"] { --mode-bg: #F4ECD8; --mode-surface: #EDE3CA; --mode-surface-alt: #E6D9BA; --mode-text: #3B2800; --mode-text-muted: #6B4C2A; --mode-border: #D4C4A0; --mode-accent: #8B6340; --mode-accent-deep: #5C4033; --mode-link: #7A4F2A; --mode-link-hover: #5C3A1A; --mode-code-bg: rgba(92,64,51,0.1); --mode-code-text: #5C4033; --mode-input-bg: #F9F3E3; --mode-input-text: #3B2800; --mode-input-border: #C4B490; --mode-shadow: rgba(59,40,0,0.12); --mode-overlay: rgba(59,40,0,0.5); --mode-filter: sepia(0.3) warmth(1.1); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.75; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 6 — Grayscale (colorblind-safe) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="grayscale"] { --mode-bg: #F5F5F5; --mode-surface: #E8E8E8; --mode-surface-alt: #D9D9D9; --mode-text: #1A1A1A; --mode-text-muted: #555555; --mode-border: #CCCCCC; --mode-accent: #333333; --mode-accent-deep: #111111; --mode-link: #222222; --mode-link-hover: #000000; --mode-code-bg: rgba(0,0,0,0.06); --mode-code-text: #1A1A1A; --mode-input-bg: #FFFFFF; --mode-input-text: #1A1A1A; --mode-input-border: #999999; --mode-shadow: rgba(0,0,0,0.1); --mode-overlay: rgba(0,0,0,0.6); --mode-filter: grayscale(1); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 7 — Reading (ivory bg, 7:1, expanded line height) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="reading"] { --mode-bg: #FFFFF0; --mode-surface: #FAFAE0; --mode-surface-alt: #F5F5D5; --mode-text: #1A2533; --mode-text-muted: #4A5568; --mode-border: #D4D4AA; --mode-accent: #2A7F7B; --mode-accent-deep: #1A5F5C; --mode-link: #2A6A66; --mode-link-hover: #1A4F4C; --mode-code-bg: rgba(42,127,123,0.08); --mode-code-text: #2A7F7B; --mode-input-bg: #FFFFF5; --mode-input-text: #1A2533; --mode-input-border: #C4C490; --mode-shadow: rgba(26,37,51,0.08); --mode-overlay: rgba(26,37,51,0.5); --mode-filter: none; --mode-font-scale: 1.05; --mode-letter-spacing: 0.01em; --mode-line-height: 1.85; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 8 — Blue Light Filter (3000–4000K warm overlay) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="blue-light-filter"] { --mode-bg: #FFF9F0; --mode-surface: #FFF2E0; --mode-surface-alt: #FFEACC; --mode-text: #2D1F0A; --mode-text-muted: #7A5A3A; --mode-border: #E8D4B0; --mode-accent: #C07A30; --mode-accent-deep: #8B5A20; --mode-link: #A06020; --mode-link-hover: #704010; --mode-code-bg: rgba(192,122,48,0.1); --mode-code-text: #8B5A20; --mode-input-bg: #FFF9F0; --mode-input-text: #2D1F0A; --mode-input-border: #D4B880; --mode-shadow: rgba(45,31,10,0.1); --mode-overlay: rgba(45,31,10,0.55); --mode-filter: sepia(0.2) brightness(0.98); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.65; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 9 — Developer / Debug (terminal green-on-black) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="developer"] { --mode-bg: #0D0D0D; --mode-surface: #141414; --mode-surface-alt: #1A1A1A; --mode-text: #00FF00; --mode-text-muted: #33CC33; --mode-border: #1F4F1F; --mode-accent: #00FF41; --mode-accent-deep: #00CC33; --mode-link: #00FFAA; --mode-link-hover: #66FFCC; --mode-code-bg: rgba(0,255,0,0.08); --mode-code-text: #00FF41; --mode-input-bg: #0D0D0D; --mode-input-text: #00FF00; --mode-input-border: #004400; --mode-shadow: rgba(0,255,0,0.15); --mode-overlay: rgba(0,0,0,0.85); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: 0.03em; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 10 — Soft UI (gentle, 3.5:1, rounded aesthetic) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="soft-ui"] { --mode-bg: #F0F4F8; --mode-surface: #E8EDF3; --mode-surface-alt: #DFE5ED; --mode-text: #2D3748; --mode-text-muted: #718096; --mode-border: #CBD5E0; --mode-accent: #3DB5B0; --mode-accent-deep: #2A7F7B; --mode-link: #2A8BD0; --mode-link-hover: #1A6AAF; --mode-code-bg: rgba(61,181,176,0.08); --mode-code-text: #2A7F7B; --mode-input-bg: #EDF2F7; --mode-input-text: #2D3748; --mode-input-border: #BEC8D4; --mode-shadow: rgba(45,55,72,0.06); --mode-overlay: rgba(45,55,72,0.5); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 11 — Inverted / Negative (21:1, full inversion) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="inverted"] { --mode-bg: #000000; --mode-surface: #0A0A0A; --mode-surface-alt: #141414; --mode-text: #FFFFFF; --mode-text-muted: #CCCCCC; --mode-border: #333333; --mode-accent: #5FD7D2; --mode-accent-deep: #3DB5B0; --mode-link: #66DDDD; --mode-link-hover: #99EEEE; --mode-code-bg: rgba(255,255,255,0.08); --mode-code-text: #FFFFFF; --mode-input-bg: #0A0A0A; --mode-input-text: #FFFFFF; --mode-input-border: #444444; --mode-shadow: rgba(255,255,255,0.1); --mode-overlay: rgba(0,0,0,0.9); --mode-filter: invert(1) hue-rotate(180deg); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 12 — Custom Theme (user-defined; CSS vars set by JS at runtime) * Defaults to professional palette; overridden via OAPFTheme.setCustom({}) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="custom"] { /* Falls through to JS-injected inline custom properties on :root */ --mode-bg: var(--custom-bg, #F5F5F5); --mode-surface: var(--custom-surface, #EBEBEB); --mode-surface-alt: var(--custom-surface-alt, #E0E0E0); --mode-text: var(--custom-text, #1F1F1F); --mode-text-muted: var(--custom-text-muted, #555555); --mode-border: var(--custom-border, #CCCCCC); --mode-accent: var(--custom-accent, #3DB5B0); --mode-accent-deep: var(--custom-accent-deep, #2A7F7B); --mode-link: var(--custom-link, #0F766E); --mode-link-hover: var(--custom-link-hover, #134E4A); --mode-code-bg: rgba(0,0,0,0.06); --mode-code-text: var(--custom-text, #1F1F1F); --mode-input-bg: var(--custom-bg, #F5F5F5); --mode-input-text: var(--custom-text, #1F1F1F); --mode-input-border: var(--custom-border, #CCCCCC); --mode-shadow: rgba(0,0,0,0.08); --mode-overlay: rgba(0,0,0,0.55); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 13 — Dyslexia-Friendly (7:1, expanded spacing, optimized font) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dyslexia-friendly"] { --mode-bg: #FFFAF0; --mode-surface: #FFF5E0; --mode-surface-alt: #FFEFC8; --mode-text: #1A1A00; --mode-text-muted: #5A5A30; --mode-border: #D4CCB0; --mode-accent: #2A7F7B; --mode-accent-deep: #1A5F5C; --mode-link: #1A6666; --mode-link-hover: #0A4444; --mode-code-bg: rgba(26,102,102,0.1); --mode-code-text: #1A6666; --mode-input-bg: #FFFFF5; --mode-input-text: #1A1A00; --mode-input-border: #C0B898; --mode-shadow: rgba(26,26,0,0.08); --mode-overlay: rgba(26,26,0,0.5); --mode-filter: none; --mode-font-scale: 1.1; --mode-letter-spacing: 0.05em; --mode-line-height: 2; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 14 — Night Light (2700K, very low luminance, 5:1) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="night-light"] { --mode-bg: #1A1208; --mode-surface: #221810; --mode-surface-alt: #2D2015; --mode-text: #FFE4B5; --mode-text-muted: #D4B890; --mode-border: #3D2C18; --mode-accent: #CC9944; --mode-accent-deep: #AA7722; --mode-link: #DDA844; --mode-link-hover: #FFCC66; --mode-code-bg: rgba(204,153,68,0.12); --mode-code-text: #FFCC88; --mode-input-bg: #1A1208; --mode-input-text: #FFE4B5; --mode-input-border: #4A3820; --mode-shadow: rgba(0,0,0,0.5); --mode-overlay: rgba(0,0,0,0.8); --mode-filter: brightness(0.85) sepia(0.4); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.65; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 15 — Protanopia (Red-Blind) blue-yellow optimized, 7:1 * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="protanopia"] { --mode-bg: #FFFFFF; --mode-surface: #F0F5FF; --mode-surface-alt: #E0EAFF; --mode-text: #001A4D; --mode-text-muted: #3355AA; --mode-border: #99AADD; --mode-accent: #0044CC; --mode-accent-deep: #003399; --mode-link: #0055DD; --mode-link-hover: #0033AA; --mode-code-bg: rgba(0,68,204,0.08); --mode-code-text: #0044CC; --mode-input-bg: #FFFFFF; --mode-input-text: #001A4D; --mode-input-border: #8899CC; --mode-shadow: rgba(0,26,77,0.1); --mode-overlay: rgba(0,26,77,0.55); --mode-filter: url('#protanopia-filter'); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 16 — Deuteranopia (Green-Blind) blue-red optimized, 7:1 * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="deuteranopia"] { --mode-bg: #FFFFFF; --mode-surface: #FFF5F0; --mode-surface-alt: #FFEAE0; --mode-text: #4D0000; --mode-text-muted: #993300; --mode-border: #DD9977; --mode-accent: #CC4400; --mode-accent-deep: #993300; --mode-link: #BB3300; --mode-link-hover: #882200; --mode-code-bg: rgba(204,68,0,0.08); --mode-code-text: #CC4400; --mode-input-bg: #FFFFFF; --mode-input-text: #4D0000; --mode-input-border: #CC8866; --mode-shadow: rgba(77,0,0,0.1); --mode-overlay: rgba(77,0,0,0.55); --mode-filter: url('#deuteranopia-filter'); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 17 — Tritanopia (Blue-Yellow-Blind) red-green optimized, 7:1 * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="tritanopia"] { --mode-bg: #FFFFFF; --mode-surface: #FFF0F5; --mode-surface-alt: #FFE0EC; --mode-text: #3D0022; --mode-text-muted: #880044; --mode-border: #DD88AA; --mode-accent: #BB0055; --mode-accent-deep: #880033; --mode-link: #CC0066; --mode-link-hover: #990044; --mode-code-bg: rgba(187,0,85,0.08); --mode-code-text: #BB0055; --mode-input-bg: #FFFFFF; --mode-input-text: #3D0022; --mode-input-border: #CC77AA; --mode-shadow: rgba(61,0,34,0.1); --mode-overlay: rgba(61,0,34,0.55); --mode-filter: url('#tritanopia-filter'); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 18 — Low Vision (WCAG AAA 21:1, 200%+ scale) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="low-vision"] { --mode-bg: #000000; --mode-surface: #0A0A0A; --mode-surface-alt: #141414; --mode-text: #FFFFFF; --mode-text-muted: #E0E0E0; --mode-border: #FFFFFF; --mode-accent: #FFFFFF; --mode-accent-deep: #DDDDDD; --mode-link: #AAFFFF; --mode-link-hover: #FFFFFF; --mode-code-bg: rgba(255,255,255,0.1); --mode-code-text: #FFFFFF; --mode-input-bg: #000000; --mode-input-text: #FFFFFF; --mode-input-border: #FFFFFF; --mode-shadow: rgba(255,255,255,0.15); --mode-overlay: rgba(0,0,0,0.9); --mode-filter: none; --mode-font-scale: 1.4; --mode-letter-spacing: 0.04em; --mode-line-height: 2; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 19 — Focus (content-only, minimal UI, 12:1) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="focus"] { --mode-bg: #F2F2F2; --mode-surface: #E8E8E8; --mode-surface-alt: #DCDCDC; --mode-text: #111111; --mode-text-muted: #444444; --mode-border: #C0C0C0; --mode-accent: #1A1A1A; --mode-accent-deep: #000000; --mode-link: #0A0A0A; --mode-link-hover: #333333; --mode-code-bg: rgba(0,0,0,0.05); --mode-code-text: #111111; --mode-input-bg: #FFFFFF; --mode-input-text: #111111; --mode-input-border: #AAAAAA; --mode-shadow: rgba(0,0,0,0.06); --mode-overlay: rgba(0,0,0,0.6); --mode-filter: saturate(0.6); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.8; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 20 — Ambient / Contextual (sensor-driven; JS updates tokens live) * Defaults to light; JS overrides --mode-* based on ambient light sensor. * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="ambient"] { /* same as light defaults; JS morphs tokens via inline style on :root */ --mode-bg: #FFFFFF; --mode-surface: #F8FAFC; --mode-surface-alt: #F1F5F9; --mode-text: #0F172A; --mode-text-muted: #475569; --mode-border: #E2E8F0; --mode-accent: #3DB5B0; --mode-accent-deep: #2A7F7B; --mode-link: #0F766E; --mode-link-hover: #134E4A; --mode-code-bg: rgba(15,118,110,0.08); --mode-code-text: #0F766E; --mode-input-bg: #FFFFFF; --mode-input-text: #0F172A; --mode-input-border: #CBD5E1; --mode-shadow: rgba(15,23,42,0.08); --mode-overlay: rgba(15,23,42,0.55); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 21 — Warm (4000–5000K, evening comfort) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="warm"] { --mode-bg: #FFF8E7; --mode-surface: #FFF0CC; --mode-surface-alt: #FFE8B3; --mode-text: #3A1A00; --mode-text-muted: #7A4A1A; --mode-border: #E0C890; --mode-accent: #B86A00; --mode-accent-deep: #8B4A00; --mode-link: #A05800; --mode-link-hover: #703800; --mode-code-bg: rgba(184,106,0,0.1); --mode-code-text: #8B4A00; --mode-input-bg: #FFFAF0; --mode-input-text: #3A1A00; --mode-input-border: #D4B070; --mode-shadow: rgba(58,26,0,0.1); --mode-overlay: rgba(58,26,0,0.5); --mode-filter: sepia(0.15) brightness(0.99); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.65; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 22 — Cool (6500–7000K, crisp daytime) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="cool"] { --mode-bg: #EEF6FB; --mode-surface: #E0EEF7; --mode-surface-alt: #D0E6F3; --mode-text: #001A33; --mode-text-muted: #224466; --mode-border: #99C4DD; --mode-accent: #0077AA; --mode-accent-deep: #005588; --mode-link: #006699; --mode-link-hover: #004477; --mode-code-bg: rgba(0,119,170,0.08); --mode-code-text: #005588; --mode-input-bg: #F0F8FF; --mode-input-text: #001A33; --mode-input-border: #88AACC; --mode-shadow: rgba(0,26,51,0.1); --mode-overlay: rgba(0,26,51,0.55); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 23 — Monochrome (pure B&W, 21:1) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="monochrome"] { --mode-bg: #FFFFFF; --mode-surface: #F0F0F0; --mode-surface-alt: #E0E0E0; --mode-text: #000000; --mode-text-muted: #333333; --mode-border: #999999; --mode-accent: #000000; --mode-accent-deep: #000000; --mode-link: #000000; --mode-link-hover: #333333; --mode-code-bg: #F0F0F0; --mode-code-text: #000000; --mode-input-bg: #FFFFFF; --mode-input-text: #000000; --mode-input-border: #666666; --mode-shadow: rgba(0,0,0,0.15); --mode-overlay: rgba(0,0,0,0.65); --mode-filter: grayscale(1) contrast(1.2); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 24 — Accessibility Boost (combined: AAA + 150% scale + high contrast) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="accessibility-boost"] { --mode-bg: #000000; --mode-surface: #0A0A0A; --mode-surface-alt: #141414; --mode-text: #FFFF00; --mode-text-muted: #FFEE44; --mode-border: #FFFF00; --mode-accent: #FFFF00; --mode-accent-deep: #FFD700; --mode-link: #00FFFF; --mode-link-hover: #AAFFFF; --mode-code-bg: rgba(255,255,0,0.15); --mode-code-text: #FFFF00; --mode-input-bg: #000000; --mode-input-text: #FFFF00; --mode-input-border: #FFFF00; --mode-shadow: rgba(255,255,0,0.25); --mode-overlay: rgba(0,0,0,0.9); --mode-filter: contrast(1.5) brightness(1.05); --mode-font-scale: 1.25; --mode-letter-spacing: 0.05em; --mode-line-height: 2; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 25 — Presentation (large-screen, audience viewing, 15:1) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="presentation"] { --mode-bg: #1E1E2E; --mode-surface: #2D2D42; --mode-surface-alt: #3A3A55; --mode-text: #FFFFFF; --mode-text-muted: #BBBBDD; --mode-border: #4A4A6A; --mode-accent: #3DB5B0; --mode-accent-deep: #5FD7D2; --mode-link: #7EC8E3; --mode-link-hover: #AAE0F5; --mode-code-bg: rgba(61,181,176,0.15); --mode-code-text: #5FD7D2; --mode-input-bg: #2D2D42; --mode-input-text: #FFFFFF; --mode-input-border: #5A5A7A; --mode-shadow: rgba(0,0,0,0.5); --mode-overlay: rgba(0,0,0,0.8); --mode-filter: none; --mode-font-scale: 1.15; --mode-letter-spacing: 0.01em; --mode-line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 26 — Meditation / Zen (nature greens, calming, minimal animation) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="meditation"] { --mode-bg: #1A2E0F; --mode-surface: #223A14; --mode-surface-alt: #2D4A1A; --mode-text: #D4EAC8; --mode-text-muted: #9DC88A; --mode-border: #3A5A28; --mode-accent: #7AC45A; --mode-accent-deep: #5CA040; --mode-link: #88D46A; --mode-link-hover: #AAEAA0; --mode-code-bg: rgba(122,196,90,0.12); --mode-code-text: #88D46A; --mode-input-bg: #1A2E0F; --mode-input-text: #D4EAC8; --mode-input-border: #4A6A33; --mode-shadow: rgba(0,0,0,0.4); --mode-overlay: rgba(0,0,0,0.75); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: 0.02em; --mode-line-height: 1.9; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 27 — High Energy (vibrant, 18:1, gaming / engagement) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="high-energy"] { --mode-bg: #0A0014; --mode-surface: #120020; --mode-surface-alt: #1A002E; --mode-text: #FF00FF; --mode-text-muted: #DD44DD; --mode-border: #660066; --mode-accent: #FF0080; --mode-accent-deep: #CC0060; --mode-link: #FF44FF; --mode-link-hover: #FF99FF; --mode-code-bg: rgba(255,0,128,0.1); --mode-code-text: #FF44FF; --mode-input-bg: #0A0014; --mode-input-text: #FF00FF; --mode-input-border: #880088; --mode-shadow: rgba(255,0,128,0.3); --mode-overlay: rgba(0,0,0,0.85); --mode-filter: saturate(1.5) brightness(1.1); --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.55; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 28 — Professional / Business (neutral, 10:1, corporate) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="professional"] { --mode-bg: #F5F5F5; --mode-surface: #EEEEEE; --mode-surface-alt: #E5E5E5; --mode-text: #1A1A1A; --mode-text-muted: #555555; --mode-border: #CCCCCC; --mode-accent: #1A5276; --mode-accent-deep: #0F3A52; --mode-link: #1A4E78; --mode-link-hover: #0F3358; --mode-code-bg: rgba(26,82,118,0.08); --mode-code-text: #1A4E78; --mode-input-bg: #FFFFFF; --mode-input-text: #1A1A1A; --mode-input-border: #BBBBBB; --mode-shadow: rgba(0,0,0,0.08); --mode-overlay: rgba(26,26,26,0.55); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 29 — Gaming (deep navy + matrix green, 15:1, 120Hz feel) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="gaming"] { --mode-bg: #060A1F; --mode-surface: #0D1333; --mode-surface-alt: #141A3D; --mode-text: #00FF41; --mode-text-muted: #33CC55; --mode-border: #0A3A1A; --mode-accent: #00FF41; --mode-accent-deep: #00CC33; --mode-link: #44FFAA; --mode-link-hover: #88FFCC; --mode-code-bg: rgba(0,255,65,0.08); --mode-code-text: #00FF41; --mode-input-bg: #060A1F; --mode-input-text: #00FF41; --mode-input-border: #005522; --mode-shadow: rgba(0,255,65,0.2); --mode-overlay: rgba(0,0,0,0.9); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: 0.02em; --mode-line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════════ * MODE 30 — Hybrid / Mixed (balanced blend, user-selected composite) * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="hybrid"] { --mode-bg: #E8E8E8; --mode-surface: #DEDEDE; --mode-surface-alt: #D2D2D2; --mode-text: #222222; --mode-text-muted: #666666; --mode-border: #BBBBBB; --mode-accent: #3DB5B0; --mode-accent-deep: #2A7F7B; --mode-link: #2A7F7B; --mode-link-hover: #1A5F5C; --mode-code-bg: rgba(61,181,176,0.08); --mode-code-text: #2A7F7B; --mode-input-bg: #F0F0F0; --mode-input-text: #222222; --mode-input-border: #AAAAAA; --mode-shadow: rgba(0,0,0,0.07); --mode-overlay: rgba(34,34,34,0.55); --mode-filter: none; --mode-font-scale: 1; --mode-letter-spacing: normal; --mode-line-height: 1.65; } /* ═══════════════════════════════════════════════════════════════════════════ * UTILITY — Apply mode tokens to base elements * These rules bridge mode tokens → actual DOM properties so any element * picking up `inherit` gets the right value for the current mode. * ═══════════════════════════════════════════════════════════════════════════ */ html { background-color: var(--mode-bg); color: var(--mode-text); font-size: calc(1rem * var(--mode-font-scale, 1)); } body { background-color: var(--mode-bg); color: var(--mode-text); letter-spacing: var(--mode-letter-spacing, normal); line-height: var(--mode-line-height, 1.6); } /* Surface cards */ .oapf-card, .benefit, .payoff-card, .partner-card, .fund-block, .step, .dev-card, .pitch-block, .std-hub-card, .gov-hub-card, .join-card { background: var(--mode-surface) !important; color: var(--mode-text) !important; border-color: var(--mode-border) !important; } /* Form inputs */ input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select { background: var(--mode-input-bg); color: var(--mode-input-text); border-color: var(--mode-input-border); } /* Accessibility: dyslexia-friendly font stack */ [data-theme="dyslexia-friendly"] body, [data-theme="dyslexia-friendly"] p, [data-theme="dyslexia-friendly"] li, [data-theme="dyslexia-friendly"] article { font-family: "OpenDyslexic", "Verdana", "Arial", sans-serif; word-spacing: 0.16em; } /* Reduce motion for focus/meditation/reading modes */ [data-theme="focus"] *, [data-theme="meditation"] *, [data-theme="reading"] * { animation-duration: 0.01ms !important; transition-duration: 0.1s !important; } /* SVG filter definitions for colorblind modes (injected once by theme JS) */ .oapf-cvd-filters { position: absolute; width: 0; height: 0; overflow: hidden; }