/* ========================================================================== WatchTheStars Theme System Each theme overrides the :root CSS variables used throughout the site. The active theme is set by a data-theme attribute on . If no data-theme is set, the default :root values in styles.css apply. ========================================================================== */ /* -------------------------------------------------------------------------- SCHEME 1: Midnight Navy + Warm Gold/Amber Classic observatory aesthetic — dark navy sky with warm starlight accents. -------------------------------------------------------------------------- */ [data-theme="navy-gold"] { --primary-color: #d4a84b; --primary-dark: #b8923f; --secondary-color: #c49a42; --accent-color: #e8c06a; --dark-blue: #0a1628; --dark-blue-light: #0f1f38; --night-sky: #060e1c; --text-primary: #dce2ea; --text-secondary: #a8b4c4; --text-muted: #6a7a90; --background-light: #0f1f38; --background-white: #0a1628; --background-card: #0f1f38; --border-light: #1a2a45; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------------------- SCHEME 2: Near-Black + Teal/Cyan Modern deep-space feel — evokes nebulae without going purple. -------------------------------------------------------------------------- */ [data-theme="black-teal"] { --primary-color: #4ecdc4; --primary-dark: #3db8b0; --secondary-color: #45b7af; --accent-color: #7ec8e3; --dark-blue: #0d1117; --dark-blue-light: #111820; --night-sky: #080c12; --text-primary: #c8d4de; --text-secondary: #8ea0b0; --text-muted: #506070; --background-light: #111820; --background-white: #0d1117; --background-card: #111820; --border-light: #1c2530; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7); } /* -------------------------------------------------------------------------- SCHEME 3: Dark Slate + Copper/Burnt Orange Warm, earthy tones — sunset horizons and Mars-inspired palette. -------------------------------------------------------------------------- */ [data-theme="slate-copper"] { --primary-color: #e8834a; --primary-dark: #c77040; --secondary-color: #d47842; --accent-color: #f0a870; --dark-blue: #1a1d2e; --dark-blue-light: #1f2336; --night-sky: #141624; --text-primary: #d4d8e4; --text-secondary: #9498ac; --text-muted: #5c6078; --background-light: #1f2336; --background-white: #1a1d2e; --background-card: #1f2336; --border-light: #2a2e42; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------------------- SCHEME 4: Deep Blue-Black + Silver/Cool White Minimalist moonlit aesthetic — lets content and photography shine. -------------------------------------------------------------------------- */ [data-theme="black-silver"] { --primary-color: #c0c7d1; --primary-dark: #a0a8b4; --secondary-color: #b0b8c4; --accent-color: #d8dce6; --dark-blue: #0b0e17; --dark-blue-light: #10141f; --night-sky: #070a10; --text-primary: #c8ced8; --text-secondary: #8890a0; --text-muted: #505868; --background-light: #10141f; --background-white: #0b0e17; --background-card: #10141f; --border-light: #1a1f2e; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7); }