/* ============================================================ yRoute — Theme System 5 Themes via [data-theme] attribute on Compatible with Tailwind dark: variant (.dark class) ============================================================ */ :root, [data-theme="modern-blue"] { --yr-primary: #635bff; --yr-primary-hover: #5046e5; --yr-primary-light: #ededff; --yr-primary-text: #3d35c2; --yr-accent: #635bff; --yr-nav-bg: rgba(255, 255, 255, 0.85); --yr-nav-text: #425466; --yr-nav-active: #635bff; --yr-nav-hover: #f6f9fc; --yr-nav-brand: #0a2540; --yr-nav-border: rgba(0, 0, 0, 0.06); --yr-nav-blur: 16px; --yr-mega-bg: rgba(255, 255, 255, 0.97); --yr-mega-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); --yr-hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 100%); --yr-hero-text: #ffffff; --yr-body-bg: #f6f9fc; --yr-surface: #ffffff; --yr-surface-hover: #f6f9fc; --yr-border: #e3e8ee; --yr-card-border: rgba(0, 0, 0, 0.05); --yr-text: #0a2540; --yr-text-muted: #425466; --yr-text-light: #8898aa; --yr-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --yr-card-hover-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); --yr-card-radius: 12px; --yr-success: #0cbc87; --yr-warning: #f5a623; --yr-danger: #e25950; --yr-price-bg: linear-gradient(135deg, #635bff 0%, #3d35c2 100%); --yr-price-text: #ffffff; --yr-step-active: #635bff; --yr-step-completed: #0cbc87; --yr-step-pending: #e3e8ee; --yr-option-selected-border: #635bff; --yr-option-selected-bg: #f7f6ff; --yr-input-bg: #ffffff; --yr-input-border: #e3e8ee; --yr-input-focus: #635bff; --yr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [data-theme="forest-green"] { --yr-primary: #0cbc87; --yr-primary-hover: #0aa077; --yr-primary-light: #e6f9f1; --yr-primary-text: #087a58; --yr-accent: #00d4aa; --yr-nav-bg: rgba(255,255,255,0.85); --yr-nav-text: #2d4a3e; --yr-nav-active: #0cbc87; --yr-nav-hover: #f0faf5; --yr-nav-brand: #0a2e1f; --yr-nav-border: rgba(0,60,30,0.06); --yr-nav-blur: 16px; --yr-mega-bg: rgba(255,255,255,0.97); --yr-mega-shadow: 0 12px 40px rgba(0,40,20,0.1); --yr-hero-gradient: linear-gradient(135deg, #0cbc87 0%, #0aa077 30%, #38ef7d 60%, #11998e 100%); --yr-hero-text: #ffffff; --yr-body-bg: #f4faf7; --yr-surface: #ffffff; --yr-surface-hover: #f0faf5; --yr-border: #d1e7dd; --yr-card-border: rgba(0,60,30,0.05); --yr-text: #0a2e1f; --yr-text-muted: #3d6b5a; --yr-text-light: #7aa394; --yr-card-shadow: 0 2px 4px rgba(0,40,20,0.04); --yr-card-hover-shadow: 0 12px 24px rgba(0,40,20,0.08); --yr-price-bg: linear-gradient(135deg, #0cbc87, #087a58); --yr-step-active: #0cbc87; --yr-step-completed: #087a58; --yr-step-pending: #d1e7dd; --yr-option-selected-border: #0cbc87; --yr-option-selected-bg: #f0faf5; } [data-theme="midnight-ember"] { --yr-primary: #f97066; --yr-primary-hover: #ef4444; --yr-primary-light: rgba(249,112,102,0.12); --yr-primary-text: #fca5a5; --yr-accent: #fb923c; --yr-nav-bg: rgba(20,15,12,0.9); --yr-nav-text: #b8a090; --yr-nav-active: #f97066; --yr-nav-hover: rgba(255,255,255,0.04); --yr-nav-brand: #fde0d0; --yr-nav-border: rgba(255,255,255,0.06); --yr-nav-blur: 16px; --yr-mega-bg: rgba(28,20,16,0.97); --yr-mega-shadow: 0 12px 40px rgba(0,0,0,0.4); --yr-hero-gradient: linear-gradient(135deg, #1a0a05 0%, #7c2d12 30%, #f97066 60%, #1a0a05 100%); --yr-hero-text: #fde0d0; --yr-body-bg: #120d0a; --yr-surface: #1c1410; --yr-surface-hover: #261c16; --yr-border: #3d2e24; --yr-card-border: rgba(255,255,255,0.06); --yr-text: #f0e4dc; --yr-text-muted: #b8a090; --yr-text-light: #7a6558; --yr-card-shadow: 0 2px 4px rgba(0,0,0,0.2); --yr-card-hover-shadow: 0 12px 24px rgba(0,0,0,0.3); --yr-success: #4ade80; --yr-warning: #fbbf24; --yr-danger: #f87171; --yr-price-bg: linear-gradient(135deg, #ef4444, #7c2d12); --yr-price-text: #ffffff; --yr-step-active: #f97066; --yr-step-completed: #4ade80; --yr-step-pending: #3d2e24; --yr-option-selected-border: #f97066; --yr-option-selected-bg: #261c16; --yr-input-bg: #1c1410; --yr-input-border: #3d2e24; --yr-input-focus: #f97066; } [data-theme="elegant-dark"] { --yr-primary: #a78bfa; --yr-primary-hover: #8b5cf6; --yr-primary-light: rgba(167,139,250,0.12); --yr-primary-text: #c4b5fd; --yr-accent: #8b5cf6; --yr-nav-bg: rgba(15,14,23,0.9); --yr-nav-text: #a09aaf; --yr-nav-active: #a78bfa; --yr-nav-hover: rgba(255,255,255,0.04); --yr-nav-brand: #e9e0ff; --yr-nav-border: rgba(255,255,255,0.06); --yr-nav-blur: 16px; --yr-mega-bg: rgba(26,24,37,0.97); --yr-mega-shadow: 0 12px 40px rgba(0,0,0,0.4); --yr-hero-gradient: linear-gradient(135deg, #1a1040 0%, #3d1d6e 30%, #7c3aed 60%, #1a1040 100%); --yr-hero-text: #e9e0ff; --yr-body-bg: #0f0e17; --yr-surface: #1a1825; --yr-surface-hover: #22203a; --yr-border: #2d2a3e; --yr-card-border: rgba(255,255,255,0.06); --yr-text: #e2e0ea; --yr-text-muted: #9893a8; --yr-text-light: #6b6580; --yr-card-shadow: 0 2px 4px rgba(0,0,0,0.2); --yr-card-hover-shadow: 0 12px 24px rgba(0,0,0,0.3); --yr-success: #34d399; --yr-warning: #fbbf24; --yr-danger: #f87171; --yr-price-bg: linear-gradient(135deg, #7c3aed, #4c1d95); --yr-price-text: #ffffff; --yr-step-active: #a78bfa; --yr-step-completed: #34d399; --yr-step-pending: #3b3755; --yr-option-selected-border: #a78bfa; --yr-option-selected-bg: #22203a; --yr-input-bg: #1e1b2e; --yr-input-border: #3b3755; --yr-input-focus: #a78bfa; } [data-theme="soft-rose"] { --yr-primary: #ec4899; --yr-primary-hover: #db2777; --yr-primary-light: #fdf2f8; --yr-primary-text: #be185d; --yr-accent: #f472b6; --yr-nav-bg: rgba(255,251,253,0.9); --yr-nav-text: #6b3a5a; --yr-nav-active: #ec4899; --yr-nav-hover: #fdf2f8; --yr-nav-brand: #3b0a2a; --yr-nav-border: rgba(100,20,60,0.06); --yr-nav-blur: 16px; --yr-mega-bg: rgba(255,251,253,0.97); --yr-mega-shadow: 0 12px 40px rgba(60,0,30,0.1); --yr-hero-gradient: linear-gradient(135deg, #ec4899 0%, #f472b6 30%, #a78bfa 60%, #ec4899 100%); --yr-hero-text: #ffffff; --yr-body-bg: #fef7fa; --yr-surface: #ffffff; --yr-surface-hover: #fdf2f8; --yr-border: #fce7f3; --yr-card-border: rgba(100,20,60,0.05); --yr-text: #3b0a2a; --yr-text-muted: #7a4060; --yr-text-light: #b06080; --yr-card-shadow: 0 2px 4px rgba(60,0,30,0.04); --yr-card-hover-shadow: 0 12px 24px rgba(60,0,30,0.08); --yr-price-bg: linear-gradient(135deg, #ec4899, #be185d); --yr-step-active: #ec4899; --yr-step-completed: #0cbc87; --yr-step-pending: #fce7f3; --yr-option-selected-border: #ec4899; --yr-option-selected-bg: #fdf2f8; } /* ============================================================ Theme Switcher Component Styling ============================================================ */ .theme-switcher { display: flex; gap: 0.35rem; align-items: center; } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .theme-swatch:hover { transform: scale(1.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .theme-swatch.active { border-color: var(--yr-text); transform: scale(1.15); box-shadow: 0 0 0 2px var(--yr-body-bg), 0 0 0 4px var(--yr-text-light); } .theme-swatch[data-theme="modern-blue"] { background: linear-gradient(135deg, #635bff, #0a2540); } .theme-swatch[data-theme="forest-green"] { background: linear-gradient(135deg, #0cbc87, #0a2e1f); } .theme-swatch[data-theme="midnight-ember"] { background: linear-gradient(135deg, #f97066, #1c1410); } .theme-swatch[data-theme="elegant-dark"] { background: linear-gradient(135deg, #a78bfa, #1e1b2e); } .theme-swatch[data-theme="soft-rose"] { background: linear-gradient(135deg, #ec4899, #3b0a2a); }