/* ================================================================ THEMES — CSS custom properties for 4 wedding themes Applied via data-theme attribute on ================================================================ */ /* ── 1. Elegant Gold & White ──────────────────────────────────── */ [data-theme="elegant-gold"] { --bg: #fffdf7; --bg-alt: #f9f4e8; --primary: #c9a84c; --primary-dark: #a07830; --primary-light:#e8d5a3; --text: #2c2c2c; --text-light: #7a6848; --text-inv: #fffdf7; --border: rgba(201,168,76,.25); --card-bg: #ffffff; --shadow: 0 4px 28px rgba(201,168,76,.13); --hero-gradient:linear-gradient(160deg,#1e160a 0%,#3d2b10 50%,#241a08 100%); --hero-text: #f5e6c0; --overlay: rgba(30,20,8,.52); --event-overlay:rgba(30,20,8,.48); --accent-rgb: 201,168,76; } /* ── 2. Soft Pastel ───────────────────────────────────────────── */ [data-theme="soft-pastel"] { --bg: #fdf7f4; --bg-alt: #f5ebe6; --primary: #c47d7a; --primary-dark: #9e5855; --primary-light:#f0c4bd; --text: #4a3728; --text-light: #8c6d5f; --text-inv: #fdf7f4; --border: rgba(196,125,122,.22); --card-bg: #fff9f7; --shadow: 0 4px 28px rgba(196,125,122,.12); --hero-gradient:linear-gradient(160deg,#3a2520 0%,#6a3a38 50%,#452a28 100%); --hero-text: #f8e0dc; --overlay: rgba(58,37,32,.52); --event-overlay:rgba(58,37,32,.45); --accent-rgb: 196,125,122; } /* ── 3. Luxe Black & Gold ─────────────────────────────────────── */ [data-theme="luxe-black"] { --bg: #0e0e0e; --bg-alt: #181818; --primary: #d4af37; --primary-dark: #b89020; --primary-light:#2e2512; --text: #f0e8d0; --text-light: #a08858; --text-inv: #0e0e0e; --border: rgba(212,175,55,.2); --card-bg: #1a1a1a; --shadow: 0 4px 28px rgba(212,175,55,.08); --hero-gradient:linear-gradient(160deg,#050505 0%,#1a1505 50%,#080808 100%); --hero-text: #e8d5a0; --overlay: rgba(0,0,0,.6); --event-overlay:rgba(0,0,0,.55); --accent-rgb: 212,175,55; } /* ── 4. Natural Green & Beige ─────────────────────────────────── */ [data-theme="natural-green"] { --bg: #f5f0e8; --bg-alt: #eae3d3; --primary: #5a7a4a; --primary-dark: #3d5c32; --primary-light:#c5d5b5; --text: #3d3529; --text-light: #6b5d4f; --text-inv: #f5f0e8; --border: rgba(90,122,74,.22); --card-bg: #faf7f0; --shadow: 0 4px 28px rgba(90,122,74,.12); --hero-gradient:linear-gradient(160deg,#1e2818 0%,#384e28 50%,#253020 100%); --hero-text: #ddeacc; --overlay: rgba(30,40,24,.52); --event-overlay:rgba(30,40,24,.48); --accent-rgb: 90,122,74; }