/* ========================================================= Bet Your Bud — Themes (Royal Badge) File: /assets/css/themes.css Purpose: Theme layers (dark default, light optional), accent variants & background gradients. ========================================================= */ /* ========================================================= DARK THEME (default) Applied via: ========================================================= */ .theme-dark{ /* Core surfaces */ --c-bg: #0B1220; --c-surface: rgba(255,255,255,0.06); --c-surface-2: rgba(255,255,255,0.09); --c-border: rgba(255,255,255,0.12); --c-border-2: rgba(255,255,255,0.18); /* Text */ --c-text: rgba(255,255,255,0.92); --c-text-2: rgba(255,255,255,0.72); --c-text-3: rgba(255,255,255,0.56); /* Page & hero backgrounds */ --bg-page: linear-gradient( 180deg, #0B1220 0%, #0E1730 55%, #0B1220 100% ); --bg-hero: var(--g-hero); /* Card / badge surfaces */ --bg-card: linear-gradient( 180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) ); /* Accents & glow */ --accent-glow: var(--g-glow); --accent-glow-alt: var(--g-glow-2); color-scheme: dark; } /* ========================================================= LIGHT THEME (optional / future) Applied via: ========================================================= */ .theme-light{ --c-bg: #F7F8FC; --c-surface: rgba(16,24,40,0.04); --c-surface-2: rgba(16,24,40,0.06); --c-border: rgba(16,24,40,0.12); --c-border-2: rgba(16,24,40,0.18); --c-text: rgba(16,24,40,0.92); --c-text-2: rgba(16,24,40,0.72); --c-text-3: rgba(16,24,40,0.56); --bg-page: linear-gradient( 180deg, #FFFFFF 0%, #F7F8FC 100% ); --bg-card: linear-gradient( 180deg, #FFFFFF, #F1F3F8 ); --sh-xs: 0 1px 0 rgba(16,24,40,0.04); --sh-sm: 0 6px 20px rgba(16,24,40,0.18); --sh-md: 0 14px 40px rgba(16,24,40,0.22); --sh-lg: 0 22px 64px rgba(16,24,40,0.26); color-scheme: light; } /* ========================================================= AUTO THEME (system preference) Applied via: ========================================================= */ .theme-auto{ color-scheme: light dark; } @media (prefers-color-scheme: light){ .theme-auto{ --c-bg: #F7F8FC; --c-surface: rgba(16,24,40,0.04); --c-surface-2: rgba(16,24,40,0.06); --c-border: rgba(16,24,40,0.12); --c-border-2: rgba(16,24,40,0.18); --c-text: rgba(16,24,40,0.92); --c-text-2: rgba(16,24,40,0.72); --c-text-3: rgba(16,24,40,0.56); --bg-page: linear-gradient( 180deg, #FFFFFF 0%, #F7F8FC 100% ); --bg-card: linear-gradient( 180deg, #FFFFFF, #F1F3F8 ); --sh-xs: 0 1px 0 rgba(16,24,40,0.04); --sh-sm: 0 6px 20px rgba(16,24,40,0.18); --sh-md: 0 14px 40px rgba(16,24,40,0.22); --sh-lg: 0 22px 64px rgba(16,24,40,0.26); } } /* ========================================================= THEME UTILITIES ========================================================= */ /* Generic badge / panel */ .theme-panel{ background: var(--bg-card, var(--c-surface)); border: var(--bw-1) solid var(--c-border); border-radius: var(--r-20); box-shadow: var(--sh-sm); } /* Premium / status panel */ .theme-panel--gold{ border-color: var(--c-border-gold); box-shadow: var(--sh-glow); } /* Page wrapper */ .theme-page{ background: var(--bg-page); } /* Hero wrapper */ .theme-hero{ background: var(--bg-hero); position: relative; overflow: hidden; } /* Theme transition hook */ .theme-transition{ transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }