/* ========================================================================== THEME VARIABLES - CSS Custom Properties for Puggle Theming System ========================================================================== This file defines the CSS custom properties (variables) that power the theming system. All theme-aware components should reference these variables instead of hardcoded color values. Usage: Apply data-theme attribute to to switch themes Example: ========================================================================== */ /* ========================================================================== DEFAULT THEME: Puggle Dark (Magenta/Cyan Gradient) ========================================================================== */ :root { /* Brand Colors - Primary Gradient */ --theme-brand-primary: #ff00ff; --theme-brand-secondary: #00ffff; --theme-brand-gradient: linear-gradient(135deg, #ff00ff, #00ffff); /* Navigation */ --theme-nav-bg: #0a0a0a; --theme-nav-bg-secondary: #111111; --theme-nav-accent-height: 3px; --theme-nav-accent-gradient: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff); /* Logo */ --theme-logo-gradient: linear-gradient(135deg, #ff00ff, #00ffff); --theme-logo-text-color: transparent; --theme-logo-icon-bg: linear-gradient(135deg, #ff00ff, #00ffff); --theme-logo-icon-color: #ffffff; /* Menu Items */ --theme-menu-text: #e5e5e5; --theme-menu-text-hover: #ffffff; --theme-menu-hover-bg: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.15)); --theme-menu-icon-bg: rgba(255, 0, 255, 0.2); --theme-menu-icon-color: #ff00ff; --theme-menu-icon-hover-bg: rgba(255, 0, 255, 0.35); /* User Avatar */ --theme-avatar-bg: linear-gradient(135deg, #ff00ff, #00ffff); --theme-avatar-color: #ffffff; /* Dropdown */ --theme-dropdown-bg: #ffffff; --theme-dropdown-text: #333333; --theme-dropdown-hover-bg: #f8f9fa; --theme-dropdown-hover-color: #9333ea; --theme-dropdown-border: #e9ecef; --theme-dropdown-section-header: #9333ea; --theme-dropdown-icon-color: #9333ea; /* Mobile Menu */ --theme-mobile-bg: #0a0a0a; --theme-mobile-dropdown-bg: rgba(255, 255, 255, 0.1); --theme-mobile-text: #ffffff; /* Notification Badge */ --theme-badge-bg: #ff00ff; --theme-badge-color: #ffffff; /* Future: Extensible Variables for Other Components */ /* Buttons */ --theme-btn-primary-bg: var(--theme-brand-gradient); --theme-btn-primary-text: #ffffff; --theme-btn-secondary-bg: transparent; --theme-btn-secondary-border: rgba(255, 255, 255, 0.5); --theme-btn-secondary-text: #ffffff; /* Cards & Panels */ --theme-card-bg: #1a1a1a; --theme-card-border: #333333; --theme-card-text: #e5e5e5; /* Form Elements */ --theme-input-bg: #1a1a1a; --theme-input-border: #333333; --theme-input-text: #e5e5e5; --theme-input-focus-border: #ff00ff; /* Status Colors */ --theme-success: #22c55e; --theme-warning: #f59e0b; --theme-danger: #ef4444; --theme-info: #00ffff; } /* ========================================================================== WARM DARK THEME (Original Production Colors - Orange) ========================================================================== */ [data-theme="warm-dark"] { /* Brand Colors - Orange */ --theme-brand-primary: #f97316; --theme-brand-secondary: #ea580c; --theme-brand-gradient: linear-gradient(135deg, #f97316, #ea580c); /* Navigation */ --theme-nav-bg: #1a1410; --theme-nav-bg-secondary: #231a14; --theme-nav-accent-height: 0px; /* No accent bar in warm theme */ --theme-nav-accent-gradient: none; /* Logo */ --theme-logo-gradient: none; --theme-logo-text-color: #fef3c7; --theme-logo-icon-bg: linear-gradient(135deg, #f97316, #ea580c); --theme-logo-icon-color: #ffffff; /* Menu Items */ --theme-menu-text: #d6d3d1; --theme-menu-text-hover: #f97316; --theme-menu-hover-bg: rgba(249, 115, 22, 0.2); --theme-menu-icon-bg: rgba(249, 115, 22, 0.2); --theme-menu-icon-color: #f97316; --theme-menu-icon-hover-bg: rgba(249, 115, 22, 0.4); /* User Avatar */ --theme-avatar-bg: #f97316; --theme-avatar-color: #ffffff; /* Dropdown */ --theme-dropdown-bg: #ffffff; --theme-dropdown-text: #333333; --theme-dropdown-hover-bg: #f8f9fa; --theme-dropdown-hover-color: #667eea; --theme-dropdown-border: #e9ecef; --theme-dropdown-section-header: #667eea; --theme-dropdown-icon-color: #667eea; /* Mobile Menu */ --theme-mobile-bg: #1a1410; --theme-mobile-dropdown-bg: rgba(255, 255, 255, 0.1); --theme-mobile-text: #ffffff; /* Notification Badge */ --theme-badge-bg: #f97316; --theme-badge-color: #ffffff; /* Cards & Panels */ --theme-card-bg: #1a1410; --theme-card-border: #3d2e24; --theme-card-text: #d6d3d1; /* Form Elements */ --theme-input-bg: #1a1410; --theme-input-border: #3d2e24; --theme-input-text: #d6d3d1; --theme-input-focus-border: #f97316; } /* ========================================================================== PUGGLE CLASSIC THEME - Text-only gradient logo with Doto font, no icon box ========================================================================== */ [data-theme="puggle-classic"] { /* Brand Colors - Same magenta/cyan */ --theme-brand-primary: #ff00ff; --theme-brand-secondary: #00ffff; --theme-brand-gradient: linear-gradient(135deg, #ff00ff, #00ffff); /* Navigation - Slightly lighter bg */ --theme-nav-bg: #111111; --theme-nav-bg-secondary: #1a1a1a; --theme-nav-accent-height: 3px; --theme-nav-accent-gradient: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff); /* Logo - Doto font, gradient text, NO icon */ --theme-logo-font: 'Doto', sans-serif; --theme-logo-font-weight: 800; --theme-logo-font-size: 1.75rem; --theme-logo-gradient: linear-gradient(135deg, #ff00ff, #00ffff); --theme-logo-text-color: transparent; --theme-logo-icon-display: none; /* Hide the [P] icon box */ --theme-logo-icon-bg: none; --theme-logo-icon-color: transparent; /* Menu Items - Same as puggle-dark */ --theme-menu-text: #e5e5e5; --theme-menu-text-hover: #ffffff; --theme-menu-hover-bg: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.15)); --theme-menu-icon-bg: rgba(255, 0, 255, 0.2); --theme-menu-icon-color: #ff00ff; --theme-menu-icon-hover-bg: rgba(255, 0, 255, 0.35); /* User Avatar */ --theme-avatar-bg: linear-gradient(135deg, #ff00ff, #00ffff); --theme-avatar-color: #ffffff; /* Dropdown */ --theme-dropdown-bg: #ffffff; --theme-dropdown-text: #333333; --theme-dropdown-hover-bg: #f8f9fa; --theme-dropdown-hover-color: #9333ea; --theme-dropdown-border: #e9ecef; --theme-dropdown-section-header: #9333ea; --theme-dropdown-icon-color: #9333ea; /* Mobile Menu */ --theme-mobile-bg: #111111; --theme-mobile-dropdown-bg: rgba(255, 255, 255, 0.1); --theme-mobile-text: #ffffff; /* Notification Badge */ --theme-badge-bg: #ff00ff; --theme-badge-color: #ffffff; /* Cards & Panels */ --theme-card-bg: #1a1a1a; --theme-card-border: #333333; --theme-card-text: #e5e5e5; /* Form Elements */ --theme-input-bg: #1a1a1a; --theme-input-border: #333333; --theme-input-text: #e5e5e5; --theme-input-focus-border: #ff00ff; } /* ========================================================================== LIGHT THEME ========================================================================== */ [data-theme="light"] { /* Brand Colors - Purple/Blue */ --theme-brand-primary: #8b5cf6; --theme-brand-secondary: #6366f1; --theme-brand-gradient: linear-gradient(135deg, #8b5cf6, #6366f1); /* Navigation */ --theme-nav-bg: #ffffff; --theme-nav-bg-secondary: #f8fafc; --theme-nav-accent-height: 3px; --theme-nav-accent-gradient: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6); /* Logo */ --theme-logo-gradient: linear-gradient(135deg, #8b5cf6, #6366f1); --theme-logo-text-color: transparent; --theme-logo-icon-bg: linear-gradient(135deg, #8b5cf6, #6366f1); --theme-logo-icon-color: #ffffff; /* Menu Items */ --theme-menu-text: #4b5563; --theme-menu-text-hover: #8b5cf6; --theme-menu-hover-bg: rgba(139, 92, 246, 0.1); --theme-menu-icon-bg: rgba(139, 92, 246, 0.1); --theme-menu-icon-color: #8b5cf6; --theme-menu-icon-hover-bg: rgba(139, 92, 246, 0.2); /* User Avatar */ --theme-avatar-bg: linear-gradient(135deg, #8b5cf6, #6366f1); --theme-avatar-color: #ffffff; /* Dropdown */ --theme-dropdown-bg: #ffffff; --theme-dropdown-text: #333333; --theme-dropdown-hover-bg: #f3f4f6; --theme-dropdown-hover-color: #8b5cf6; --theme-dropdown-border: #e5e7eb; --theme-dropdown-section-header: #8b5cf6; --theme-dropdown-icon-color: #8b5cf6; /* Mobile Menu */ --theme-mobile-bg: #ffffff; --theme-mobile-dropdown-bg: #f3f4f6; --theme-mobile-text: #1f2937; /* Notification Badge */ --theme-badge-bg: #8b5cf6; --theme-badge-color: #ffffff; /* Cards & Panels */ --theme-card-bg: #ffffff; --theme-card-border: #e5e7eb; --theme-card-text: #1f2937; /* Form Elements */ --theme-input-bg: #ffffff; --theme-input-border: #d1d5db; --theme-input-text: #1f2937; --theme-input-focus-border: #8b5cf6; } /* ========================================================================== THEME TRANSITION ========================================================================== */ body { transition: background-color 0.3s ease, color 0.3s ease; } .modern-nav-wrapper, .modern-nav, .nav-brand, .nav-link, .nav-dropdown-toggle, .nav-dropdown-menu, .dropdown-item { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }