/* ======================================== DESIGN TOKENS (L0) Tokens only — no layout or component selectors. ======================================== */ :root { /* Dependency map (tokens only): - base.css (L1) consumes typography + layout tokens - layout-system.css (L2) consumes spacing + breakpoint tokens - header-navigation.css (L2) consumes header/nav tokens - responsive-optimizations.css (L2) overrides layout tokens per breakpoint - antigravity-design.css (L4) consumes ambient + layer tokens - smart-visibility.css (L6) consumes contrast + icon tokens */ /* ======================================== 2025 DESIGN SYSTEM: "Clean & Accessible" Aesthetic: Minimal, high-contrast, solid-first surfaces Version: 7.7.0 - ULTRA-TRANSPARENT Light Mode with Warm+Cool Colorful Accents WCAG 2.1 AA Compliant Color Contrast ARCHITECTURE: - All colors defined as CSS variables - RGB values for opacity support - Semantic tokens reference primitives - NO hardcoded hex/rgba in component CSS - Default to SOLID light mode (no transparency issues) CHANGELOG v7.7.0: - Light mode: Maximum glass transparency (0.38 from 0.48) - Light mode: Warm+cool orb palette (pink, orange, teal, purple) - Light mode: 5th orb added for more color variety - Light mode: Cards at 55% opacity for vivid backdrop ======================================== */ /* Typography - SF Pro-like Stack */ --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-heading: var(--font-sans); --font-serif: 'New York', 'Georgia', serif; --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace; /* ======================================== COLOR PRIMITIVES (RGB values for opacity) These are the raw colors - use semantic tokens below ======================================== */ /* Primary (Accent) RGB Architecture note: - Component CSS should ONLY use the semantic tokens (`--color-primary-*`). - Visitor accent picking (JS) overrides the `*-light` / `*-dark` variants, while `--color-primary-rgb` is selected by theme mode (light/dark/system). */ /* Default: Monochrome accent (requested) - Light mode: near-black - Dark mode: white */ --color-primary-rgb-light: 17, 17, 17; --color-primary-hover-rgb-light: 0, 0, 0; --color-primary-light-rgb-light: 64, 64, 64; /* Dark-mode-friendly variant (keeps accent visible on near-black backgrounds) NOTE (interaction system): - In dark mode, hover states should generally get LIGHTER (not darker). Darkening an already-dark UI reads as a "hard" interaction and feels harsh. - Therefore `--color-primary-hover-rgb-dark` is intentionally a *brighter* variant. This keeps CTAs elegant in dark mode while preserving contrast. */ --color-primary-rgb-dark: 255, 255, 255; /* Softer hover (slightly dimmer) for dark mode CTAs/nav hovers */ --color-primary-hover-rgb-dark: 235, 235, 235; --color-primary-light-rgb-dark: 255, 255, 255; /* Active primary RGB (selected by current theme mode) */ --color-primary-rgb: var(--color-primary-rgb-light); --color-primary-hover-rgb: var(--color-primary-hover-rgb-light); --color-primary-light-rgb: var(--color-primary-light-rgb-light); /* Primary surface RGB (raw accent for backgrounds) */ --color-primary-surface-rgb-light: var(--color-primary-rgb-light); --color-primary-surface-hover-rgb-light: var(--color-primary-hover-rgb-light); --color-primary-surface-light-rgb-light: var(--color-primary-light-rgb-light); --color-primary-surface-rgb-dark: var(--color-primary-rgb-dark); --color-primary-surface-hover-rgb-dark: var(--color-primary-hover-rgb-dark); --color-primary-surface-light-rgb-dark: var(--color-primary-light-rgb-dark); /* Active primary surface RGB (selected by current theme mode) */ --color-primary-surface-rgb: var(--color-primary-surface-rgb-light); --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-light); --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-light); /* Neutral RGB */ --color-black-rgb: 26, 26, 26; --color-white-rgb: 255, 255, 255; --color-gray-rgb: 102, 102, 102; /* Status RGB */ --color-success-rgb: 29, 122, 62; --color-warning-rgb: 184, 104, 0; --color-error-rgb: 196, 30, 58; /* ======================================== SEMANTIC COLOR TOKENS Use these in component CSS ======================================== */ /* Primary: Deep Blue (AAA compliant on white) */ --color-primary: rgb(var(--color-primary-rgb)); --color-primary-hover: rgb(var(--color-primary-hover-rgb)); --color-primary-light: rgb(var(--color-primary-light-rgb)); --color-primary-subtle: rgba(var(--color-primary-rgb), 0.08); /* Primary surface: raw accent for filled backgrounds */ --color-primary-surface: rgb(var(--color-primary-surface-rgb)); --color-primary-surface-hover: rgb(var(--color-primary-surface-hover-rgb)); --color-primary-surface-light: rgb(var(--color-primary-surface-light-rgb)); /* Opacity variants for primary */ --color-primary-10: rgba(var(--color-primary-rgb), 0.1); --color-primary-15: rgba(var(--color-primary-rgb), 0.15); --color-primary-20: rgba(var(--color-primary-rgb), 0.2); --color-primary-25: rgba(var(--color-primary-rgb), 0.25); --color-primary-35: rgba(var(--color-primary-rgb), 0.35); --color-primary-45: rgba(var(--color-primary-rgb), 0.45); /* Secondary: Charcoal Gray (headlines) */ --color-accent: rgb(var(--color-black-rgb)); --color-accent-light: rgb(var(--color-gray-rgb)); --color-accent-subtle: rgba(var(--color-black-rgb), 0.03); /* Tertiary: Forest Green (success/positive) */ --color-tertiary: rgb(var(--color-success-rgb)); --color-tertiary-light: rgba(var(--color-success-rgb), 0.8); --color-tertiary-10: rgba(var(--color-success-rgb), 0.1); /* System Status Colors - High Contrast */ --color-success: rgb(var(--color-success-rgb)); --color-success-10: rgba(var(--color-success-rgb), 0.1); --color-warning: rgb(var(--color-warning-rgb)); --color-warning-10: rgba(var(--color-warning-rgb), 0.1); --color-error: rgb(var(--color-error-rgb)); --color-error-10: rgba(var(--color-error-rgb), 0.1); --color-info: var(--color-primary); /* Neutrals - Maximum Readability - WCAG AAA Compliant Background uses a subtle off-white so cards/surfaces feel elevated (premium density). */ --color-bg: rgb(249, 250, 251); --color-surface: rgb(var(--color-white-rgb)); --color-surface-alt: rgba(var(--color-black-rgb), 0.035); --color-surface-elevated: rgb(var(--color-white-rgb)); /* Text hierarchy - WCAG AAA contrast (7:1+ on white) */ --color-text: #0a0a0a; --color-text-secondary: #2a2a2a; --color-text-muted: #525252; --color-text-subtle: #6b6b6b; /* Text on primary/accent surfaces (JS may override per accent + mode) */ --color-text-inverse-light: rgb(var(--color-white-rgb)); --color-text-inverse-dark: rgb(var(--color-black-rgb)); --color-text-inverse: var(--color-text-inverse-light); --color-border: rgba(var(--color-black-rgb), 0.12); --color-border-strong: rgba(var(--color-black-rgb), 0.24); --color-border-subtle: rgba(var(--color-black-rgb), 0.06); /* Theme-Aware Text Colors - For dynamic header/nav theming - Darker for light mode */ --color-text-heading: #0a0a0a; --color-text-nav: #1a1a1a; /* Overlay/backdrop colors - UPDATED v7.2.0: Increased transparency for light mode */ --color-overlay: rgba(var(--color-black-rgb), 0.5); --color-overlay-light: rgba(var(--color-black-rgb), 0.2); --color-backdrop: rgba(var(--color-white-rgb), 0.75); --color-backdrop-strong: rgba(var(--color-white-rgb), 0.85); /* 🌙 Dark Mode Variables - High Contrast */ --color-bg-dark: #0d0d0d; --color-surface-dark: rgb(var(--color-black-rgb)); --color-surface-alt-dark: rgba(var(--color-white-rgb), 0.05); --color-surface-elevated-dark: rgba(var(--color-white-rgb), 0.08); --color-text-dark: rgba(var(--color-white-rgb), 0.95); --color-text-secondary-dark: rgba(var(--color-white-rgb), 0.8); --color-text-muted-dark: rgba(var(--color-white-rgb), 0.6); --color-border-dark: rgba(var(--color-white-rgb), 0.15); /* ✨ SHADOWS - Using CSS variables for theming */ --shadow-xs: 0 1px 2px rgba(var(--color-black-rgb), 0.04); --shadow-sm: 0 1px 3px rgba(var(--color-black-rgb), 0.06), 0 1px 2px rgba(var(--color-black-rgb), 0.04); --shadow-md: 0 4px 6px rgba(var(--color-black-rgb), 0.06), 0 2px 4px rgba(var(--color-black-rgb), 0.04); --shadow-lg: 0 10px 15px rgba(var(--color-black-rgb), 0.08), 0 4px 6px rgba(var(--color-black-rgb), 0.04); --shadow-xl: 0 20px 25px rgba(var(--color-black-rgb), 0.1), 0 8px 10px rgba(var(--color-black-rgb), 0.04); --shadow-2xl: 0 25px 50px rgba(var(--color-black-rgb), 0.15); /* Focus Ring - Accessibility */ --shadow-focus: 0 0 0 3px var(--color-primary-35); /* Card Shadows - Clean elevation with enhanced depth */ --shadow-card: 0 1px 3px rgba(var(--color-black-rgb), 0.05), 0 4px 12px rgba(var(--color-black-rgb), 0.05), 0 0 1px rgba(var(--color-black-rgb), 0.1); --shadow-card-hover: 0 4px 12px rgba(var(--color-black-rgb), 0.1), 0 8px 24px rgba(var(--color-black-rgb), 0.08), 0 0 1px rgba(var(--color-black-rgb), 0.15); /* Primary glow shadows */ --shadow-primary-sm: 0 2px 12px var(--color-primary-25); --shadow-primary-md: 0 4px 16px var(--color-primary-35); --shadow-primary-lg: 0 8px 32px var(--color-primary-45); --shadow-primary-glow: 0 0 16px var(--color-primary-15); --shadow-primary-glow-strong: 0 0 32px var(--color-primary-25); /* ======================================== GRADIENT GUIDANCE (DOCUMENTED USE) Guidance: - Solid colors remain the default to avoid regressions. - Gradients are allowed only when documented and contrast-safe. - Use gradient tokens to introduce gradients in module scope when required. - Always provide a solid-color fallback for legacy browsers. ======================================== */ /* Legacy gradient tokens (kept for backwards compatibility) */ --gradient-brand: var(--color-primary); --gradient-brand-light: var(--color-primary-light); --gradient-accent-subtle: var(--color-primary-10); --gradient-text-brand: var(--color-primary); /* Default gradient tokens remain solid for safety; modules may override as needed. */ --gradient-primary: var(--color-primary); --gradient-accent: var(--color-accent); --gradient-surface: var(--color-surface-alt); --gradient-text: var(--color-text); /* Used as an accent strip/border in multiple modules (kept solid by policy) */ --gradient-aurora: var(--color-primary); --gradient-mesh: transparent; --gradient-hero: transparent; /* Glassmorphism - Using variables */ --glass-bg: var(--color-backdrop); --glass-bg-strong: var(--color-backdrop-strong); --glass-border: var(--color-border); --glass-blur: blur(12px); --glass-blur-strong: blur(16px); /* 📐 SPACING & LAYOUT */ --max-width-container: 1600px; --max-width-wide: 1760px; --max-width-full: 100%; --max-width-prose: 820px; /* Layout system (single source of truth) */ --layout-gutter: var(--space-6); --layout-gutter-compact: var(--space-4); --layout-gutter-comfy: var(--space-8); --layout-section-gap: var(--space-16); --layout-section-gap-md: var(--space-12); --layout-section-gap-sm: var(--space-10); --layout-section-gap-xs: var(--space-8); /* Container system (single source of truth) */ --container-max-width: var(--max-width-container); --container-padding-x: var(--layout-gutter); /* Fixed header offset (runtime-updated by JS for true header height) */ /* Default must be >= the header's min-height (see header-navigation.css / .site-header__inner). If this is smaller, `.site-main { padding-top: var(--header-height) }` under-offsets and content can appear overlapped by the fixed navbar on first paint. */ --header-height: 80px; /* ======================================== AMBIENT CANVAS TOKENS (L0) Site-wide decorative WebGL layer controls. Scoped by .aiwp-ambient in antigravity-design.css. OPACITY GUIDE: - 0.90 base: High visibility, motion clearly noticeable - 0.92 light mode: Maintains contrast on light surfaces - 0.96 dark mode: Strong presence on dark surfaces ======================================== */ --aiwp-ambient-canvas-opacity: 0.90; --aiwp-ambient-canvas-opacity-light: 0.92; --aiwp-ambient-canvas-opacity-dark: 0.96; --aiwp-ambient-canvas-blend: normal; --aiwp-ambient-canvas-z: var(--layer-canvas, 0); /* ======================================== LAYERING SYSTEM (L0) Shared z-index scale for overlays + canvas. ======================================== */ --layer-base: 0; --layer-canvas: 0; --layer-content: 1; --layer-header: 1000; --layer-overlay: 10000; --layer-modal: 10001; --layer-tooltip: 11000; --layer-debug: 12000; /* Aliases (requested naming): prefer these in new/refactored code. Keep --layer-* as the canonical scale; --z-* are readability shims. */ --z-base: var(--layer-base); --z-content: var(--layer-content); --z-header: var(--layer-header); --z-overlay: var(--layer-overlay); --z-modal: var(--layer-modal); --z-tooltip: var(--layer-tooltip); --z-debug: var(--layer-debug); /* Header/search overlay stack (fine-grained ordering). These avoid magic numbers like 10002 sprinkled across modules. */ --z-header-dropdown: 1005; --z-skip-link: 9999; --z-header-search-backdrop: 9998; --z-header-search-overlay: 10002; /* Preloader must always be on top of everything. */ --z-preloader: 999999; /* ======================================== HEADER + NAVIGATION TOKENS (L0) Component-owned spacing + visibility primitives. Header/navigation modules must consume these tokens. ======================================== */ --header-padding-y: clamp(16px, 2vh, 20px); --header-padding-x: clamp(24px, 3vw, 48px); --header-padding-y-mobile: var(--space-3); --header-padding-x-mobile: var(--space-4); --header-padding-y-mobile-tight: 4px; --header-padding-x-mobile-tight: var(--space-2); --header-padding-x-mobile-narrow: 6px; --nav-pill-gap: clamp(2px, 0.5vw, 8px); --nav-pill-padding-y: clamp(4px, 0.5vh, 8px); --nav-pill-padding-x: clamp(8px, 1vw, 16px); --nav-pill-radius: var(--radius-full); --nav-pill-bg: var(--color-surface-alt); --nav-pill-border: var(--color-border); --nav-link-padding-y: clamp(6px, 0.9vh, 10px); --nav-link-padding-x: clamp(12px, 1.6vw, 18px); --nav-link-font-size: 0.95rem; --nav-link-font-weight: 500; --nav-link-radius: var(--radius-full); --nav-link-color: var(--sv-text-on-surface, var(--color-text-nav, var(--color-text))); --nav-link-hover-bg: rgba(var(--color-primary-rgb), 0.06); --nav-link-hover-text: var(--color-primary); --nav-link-focus-ring: 0 0 0 3px var(--color-primary-20); --nav-link-active-text: var(--color-primary); --nav-link-underline-color: var(--color-primary); --nav-link-underline-offset: -4px; --nav-panel-padding-y: var(--space-5); --nav-panel-padding-x: var(--space-4); --nav-link-padding-y-mobile: var(--space-4); --nav-link-padding-x-mobile: var(--space-5); --nav-link-radius-mobile: 16px; --nav-link-font-size-mobile: 1.05rem; /* Spacing Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* Missing intermediate steps (some modules rely on these) */ --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-24: 96px; /* 🔵 BORDER RADIUS */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; --radius-pill: 9999px; /* ⚡ TRANSITIONS - Optimized for 60fps rendering */ --transition-fast: 120ms cubic-bezier(0.2, 0, 0.38, 0.9); --transition-base: 200ms cubic-bezier(0.2, 0, 0.38, 0.9); --transition-slow: 300ms cubic-bezier(0.2, 0, 0.38, 0.9); --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); --transition-expo: 350ms cubic-bezier(0.19, 1, 0.22, 1); --transition-quint: 300ms cubic-bezier(0.22, 1, 0.36, 1); /* Timing tokens (duration-only) for consistent motion tuning. Use these when you need to compose your own timing functions. */ --timing-fast: 120ms; --timing-base: 200ms; --timing-overlay: 300ms; --timing-spring: 400ms; /* Font Sizes - Responsive Scale */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --font-size-3xl: 2.5rem; --font-size-4xl: 3rem; /* Line Heights */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; /* Touch Targets - Accessibility (WCAG 2.1 AAA) */ --touch-target-min: 44px; --touch-target-comfortable: 48px; --touch-target-large: 56px; /* Interactive States - Consistent feedback */ --interactive-scale-press: 0.97; --interactive-scale-hover: 1.02; --interactive-lift-sm: -2px; --interactive-lift-md: -4px; --interactive-lift-lg: -8px; /* Buttons — System Tokens */ --button-gap: var(--space-2); --button-padding-y: var(--space-4); --button-padding-x: var(--space-6); --button-lg-padding-y: var(--space-4); --button-lg-padding-x: var(--space-8); --button-font-weight: 600; --button-line-height: 1.1; --button-radius: var(--radius-lg); --button-border-width: 2px; --button-shadow: var(--shadow-sm); --button-shadow-hover: var(--shadow-md); --button-lg-font-size: var(--font-size-lg); /* ======================================== CATEGORY/TAG COLORS Semantic colors for content categories All using primary blue variants + neutral ======================================== */ --color-cat-default: var(--color-primary); --color-cat-default-bg: var(--color-primary-10); --color-cat-featured: var(--color-tertiary); --color-cat-featured-bg: var(--color-tertiary-10); --color-cat-warning: var(--color-warning); --color-cat-warning-bg: var(--color-warning-10); --color-cat-neutral: var(--color-text-muted); --color-cat-neutral-bg: rgba(var(--color-black-rgb), 0.06); } /* 🌙 Dark Mode Overrides */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { /* Swap to dark-mode-friendly primary variant */ --color-primary-rgb: var(--color-primary-rgb-dark); --color-primary-hover-rgb: var(--color-primary-hover-rgb-dark); --color-primary-light-rgb: var(--color-primary-light-rgb-dark); --color-primary-surface-rgb: var(--color-primary-surface-rgb-dark); --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-dark); --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-dark); --color-bg: var(--color-bg-dark); --color-surface: var(--color-surface-dark); --color-surface-alt: var(--color-surface-alt-dark); --color-surface-elevated: var(--color-surface-elevated-dark); --color-text: var(--color-text-dark); --color-text-secondary: var(--color-text-secondary-dark); --color-text-muted: var(--color-text-muted-dark); --color-text-inverse: var(--color-text-inverse-dark); --color-border: var(--color-border-dark); /* Theme-Aware Text Colors for Dark Mode */ --color-text-heading: #f7fafc; --color-text-nav: #e2e8f0; /* Header/nav hover clarity in dark mode (smart visibility) */ --nav-link-hover-bg: var(--color-header-hover-bg-dark, rgba(var(--color-white-rgb), 0.08)); --nav-link-hover-text: var(--color-header-hover-text-dark, var(--color-primary-light)); /* Dark mode overlays - inverted */ --color-overlay: rgba(var(--color-black-rgb), 0.8); --color-backdrop: rgba(var(--color-black-rgb), 0.92); --color-backdrop-strong: rgba(var(--color-black-rgb), 0.98); /* Dark mode glass */ --glass-bg: var(--color-backdrop); --glass-bg-strong: var(--color-backdrop-strong); --glass-border: var(--color-border-dark); /* Dark shadows */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3); /* Ambient canvas: boost visibility on dark surfaces */ --aiwp-ambient-canvas-blend: screen; } } /* 🌙 Manual Dark Mode Toggle */ [data-theme='dark'] { /* Swap to dark-mode-friendly primary variant */ --color-primary-rgb: var(--color-primary-rgb-dark); --color-primary-hover-rgb: var(--color-primary-hover-rgb-dark); --color-primary-light-rgb: var(--color-primary-light-rgb-dark); --color-primary-surface-rgb: var(--color-primary-surface-rgb-dark); --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-dark); --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-dark); --color-bg: var(--color-bg-dark); --color-surface: var(--color-surface-dark); --color-surface-alt: var(--color-surface-alt-dark); --color-surface-elevated: var(--color-surface-elevated-dark); --color-text: var(--color-text-dark); --color-text-secondary: var(--color-text-secondary-dark); --color-text-muted: var(--color-text-muted-dark); --color-text-inverse: var(--color-text-inverse-dark); --color-border: var(--color-border-dark); /* Theme-Aware Text Colors for Dark Mode */ --color-text-heading: #f7fafc; --color-text-nav: #e2e8f0; /* Header/nav hover clarity in dark mode (smart visibility) */ --nav-link-hover-bg: var(--color-header-hover-bg-dark, rgba(var(--color-white-rgb), 0.08)); --nav-link-hover-text: var(--color-header-hover-text-dark, var(--color-primary-light)); /* Dark mode overlays - inverted */ --color-overlay: rgba(var(--color-black-rgb), 0.8); --color-backdrop: rgba(var(--color-black-rgb), 0.92); --color-backdrop-strong: rgba(var(--color-black-rgb), 0.98); --glass-bg: var(--color-backdrop); --glass-bg-strong: var(--color-backdrop-strong); --glass-border: var(--color-border-dark); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3); /* Ambient canvas: boost visibility on dark surfaces */ --aiwp-ambient-canvas-blend: screen; } /* ☀️ Manual Light Mode Toggle - v7.7.0: Maximum transparency for vivid colorful orb backdrop */ [data-theme='light'] { /* Reset to light mode primary variant */ --color-primary-rgb: var(--color-primary-rgb-light); --color-primary-hover-rgb: var(--color-primary-hover-rgb-light); --color-primary-light-rgb: var(--color-primary-light-rgb-light); --color-primary-surface-rgb: var(--color-primary-surface-rgb-light); --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-light); --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-light); /* v7.7.0: MAXIMUM transparency for vivid colorful background visibility */ --color-bg: rgba(249, 250, 251, 0.5); --color-surface: rgba(var(--color-white-rgb), 0.45); --color-surface-alt: rgba(var(--color-black-rgb), 0.015); --color-surface-elevated: rgba(var(--color-white-rgb), 0.6); /* v5.10.21: Darker text colors for explicit light mode - closer to pure black */ --color-text: #111111; --color-text-secondary: #2d2d2d; --color-text-muted: #4a4a4a; --color-text-subtle: #5a5a5a; --color-text-inverse: var(--color-text-inverse-light); --color-border: rgba(var(--color-black-rgb), 0.08); --color-border-strong: rgba(var(--color-black-rgb), 0.14); --color-border-subtle: rgba(var(--color-black-rgb), 0.04); /* Light mode overlays - v7.7.0: Adjusted for bold colorful backgrounds */ --color-overlay: rgba(var(--color-black-rgb), 0.35); --color-backdrop: rgba(var(--color-white-rgb), 0.45); --color-backdrop-strong: rgba(var(--color-white-rgb), 0.58); /* Light mode glass - v7.7.0: MAXIMUM transparency to show colorful orbs */ --glass-bg: rgba(var(--color-white-rgb), 0.38); --glass-bg-strong: rgba(var(--color-white-rgb), 0.52); --glass-border: rgba(var(--color-black-rgb), 0.06); /* Light mode shadows - subtle and refined */ --shadow-card: 0 1px 3px rgba(var(--color-black-rgb), 0.03), 0 4px 12px rgba(var(--color-black-rgb), 0.03); --shadow-card-hover: 0 4px 12px rgba(var(--color-black-rgb), 0.06), 0 8px 24px rgba(var(--color-black-rgb), 0.05); } /* ======================================== Visitor Text Contrast Controls Controlled via ======================================== */ :root[data-text-contrast='soft'] { --color-text: #1a1a1a; --color-text-secondary: #333333; --color-text-muted: #4d4d4d; --color-text-heading: #0f0f0f; --color-text-nav: #2a2a2a; } :root[data-text-contrast='high'] { --color-text: #000000; --color-text-secondary: #1a1a1a; --color-text-muted: #333333; --color-text-heading: #000000; --color-text-nav: #0a0a0a; } /* Accent luminance safety: if accent is light, keep nav hover/active text readable. */ :root[data-accent-luminance='high'], :root[data-accent-is-light='true'], :root.accent-is-light { --nav-link-hover-text: var(--sv-text-on-surface, #0a0a0a); --nav-link-active-text: var(--sv-text-on-surface, #0a0a0a); } :root[data-theme='dark'][data-text-contrast='soft'] { --color-text: rgba(248, 250, 252, 0.92); --color-text-secondary: rgba(248, 250, 252, 0.78); --color-text-muted: rgba(248, 250, 252, 0.6); --color-text-heading: #f8fafc; --color-text-nav: rgba(248, 250, 252, 0.78); } :root[data-theme='dark'][data-text-contrast='high'] { --color-text: rgb(255, 255, 255); --color-text-secondary: rgba(255, 255, 255, 0.9); --color-text-muted: rgba(255, 255, 255, 0.8); --color-text-heading: #ffffff; --color-text-nav: rgba(255, 255, 255, 0.9); } /* ======================================== v7.2.0: Dark Mode Hover Colors Lighter hover states for better visibility on dark backgrounds ======================================== */ [data-theme='dark'] { /* Hover surface - lighter than regular surface for visual feedback */ /* Refined (less aggressive) hover opacity for dark UI polish */ --color-surface-hover: rgba(var(--color-white-rgb), 0.09); --color-surface-hover-strong: rgba(var(--color-white-rgb), 0.14); /* Interactive element hovers */ --color-interactive-hover-bg: rgba(var(--color-white-rgb), 0.06); --color-interactive-active-bg: rgba(var(--color-white-rgb), 0.1); /* Header hover system (dark mode) Purpose: avoid overly strong accent fills that reduce legibility on glass surfaces. These tokens are used by header-navigation + guardrails. */ --color-header-hover-bg-dark: rgba(var(--color-white-rgb), 0.08); --color-header-hover-bg-dark-strong: rgba(var(--color-white-rgb), 0.12); --color-header-hover-border-dark: rgba(var(--color-white-rgb), 0.22); --color-header-hover-text-dark: var(--color-primary-light); /* Primary button hover - lighter variant */ /* Kept for backwards-compat; prefer `--color-primary-hover` / `--color-primary-surface-hover`. */ --color-primary-hover-dark: rgba(70, 170, 255, 1); }