/* THEME VARIATIONS - Apply themes by adding class to body */ /* Use: */ /* ===== DARK BLUE NEON (Default) ===== */ :root.theme-dark-blue, body:not([class*="theme-"]) { --bg-primary: #0a0e27; --bg-secondary: #11152d; --bg-tertiary: #1a1f3a; --surface: #151b33; --surface-hover: #1f2543; --surface-light: #2a2f47; --text-primary: #f0f4f8; --text-secondary: #b0b8c4; --text-muted: #8a92a0; --brand: #00d4ff; --brand-hover: #00e6ff; --brand-dark: #0099cc; --accent-1: #00ff88; --accent-2: #ff6b9d; --accent-3: #ffa500; --border: #2a3142; --border-light: #3a4762; --shadow-sm: 0 4px 12px rgba(0, 212, 255, 0.08); --shadow-md: 0 10px 30px rgba(0, 212, 255, 0.12); --shadow-lg: 0 20px 60px rgba(0, 212, 255, 0.2); } /* ===== PURPLE MAGIC ===== */ body.theme-purple { --bg-primary: #2d1b69; --bg-secondary: #3d2a7f; --bg-tertiary: #4a3a92; --surface: #362152; --surface-hover: #3f2963; --surface-light: #4a3575; --text-primary: #f0e6ff; --text-secondary: #d4c4e8; --text-muted: #b0a4c4; --brand: #c041ff; --brand-hover: #d455ff; --brand-dark: #9030cc; --accent-1: #ff4da8; --accent-2: #00ffcc; --accent-3: #ffa500; --border: #4a3a75; --border-light: #5a4a85; --shadow-sm: 0 4px 12px rgba(192, 65, 255, 0.08); --shadow-md: 0 10px 30px rgba(192, 65, 255, 0.12); --shadow-lg: 0 20px 60px rgba(192, 65, 255, 0.2); } body.theme-purple .hero { background: linear-gradient(180deg, rgba(192, 65, 255, 0.1) 0%, transparent 100%); } /* ===== ECO GREEN ===== */ body.theme-green { --bg-primary: #0d3d2e; --bg-secondary: #1a5239; --bg-tertiary: #266845; --surface: #1a4a3d; --surface-hover: #22594e; --surface-light: #2a6b5d; --text-primary: #e8f5f0; --text-secondary: #c4d9d3; --text-muted: #a0b8b0; --brand: #00d97d; --brand-hover: #00ff8f; --brand-dark: #00a860; --accent-1: #00ffaa; --accent-2: #ff6b9d; --accent-3: #ffa500; --border: #2a5a4f; --border-light: #3a7a6f; --shadow-sm: 0 4px 12px rgba(0, 217, 125, 0.08); --shadow-md: 0 10px 30px rgba(0, 217, 125, 0.12); --shadow-lg: 0 20px 60px rgba(0, 217, 125, 0.2); } body.theme-green .hero { background: linear-gradient(180deg, rgba(0, 217, 125, 0.1) 0%, transparent 100%); } /* ===== SUNSET WARM ===== */ body.theme-sunset { --bg-primary: #5a2e3a; --bg-secondary: #6f3a4a; --bg-tertiary: #85465a; --surface: #6a3a49; --surface-hover: #78444f; --surface-light: #895566; --text-primary: #fff0f0; --text-secondary: #f0d4d4; --text-muted: #d9b0b0; --brand: #ff6b3b; --brand-hover: #ff7f4f; --brand-dark: #e64a1f; --accent-1: #ffb366; --accent-2: #ff4d7a; --accent-3: #ffda00; --border: #7a5a6f; --border-light: #8a6a7f; --shadow-sm: 0 4px 12px rgba(255, 107, 59, 0.08); --shadow-md: 0 10px 30px rgba(255, 107, 59, 0.12); --shadow-lg: 0 20px 60px rgba(255, 107, 59, 0.2); } body.theme-sunset .hero { background: linear-gradient(180deg, rgba(255, 107, 59, 0.1) 0%, transparent 100%); } /* ===== OCEAN BLUE ===== */ body.theme-ocean { --bg-primary: #0a2540; --bg-secondary: #143653; --bg-tertiary: #1f4a66; --surface: #163d52; --surface-hover: #1d4a63; --surface-light: #255a7a; --text-primary: #e6f0f9; --text-secondary: #c8dce8; --text-muted: #a8c4d8; --brand: #00a9e0; --brand-hover: #00c1ff; --brand-dark: #0080b8; --accent-1: #00e6ff; --accent-2: #ff6b9d; --accent-3: #ffa500; --border: #2a5270; --border-light: #3a6290; --shadow-sm: 0 4px 12px rgba(0, 169, 224, 0.08); --shadow-md: 0 10px 30px rgba(0, 169, 224, 0.12); --shadow-lg: 0 20px 60px rgba(0, 169, 224, 0.2); } body.theme-ocean .hero { background: linear-gradient(180deg, rgba(0, 169, 224, 0.1) 0%, transparent 100%); } /* ===== PREMIUM GOLD ===== */ body.theme-gold { --bg-primary: #3d2817; --bg-secondary: #523625; --bg-tertiary: #6a4831; --surface: #534129; --surface-hover: #614d35; --surface-light: #755f43; --text-primary: #fdf8f0; --text-secondary: #e8dcc8; --text-muted: #d4c4a8; --brand: #d4a745; --brand-hover: #e8bb57; --brand-dark: #b8873a; --accent-1: #ffdb5c; --accent-2: #ff8855; --accent-3: #ff6b4a; --border: #6a5845; --border-light: #7a6855; --shadow-sm: 0 4px 12px rgba(212, 167, 69, 0.08); --shadow-md: 0 10px 30px rgba(212, 167, 69, 0.12); --shadow-lg: 0 20px 60px rgba(212, 167, 69, 0.2); } body.theme-gold .hero { background: linear-gradient(180deg, rgba(212, 167, 69, 0.1) 0%, transparent 100%); } /* ===== MIDNIGHT BLACK ===== */ body.theme-midnight { --bg-primary: #0d0d0d; --bg-secondary: #1a1a1a; --bg-tertiary: #2a2a2a; --surface: #161616; --surface-hover: #1e1e1e; --surface-light: #282828; --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-muted: #b0b0b0; --brand: #e8e8e8; --brand-hover: #ffffff; --brand-dark: #d0d0d0; --accent-1: #f0e68c; --accent-2: #ffb6c1; --accent-3: #ffe4b5; --border: #3a3a3a; --border-light: #4a4a4a; --shadow-sm: 0 4px 12px rgba(232, 232, 232, 0.08); --shadow-md: 0 10px 30px rgba(232, 232, 232, 0.12); --shadow-lg: 0 20px 60px rgba(232, 232, 232, 0.2); } body.theme-midnight .hero { background: linear-gradient(180deg, rgba(232, 232, 232, 0.05) 0%, transparent 100%); } /* ===== CORAL VIBES ===== */ body.theme-coral { --bg-primary: #4a2a3a; --bg-secondary: #5f3651; --bg-tertiary: #734a67; --surface: #603855; --surface-hover: #6f4463; --surface-light: #805575; --text-primary: #fff0f5; --text-secondary: #f5d4e0; --text-muted: #dab0c8; --brand: #ff6b8c; --brand-hover: #ff7fa0; --brand-dark: #ff4a75; --accent-1: #ff8ca8; --accent-2: #ffa8d2; --accent-3: #ffb84d; --border: #6a4a62; --border-light: #7a5a72; --shadow-sm: 0 4px 12px rgba(255, 107, 140, 0.08); --shadow-md: 0 10px 30px rgba(255, 107, 140, 0.12); --shadow-lg: 0 20px 60px rgba(255, 107, 140, 0.2); } body.theme-coral .hero { background: linear-gradient(180deg, rgba(255, 107, 140, 0.1) 0%, transparent 100%); } /* ===== BACKGROUND GRID ADAPTATION ===== */ .background-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); } /* ===== GRADIENT BG SHAPES ADAPTATION ===== */ body.theme-dark-blue .bg-shape-1 { background: rgba(0, 212, 255, 0.15); } body.theme-dark-blue .bg-shape-2 { background: rgba(255, 107, 157, 0.15); } body.theme-purple .bg-shape-1 { background: rgba(192, 65, 255, 0.15); } body.theme-purple .bg-shape-2 { background: rgba(255, 77, 168, 0.15); } body.theme-green .bg-shape-1 { background: rgba(0, 217, 125, 0.15); } body.theme-green .bg-shape-2 { background: rgba(255, 107, 157, 0.15); } body.theme-sunset .bg-shape-1 { background: rgba(255, 107, 59, 0.15); } body.theme-sunset .bg-shape-2 { background: rgba(255, 77, 122, 0.15); } body.theme-ocean .bg-shape-1 { background: rgba(0, 169, 224, 0.15); } body.theme-ocean .bg-shape-2 { background: rgba(0, 230, 255, 0.15); } body.theme-gold .bg-shape-1 { background: rgba(212, 167, 69, 0.15); } body.theme-gold .bg-shape-2 { background: rgba(255, 181, 93, 0.15); } body.theme-midnight .bg-shape-1 { background: rgba(255, 255, 255, 0.05); } body.theme-midnight .bg-shape-2 { background: rgba(240, 230, 140, 0.05); } body.theme-coral .bg-shape-1 { background: rgba(255, 107, 140, 0.15); } body.theme-coral .bg-shape-2 { background: rgba(255, 168, 210, 0.15); }