/** * EXPOGEN Theme Tokens — CSS Custom Properties * * All visual design tokens as CSS variables. * Themes override these values via [data-theme="name"] selectors. * * Usage: * * * * * * Adding a new theme: * 1. Add [data-theme="my-theme"] { ... } section below * 2. Add entry to THEMES registry in theme-manager.js * * @version 1.0.0 */ /* ================================================================ DEFAULT VALUES (= dark-default theme) Applied when no data-theme attribute is set or as fallback. ================================================================ */ :root { /* ---- Backgrounds ---- */ --color-bg-primary: #0a0e27; --color-bg-secondary: #1a1f3a; --color-bg-tertiary: #252c4a; /* ---- Text ---- */ --color-text-primary: #ffffff; --color-text-secondary: #a0aec0; --color-text-muted: #718096; --color-text-on-color: #ffffff; /* ---- Accents ---- */ --color-accent-cyan: #00d9ff; --color-accent-pink: #ff006e; --color-accent-purple: #667eea; --color-accent-violet: #764ba2; /* ---- RGB triplets (for rgba() alpha compositing) ---- */ --color-accent-cyan-rgb: 0, 217, 255; --color-accent-pink-rgb: 255, 0, 110; --color-accent-purple-rgb: 102, 126, 234; --color-accent-violet-rgb: 118, 75, 162; --color-bg-primary-rgb: 10, 14, 39; --color-bg-secondary-rgb: 26, 31, 58; --color-bg-tertiary-rgb: 37, 44, 74; --color-text-primary-rgb: 255, 255, 255; /* ---- Gradients ---- */ --gradient-hero-start: #667eea; --gradient-hero-end: #764ba2; --gradient-accent-start: #00d9ff; --gradient-accent-end: #ff006e; /* ---- Shadows ---- */ --shadow-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.5); --shadow-glow-pink: 0 0 20px rgba(255, 0, 110, 0.5); --shadow-neo-light: 5px 5px 10px #070a14, -5px -5px 10px #252c4a; --shadow-neo-dark: inset 5px 5px 10px #070a14, inset -5px -5px 10px #252c4a; --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* ---- Glass effect ---- */ --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); /* ---- Neomorphism ---- */ --neo-bg: linear-gradient(145deg, #1a1f3a, #0f1226); --neo-inset-bg: linear-gradient(145deg, #0f1226, #1a1f3a); /* ---- Cursor ---- */ --cursor-color: #00d9ff; /* ---- Status / Semantic colors ---- */ --color-success: #10b981; --color-success-rgb: 16, 185, 129; --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; --color-error: #ef4444; --color-error-rgb: 239, 68, 68; --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; /* ---- Border ---- */ --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.2); /* ---- Focus ring ---- */ --color-focus-ring: rgba(0, 217, 255, 0.5); /* ---- UI tokens ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1); /* ---- Input ---- */ --input-bg: var(--color-bg-secondary); --input-border: var(--color-border); --input-border-focus: var(--color-accent-cyan); --input-placeholder: var(--color-text-muted); /* ---- Color scheme (browser hint) ---- */ color-scheme: dark; } /* ================================================================ DARK DEFAULT — current production theme Values identical to :root (no overrides needed) ================================================================ */ [data-theme="dark-default"] { color-scheme: dark; } /* ================================================================ DARK NEON — cyberpunk, green neon, aggressive glow ================================================================ */ [data-theme="dark-neon"] { /* Backgrounds */ --color-bg-primary: #0a0a0a; --color-bg-secondary: #1a1a2e; --color-bg-tertiary: #16213e; /* Accents */ --color-accent-cyan: #39ff14; --color-accent-pink: #ff073a; --color-accent-purple: #b537f2; --color-accent-violet: #9b59b6; /* RGB triplets */ --color-accent-cyan-rgb: 57, 255, 20; --color-accent-pink-rgb: 255, 7, 58; --color-accent-purple-rgb: 181, 55, 242; --color-accent-violet-rgb: 155, 89, 182; --color-bg-primary-rgb: 10, 10, 10; --color-bg-secondary-rgb: 26, 26, 46; --color-bg-tertiary-rgb: 22, 33, 62; /* Gradients */ --gradient-hero-start: #b537f2; --gradient-hero-end: #39ff14; --gradient-accent-start: #39ff14; --gradient-accent-end: #ff073a; /* Shadows */ --shadow-glow-cyan: 0 0 25px rgba(57, 255, 20, 0.6); --shadow-glow-pink: 0 0 25px rgba(255, 7, 58, 0.6); --shadow-neo-light: 5px 5px 10px #050505, -5px -5px 10px #16213e; --shadow-neo-dark: inset 5px 5px 10px #050505, inset -5px -5px 10px #16213e; --shadow-glass: 0 8px 32px 0 rgba(57, 255, 20, 0.15); /* Glass */ --glass-bg: rgba(57, 255, 20, 0.03); --glass-border: rgba(57, 255, 20, 0.15); /* Neo */ --neo-bg: linear-gradient(145deg, #1a1a2e, #0a0a0a); --neo-inset-bg: linear-gradient(145deg, #0a0a0a, #1a1a2e); /* Cursor */ --cursor-color: #39ff14; color-scheme: dark; } /* ================================================================ LIGHT CLEAN — minimalist white, muted accents, soft shadows ================================================================ */ [data-theme="light-clean"] { /* Backgrounds */ --color-bg-primary: #ffffff; --color-bg-secondary: #f7fafc; --color-bg-tertiary: #edf2f7; /* Text */ --color-text-primary: #1a202c; --color-text-secondary: #4a5568; --color-text-muted: #a0aec0; --color-text-on-color: #ffffff; /* Accents */ --color-accent-cyan: #0891b2; --color-accent-pink: #db2777; --color-accent-purple: #7c3aed; --color-accent-violet: #6d28d9; /* RGB triplets */ --color-accent-cyan-rgb: 8, 145, 178; --color-accent-pink-rgb: 219, 39, 119; --color-accent-purple-rgb: 124, 58, 237; --color-accent-violet-rgb: 109, 40, 217; --color-bg-primary-rgb: 255, 255, 255; --color-bg-secondary-rgb: 247, 250, 252; --color-bg-tertiary-rgb: 237, 242, 247; --color-text-primary-rgb: 26, 32, 44; /* Gradients */ --gradient-hero-start: #7c3aed; --gradient-hero-end: #0891b2; --gradient-accent-start: #0891b2; --gradient-accent-end: #db2777; /* Shadows */ --shadow-glow-cyan: 0 0 20px rgba(8, 145, 178, 0.3); --shadow-glow-pink: 0 0 20px rgba(219, 39, 119, 0.3); --shadow-neo-light: 5px 5px 10px #e2e8f0, -5px -5px 10px #ffffff; --shadow-neo-dark: inset 5px 5px 10px #e2e8f0, inset -5px -5px 10px #ffffff; --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.08); /* Glass */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(0, 0, 0, 0.08); /* Neo */ --neo-bg: linear-gradient(145deg, #ffffff, #edf2f7); --neo-inset-bg: linear-gradient(145deg, #edf2f7, #ffffff); /* Cursor */ --cursor-color: #0891b2; /* Light overrides */ --color-border: rgba(0, 0, 0, 0.1); --color-border-strong: rgba(0, 0, 0, 0.2); --color-focus-ring: rgba(8, 145, 178, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15); --input-bg: #ffffff; color-scheme: light; } /* ================================================================ LIGHT WARM — cream background, orange/gold accents, warm feel ================================================================ */ [data-theme="light-warm"] { /* Backgrounds */ --color-bg-primary: #fffbf5; --color-bg-secondary: #fef3e2; --color-bg-tertiary: #fde9cc; /* Text */ --color-text-primary: #3d2c1e; --color-text-secondary: #6b5444; --color-text-muted: #9a8474; --color-text-on-color: #ffffff; /* Accents */ --color-accent-cyan: #f59e0b; --color-accent-pink: #ef4444; --color-accent-purple: #d97706; --color-accent-violet: #b45309; /* RGB triplets */ --color-accent-cyan-rgb: 245, 158, 11; --color-accent-pink-rgb: 239, 68, 68; --color-accent-purple-rgb: 217, 119, 6; --color-accent-violet-rgb: 180, 83, 9; --color-bg-primary-rgb: 255, 251, 245; --color-bg-secondary-rgb: 254, 243, 226; --color-bg-tertiary-rgb: 253, 233, 204; --color-text-primary-rgb: 61, 44, 30; /* Gradients */ --gradient-hero-start: #f59e0b; --gradient-hero-end: #ef4444; --gradient-accent-start: #f59e0b; --gradient-accent-end: #d97706; /* Shadows */ --shadow-glow-cyan: 0 0 20px rgba(245, 158, 11, 0.3); --shadow-glow-pink: 0 0 20px rgba(239, 68, 68, 0.3); --shadow-neo-light: 5px 5px 10px #e8ddd0, -5px -5px 10px #fffbf5; --shadow-neo-dark: inset 5px 5px 10px #e8ddd0, inset -5px -5px 10px #fffbf5; --shadow-glass: 0 8px 32px 0 rgba(61, 44, 30, 0.08); /* Glass */ --glass-bg: rgba(255, 251, 245, 0.7); --glass-border: rgba(61, 44, 30, 0.08); /* Neo */ --neo-bg: linear-gradient(145deg, #fffbf5, #fde9cc); --neo-inset-bg: linear-gradient(145deg, #fde9cc, #fffbf5); /* Cursor */ --cursor-color: #f59e0b; /* Light warm overrides */ --color-border: rgba(61, 44, 30, 0.12); --color-border-strong: rgba(61, 44, 30, 0.25); --color-focus-ring: rgba(245, 158, 11, 0.4); --shadow-sm: 0 1px 2px rgba(61, 44, 30, 0.06); --shadow-md: 0 4px 12px rgba(61, 44, 30, 0.08); --shadow-lg: 0 8px 24px rgba(61, 44, 30, 0.1); --shadow-xl: 0 16px 48px rgba(61, 44, 30, 0.15); --input-bg: #fffbf5; color-scheme: light; }