/** * HomeLab Theme System v1.0.0 * * A unified, scalable theme library for all HomeLab projects. * Based on W3C Design Tokens specification (2025.10) and industry best practices. * * @license MIT * @author HomeLab Team * @see https://github.com/design-tokens/community-group * * USAGE: * 1. Include this CSS file in your * 2. Include hl-theme-controller.js (or set data-theme manually) * 3. Use CSS variables like: background: var(--hl-bg-primary); * * THEMES INCLUDED (12 total): * - Dark (6): navy-executive, midnight-slate, gunmetal, obsidian, charcoal-pro, tis-pro * - Light (4): executive-light, platinum, tis-light, cloud * - Special (2): tis-dark (hybrid), forest (brand) */ /* ============================================================ LAYER 1: PRIMITIVE TOKENS (Raw Values) These are the actual color values - never use directly in components ============================================================ */ :root { /* Blue Scale */ --hl-color-blue-50: #EBF5FF; --hl-color-blue-100: #E1EFFE; --hl-color-blue-200: #C3DDFD; --hl-color-blue-300: #A4CAFE; --hl-color-blue-400: #76A9FA; --hl-color-blue-500: #4A90D9; --hl-color-blue-600: #3B7DD8; --hl-color-blue-700: #2563EB; --hl-color-blue-800: #1D4ED8; --hl-color-blue-900: #1A2744; /* Gray Scale */ --hl-color-gray-50: #F9FAFB; --hl-color-gray-100: #F5F6F8; --hl-color-gray-200: #EAECEF; --hl-color-gray-300: #D1D5DB; --hl-color-gray-400: #9CA3AF; --hl-color-gray-500: #6B7280; --hl-color-gray-600: #4B5563; --hl-color-gray-700: #374151; --hl-color-gray-800: #1F2937; --hl-color-gray-900: #111827; /* Slate Scale */ --hl-color-slate-50: #F8FAFC; --hl-color-slate-100: #F1F5F9; --hl-color-slate-200: #E2E8F0; --hl-color-slate-300: #CBD5E1; --hl-color-slate-400: #94A3B8; --hl-color-slate-500: #64748B; --hl-color-slate-600: #475569; --hl-color-slate-700: #334155; --hl-color-slate-800: #1E293B; --hl-color-slate-900: #0F172A; /* Navy Scale */ --hl-color-navy-100: #243352; --hl-color-navy-200: #1E2A45; --hl-color-navy-300: #1A2744; --hl-color-navy-400: #161F38; --hl-color-navy-500: #141D30; --hl-color-navy-600: #12192A; --hl-color-navy-700: #0F1520; --hl-color-navy-800: #0C1118; --hl-color-navy-900: #080B10; /* Accent Colors */ --hl-color-teal: #1ABC9C; --hl-color-cyan: #00BCD4; --hl-color-orange: #FF9500; --hl-color-indigo: #5C6BC0; --hl-color-steel: #6C8EBF; --hl-color-red: #C41E3A; --hl-color-green: #2d5a27; --hl-color-gold: #c9a227; --hl-color-purple: #6c5ce7; /* Semantic Colors */ --hl-color-success: #34C759; --hl-color-warning: #FF9F0A; --hl-color-danger: #FF3B30; --hl-color-info: #007AFF; /* Neutral */ --hl-color-white: #FFFFFF; --hl-color-black: #000000; /* Spacing Scale */ --hl-space-0: 0; --hl-space-1: 4px; --hl-space-2: 8px; --hl-space-3: 12px; --hl-space-4: 16px; --hl-space-5: 20px; --hl-space-6: 24px; --hl-space-8: 32px; --hl-space-10: 40px; --hl-space-12: 48px; --hl-space-16: 64px; /* Border Radius */ --hl-radius-none: 0; --hl-radius-sm: 4px; --hl-radius-md: 8px; --hl-radius-lg: 12px; --hl-radius-xl: 16px; --hl-radius-2xl: 24px; --hl-radius-full: 9999px; /* Typography */ --hl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --hl-font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace; --hl-text-xs: 0.75rem; --hl-text-sm: 0.875rem; --hl-text-base: 1rem; --hl-text-lg: 1.125rem; --hl-text-xl: 1.25rem; --hl-text-2xl: 1.5rem; --hl-text-3xl: 1.875rem; --hl-text-4xl: 2.25rem; /* Transitions */ --hl-transition-fast: 150ms; --hl-transition-normal: 300ms; --hl-transition-slow: 500ms; /* Z-Index Scale */ --hl-z-dropdown: 100; --hl-z-sticky: 200; --hl-z-fixed: 300; --hl-z-modal-backdrop: 400; --hl-z-modal: 500; --hl-z-popover: 600; --hl-z-tooltip: 700; --hl-z-toast: 800; --hl-z-max: 9999; } /* ============================================================ LAYER 2: SEMANTIC TOKENS (Default Theme / Navy Executive) These are the tokens you USE in your CSS ============================================================ */ :root { /* Background Colors */ --hl-bg-primary: var(--hl-color-navy-300); --hl-bg-secondary: var(--hl-color-navy-500); --hl-bg-surface: var(--hl-color-navy-100); --hl-bg-sidebar: var(--hl-color-navy-500); --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); /* Text Colors */ --hl-text-primary: var(--hl-color-white); --hl-text-secondary: rgba(255, 255, 255, 0.70); --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: var(--hl-color-gray-900); /* Border Colors */ --hl-border-color: rgba(255, 255, 255, 0.12); --hl-border-focus: var(--hl-accent); /* Accent (Primary Brand Color) */ --hl-accent: var(--hl-color-blue-500); --hl-accent-hover: var(--hl-color-blue-400); --hl-accent-active: var(--hl-color-blue-600); /* Status Colors */ --hl-success: var(--hl-color-success); --hl-warning: var(--hl-color-warning); --hl-danger: var(--hl-color-danger); --hl-info: var(--hl-color-info); /* Shadows */ --hl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15); --hl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2); --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.25); --hl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35); /* Color Scheme Declaration */ color-scheme: dark; } /* ============================================================ THEME DEFINITIONS Each theme overrides the semantic tokens ============================================================ */ /* ------------------------------------------------------------ DARK THEMES (6) ------------------------------------------------------------ */ /* NAVY EXECUTIVE (Default) - Deep navy with blue accent */ [data-theme="navy-executive"] { --hl-bg-primary: #1A2744; --hl-bg-secondary: #141D30; --hl-bg-surface: #243352; --hl-bg-sidebar: #0F1520; --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); --hl-text-primary: #FFFFFF; --hl-text-secondary: rgba(255, 255, 255, 0.70); --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.12); --hl-accent: #4A90D9; --hl-accent-hover: #6BA5E7; --hl-accent-active: #3574B8; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.25); color-scheme: dark; } /* MIDNIGHT SLATE - Deep slate blue, professional */ [data-theme="midnight-slate"] { --hl-bg-primary: #1E2433; --hl-bg-secondary: #161B26; --hl-bg-surface: #2A3142; --hl-bg-sidebar: #12161F; --hl-bg-input: rgba(255, 255, 255, 0.07); --hl-bg-hover: rgba(255, 255, 255, 0.04); --hl-text-primary: #ECF0F5; --hl-text-secondary: rgba(255, 255, 255, 0.68); --hl-text-muted: rgba(255, 255, 255, 0.48); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.10); --hl-accent: #6C8EBF; --hl-accent-hover: #8AA8D4; --hl-accent-active: #4E6F9C; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.28); color-scheme: dark; } /* GUNMETAL - Industrial sophisticated gray-blue */ [data-theme="gunmetal"] { --hl-bg-primary: #2C3E50; --hl-bg-secondary: #1F2D3D; --hl-bg-surface: #34495E; --hl-bg-sidebar: #1A252F; --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); --hl-text-primary: #ECF0F1; --hl-text-secondary: rgba(255, 255, 255, 0.70); --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.12); --hl-accent: #1ABC9C; --hl-accent-hover: #48D1B5; --hl-accent-active: #16A085; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.32); color-scheme: dark; } /* OBSIDIAN - Rich dark with orange accent (Apple-inspired) */ [data-theme="obsidian"] { --hl-bg-primary: #1C1C1E; --hl-bg-secondary: #141415; --hl-bg-surface: #2C2C2E; --hl-bg-sidebar: #0F0F10; --hl-bg-input: rgba(255, 255, 255, 0.10); --hl-bg-hover: rgba(255, 255, 255, 0.06); --hl-text-primary: #F2F2F7; --hl-text-secondary: rgba(255, 255, 255, 0.70); --hl-text-muted: rgba(255, 255, 255, 0.48); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.12); --hl-accent: #FF9500; --hl-accent-hover: #FFAD33; --hl-accent-active: #CC7700; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* CHARCOAL PRO - Warm dark gray with cyan accent */ [data-theme="charcoal-pro"] { --hl-bg-primary: #2D2D2D; --hl-bg-secondary: #242424; --hl-bg-surface: #3A3A3A; --hl-bg-sidebar: #1E1E1E; --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); --hl-text-primary: #F5F5F5; --hl-text-secondary: rgba(255, 255, 255, 0.72); --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.10); --hl-accent: #00BCD4; --hl-accent-hover: #4DD0E1; --hl-accent-active: #0097A7; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.30); color-scheme: dark; } /* TIS PRO - Dark professional with cyan (Alias for charcoal-pro) */ [data-theme="tis-pro"] { --hl-bg-primary: #2D2D2D; --hl-bg-secondary: #242424; --hl-bg-surface: #3A3A3A; --hl-bg-sidebar: #1E1E1E; --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); --hl-text-primary: #B8B8B8; --hl-text-secondary: rgba(180, 180, 180, 0.85); --hl-text-muted: rgba(160, 160, 160, 0.70); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.10); --hl-accent: #00BCD4; --hl-accent-hover: #4DD0E1; --hl-accent-active: #0097A7; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.30); color-scheme: dark; } /* ------------------------------------------------------------ LIGHT THEMES (4) ------------------------------------------------------------ */ /* EXECUTIVE LIGHT - Warm professional gray */ [data-theme="executive-light"] { --hl-bg-primary: #F5F6F8; --hl-bg-secondary: #EBEDF0; --hl-bg-surface: #FFFFFF; --hl-bg-sidebar: #E1E4E8; --hl-bg-input: rgba(0, 0, 0, 0.04); --hl-bg-hover: rgba(0, 0, 0, 0.03); --hl-text-primary: #1A1A1A; --hl-text-secondary: rgba(0, 0, 0, 0.65); --hl-text-muted: rgba(0, 0, 0, 0.45); --hl-text-inverse: #FFFFFF; --hl-border-color: rgba(0, 0, 0, 0.10); --hl-accent: #3B7DD8; --hl-accent-hover: #5A94E5; --hl-accent-active: #2A5FA8; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08); color-scheme: light; } /* PLATINUM - Cool silver-gray professional */ [data-theme="platinum"] { --hl-bg-primary: #EAECEF; --hl-bg-secondary: #DFE2E7; --hl-bg-surface: #FFFFFF; --hl-bg-sidebar: #D4D8DE; --hl-bg-input: rgba(0, 0, 0, 0.05); --hl-bg-hover: rgba(0, 0, 0, 0.03); --hl-text-primary: #212121; --hl-text-secondary: rgba(0, 0, 0, 0.60); --hl-text-muted: rgba(0, 0, 0, 0.42); --hl-text-inverse: #FFFFFF; --hl-border-color: rgba(0, 0, 0, 0.12); --hl-accent: #5C6BC0; --hl-accent-hover: #7986CB; --hl-accent-active: #3F51B5; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10); color-scheme: light; } /* TIS LIGHT - Gray sidebar and content with TIS red accent */ [data-theme="tis-light"] { --hl-bg-primary: #A0A0A0; --hl-bg-secondary: #909090; --hl-bg-surface: #B8B8B8; --hl-bg-sidebar: #808080; --hl-bg-input: rgba(0, 0, 0, 0.08); --hl-bg-hover: rgba(0, 0, 0, 0.05); --hl-text-primary: #1A1A1A; --hl-text-secondary: rgba(0, 0, 0, 0.70); --hl-text-muted: rgba(0, 0, 0, 0.50); --hl-text-inverse: #FFFFFF; --hl-border-color: rgba(0, 0, 0, 0.15); --hl-accent: #C41E3A; --hl-accent-hover: #E63950; --hl-accent-active: #9C1830; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12); color-scheme: light; /* Special: Sidebar needs light text on gray background */ --hl-sidebar-text: #E8E8E8; --hl-sidebar-text-secondary: rgba(232, 232, 232, 0.85); } /* CLOUD - Clean bright white */ [data-theme="cloud"] { --hl-bg-primary: #FFFFFF; --hl-bg-secondary: #F8F9FA; --hl-bg-surface: #FFFFFF; --hl-bg-sidebar: #F1F3F5; --hl-bg-input: rgba(0, 0, 0, 0.03); --hl-bg-hover: rgba(0, 0, 0, 0.02); --hl-text-primary: #1A1A1A; --hl-text-secondary: rgba(0, 0, 0, 0.65); --hl-text-muted: rgba(0, 0, 0, 0.45); --hl-text-inverse: #FFFFFF; --hl-border-color: rgba(0, 0, 0, 0.08); --hl-accent: #2563EB; --hl-accent-hover: #3B82F6; --hl-accent-active: #1D4ED8; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06); color-scheme: light; } /* ------------------------------------------------------------ SPECIAL/BRAND THEMES (2) ------------------------------------------------------------ */ /* TIS DARK - Black sidebar, gray content, TIS red accent */ [data-theme="tis-dark"] { --hl-bg-primary: #A0A0A0; --hl-bg-secondary: #909090; --hl-bg-surface: #B8B8B8; --hl-bg-sidebar: #1A1A1A; --hl-bg-input: rgba(0, 0, 0, 0.08); --hl-bg-hover: rgba(0, 0, 0, 0.05); --hl-text-primary: #1A1A1A; --hl-text-secondary: rgba(0, 0, 0, 0.70); --hl-text-muted: rgba(0, 0, 0, 0.50); --hl-text-inverse: #FFFFFF; --hl-border-color: rgba(0, 0, 0, 0.15); --hl-accent: #C41E3A; --hl-accent-hover: #E63950; --hl-accent-active: #9C1830; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12); color-scheme: light dark; /* Special: Sidebar needs light text on dark background */ --hl-sidebar-text: #B8B8B8; --hl-sidebar-text-secondary: rgba(180, 180, 180, 0.85); } /* FOREST - Medicine Man brand (green + gold) */ [data-theme="forest"] { --hl-bg-primary: #1a1a1a; --hl-bg-secondary: #151515; --hl-bg-surface: #252525; --hl-bg-sidebar: #121212; --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); --hl-text-primary: #ffffff; --hl-text-secondary: #b0b0b0; --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.10); --hl-accent: #c9a227; --hl-accent-hover: #e6c84a; --hl-accent-active: #a88b1f; --hl-primary: #2d5a27; --hl-primary-light: #4a8f42; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* ------------------------------------------------------------ ADDITIONAL BRAND THEMES (Can extend) ------------------------------------------------------------ */ /* MIDNIGHT - Dark purple/blue (MM brand) */ [data-theme="midnight"] { --hl-bg-primary: #0f1117; --hl-bg-secondary: #0a0c10; --hl-bg-surface: #1a1d28; --hl-bg-sidebar: #080a0e; --hl-bg-input: rgba(255, 255, 255, 0.07); --hl-bg-hover: rgba(255, 255, 255, 0.04); --hl-text-primary: #ffffff; --hl-text-secondary: #8b8fa3; --hl-text-muted: rgba(255, 255, 255, 0.48); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(108, 92, 231, 0.2); --hl-accent: #6c5ce7; --hl-accent-hover: #a29bfe; --hl-accent-active: #5849c4; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* OCEAN - Blue/cyan aquatic */ [data-theme="ocean"] { --hl-bg-primary: #0a1420; --hl-bg-secondary: #071018; --hl-bg-surface: #0f1e30; --hl-bg-sidebar: #050c12; --hl-bg-input: rgba(255, 255, 255, 0.07); --hl-bg-hover: rgba(255, 255, 255, 0.04); --hl-text-primary: #ffffff; --hl-text-secondary: #8ba9c5; --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(0, 212, 170, 0.2); --hl-accent: #00d4aa; --hl-accent-hover: #72efdd; --hl-accent-active: #00a888; --hl-primary: #0077b6; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* EMBER - Red/orange warm */ [data-theme="ember"] { --hl-bg-primary: #140e0c; --hl-bg-secondary: #100a08; --hl-bg-surface: #1e1614; --hl-bg-sidebar: #0c0806; --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); --hl-text-primary: #ffffff; --hl-text-secondary: #c5a99d; --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 159, 67, 0.2); --hl-accent: #ff9f43; --hl-accent-hover: #ffc078; --hl-accent-active: #cc7f36; --hl-primary: #b33a3a; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* SLATE - Cool gray with cyan */ [data-theme="slate"] { --hl-bg-primary: #0c1220; --hl-bg-secondary: #080d18; --hl-bg-surface: #141c2c; --hl-bg-sidebar: #060a12; --hl-bg-input: rgba(255, 255, 255, 0.07); --hl-bg-hover: rgba(255, 255, 255, 0.04); --hl-text-primary: #f1f5f9; --hl-text-secondary: #94a3b8; --hl-text-muted: rgba(255, 255, 255, 0.50); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(6, 182, 212, 0.2); --hl-accent: #06b6d4; --hl-accent-hover: #67e8f9; --hl-accent-active: #0591a7; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.32); color-scheme: dark; } /* NOIR - Monochrome black/white */ [data-theme="noir"] { --hl-bg-primary: #080808; --hl-bg-secondary: #050505; --hl-bg-surface: #121212; --hl-bg-sidebar: #030303; --hl-bg-input: rgba(255, 255, 255, 0.08); --hl-bg-hover: rgba(255, 255, 255, 0.05); --hl-text-primary: #ffffff; --hl-text-secondary: #888888; --hl-text-muted: rgba(255, 255, 255, 0.45); --hl-text-inverse: #1A1A1A; --hl-border-color: rgba(255, 255, 255, 0.15); --hl-accent: #e0e0e0; --hl-accent-hover: #ffffff; --hl-accent-active: #b0b0b0; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.40); color-scheme: dark; } /* ============================================================ DATEQUEST THEMES (Added Session 599) 6 romantic/date-themed gradients from DateQuest v3.4 ============================================================ */ /* DQ Theme 1: Weekend Street Market - Light, warm cream/butter/lavender */ [data-theme="dq-street-market"] { --hl-bg-primary: linear-gradient(135deg, #faf8f5 0%, #fff8e7 35%, #f5f0ff 70%, #faf8f5 100%); --hl-bg-secondary: #faf8f5; --hl-bg-surface: rgba(255, 255, 255, 0.85); --hl-bg-sidebar: #fff8e7; --hl-bg-input: rgba(255, 248, 231, 0.6); --hl-bg-hover: rgba(139, 90, 43, 0.08); --hl-text-primary: #3d2914; --hl-text-secondary: #6b4423; --hl-text-muted: rgba(61, 41, 20, 0.55); --hl-text-inverse: #ffffff; --hl-border-color: rgba(139, 90, 43, 0.2); --hl-accent: #8b5a2b; --hl-accent-hover: #a0522d; --hl-accent-active: #704214; --hl-shadow-lg: 0 10px 15px -3px rgba(139, 90, 43, 0.15); color-scheme: light; } /* DQ Theme 2: Corner Window Cafe - Light, yellow-cream/mint/beige */ [data-theme="dq-window-cafe"] { --hl-bg-primary: linear-gradient(135deg, #fffef5 0%, #f0fff0 50%, #faf5e8 100%); --hl-bg-secondary: #fffef5; --hl-bg-surface: rgba(255, 255, 255, 0.9); --hl-bg-sidebar: #f0fff0; --hl-bg-input: rgba(240, 255, 240, 0.6); --hl-bg-hover: rgba(85, 107, 47, 0.08); --hl-text-primary: #2f4f2f; --hl-text-secondary: #556b2f; --hl-text-muted: rgba(47, 79, 47, 0.55); --hl-text-inverse: #ffffff; --hl-border-color: rgba(85, 107, 47, 0.2); --hl-accent: #6b8e23; --hl-accent-hover: #7cae29; --hl-accent-active: #556b2f; --hl-shadow-lg: 0 10px 15px -3px rgba(85, 107, 47, 0.15); color-scheme: light; } /* DQ Theme 3: City Glow Tease - Playful, pink-to-blue gradient */ [data-theme="dq-city-glow"] { --hl-bg-primary: linear-gradient(135deg, #ffe4ec 0%, #e8d5ff 50%, #d4e4ff 100%); --hl-bg-secondary: #ffe4ec; --hl-bg-surface: rgba(255, 255, 255, 0.85); --hl-bg-sidebar: #e8d5ff; --hl-bg-input: rgba(232, 213, 255, 0.5); --hl-bg-hover: rgba(199, 21, 133, 0.08); --hl-text-primary: #4a1942; --hl-text-secondary: #6b3d63; --hl-text-muted: rgba(74, 25, 66, 0.55); --hl-text-inverse: #ffffff; --hl-border-color: rgba(199, 21, 133, 0.2); --hl-accent: #c71585; --hl-accent-hover: #db1d9b; --hl-accent-active: #a01070; --hl-shadow-lg: 0 10px 15px -3px rgba(199, 21, 133, 0.15); color-scheme: light; } /* DQ Theme 4: Soft Table for Two - Dark, blue-gray/burgundy with warm orange */ [data-theme="dq-table-for-two"] { --hl-bg-primary: linear-gradient(135deg, #1a1f2e 0%, #2d1f2f 50%, #1f1a1a 100%); --hl-bg-secondary: #1a1f2e; --hl-bg-surface: rgba(45, 31, 47, 0.8); --hl-bg-sidebar: #2d1f2f; --hl-bg-input: rgba(255, 140, 0, 0.12); --hl-bg-hover: rgba(255, 140, 0, 0.1); --hl-text-primary: #f5e6d3; --hl-text-secondary: #c9a86c; --hl-text-muted: rgba(245, 230, 211, 0.5); --hl-text-inverse: #1a1f2e; --hl-border-color: rgba(255, 140, 0, 0.25); --hl-accent: #ff8c00; --hl-accent-hover: #ffa033; --hl-accent-active: #cc7000; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* DQ Theme 5: Rooftop City Lights - Dark, radial navy-to-black with blue */ [data-theme="dq-rooftop-lights"] { --hl-bg-primary: radial-gradient(ellipse at top, #1a2a4a 0%, #0d1117 70%, #000000 100%); --hl-bg-secondary: #0d1117; --hl-bg-surface: rgba(26, 42, 74, 0.7); --hl-bg-sidebar: #1a2a4a; --hl-bg-input: rgba(100, 149, 237, 0.15); --hl-bg-hover: rgba(100, 149, 237, 0.1); --hl-text-primary: #e6f0ff; --hl-text-secondary: #8ba4cc; --hl-text-muted: rgba(230, 240, 255, 0.45); --hl-text-inverse: #0d1117; --hl-border-color: rgba(100, 149, 237, 0.25); --hl-accent: #6495ed; --hl-accent-hover: #7aa8f5; --hl-accent-active: #4a7bd4; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* DQ Theme 6: Lantern Garden Path - Dark, dual radial green/purple with emerald */ [data-theme="dq-lantern-garden"] { --hl-bg-primary: radial-gradient(ellipse at bottom left, #1a2f1a 0%, transparent 50%), radial-gradient(ellipse at top right, #2a1f3a 0%, #0a0f0a 70%); --hl-bg-secondary: #0a0f0a; --hl-bg-surface: rgba(26, 47, 26, 0.6); --hl-bg-sidebar: #1a2f1a; --hl-bg-input: rgba(80, 200, 120, 0.12); --hl-bg-hover: rgba(80, 200, 120, 0.08); --hl-text-primary: #d4f0d4; --hl-text-secondary: #8fbc8f; --hl-text-muted: rgba(212, 240, 212, 0.45); --hl-text-inverse: #0a0f0a; --hl-border-color: rgba(80, 200, 120, 0.25); --hl-accent: #50c878; --hl-accent-hover: #66d98e; --hl-accent-active: #3da85e; --hl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* ============================================================ UTILITY CLASSES ============================================================ */ /* Smooth theme transitions */ .hl-theme-transition, .hl-theme-transition * { transition: background-color var(--hl-transition-normal) ease, border-color var(--hl-transition-normal) ease, color var(--hl-transition-fast) ease, box-shadow var(--hl-transition-normal) ease !important; } /* Prevent FOUC - hide until theme is applied */ html:not([data-theme]) { visibility: hidden; } html[data-theme] { visibility: visible; } /* ============================================================ COMPONENT SLOT TOKENS (Layer 3 - Optional) Projects can override these for component-specific styling ============================================================ */ :root { /* Sidebar Slots */ --hl-sidebar-bg: var(--hl-bg-sidebar); --hl-sidebar-text: var(--hl-text-primary); --hl-sidebar-text-secondary: var(--hl-text-secondary); --hl-sidebar-border: var(--hl-border-color); --hl-sidebar-hover: var(--hl-bg-hover); --hl-sidebar-active: var(--hl-accent); /* Card Slots */ --hl-card-bg: var(--hl-bg-surface); --hl-card-border: var(--hl-border-color); --hl-card-shadow: var(--hl-shadow-md); /* Button Slots */ --hl-btn-primary-bg: var(--hl-accent); --hl-btn-primary-text: var(--hl-text-inverse); --hl-btn-primary-hover: var(--hl-accent-hover); /* Input Slots */ --hl-input-bg: var(--hl-bg-input); --hl-input-border: var(--hl-border-color); --hl-input-focus: var(--hl-accent); --hl-input-text: var(--hl-text-primary); --hl-input-placeholder: var(--hl-text-muted); }