/* SeatData.io Light/Dark Theme System Uses CSS custom properties with data-theme attribute on . Detection order: localStorage > prefers-color-scheme > light default */ :root { /* Light theme (default) */ --bg-primary: #FFFFFF; --bg-secondary: #F8F9FA; --bg-tertiary: #ECECEC; --text-primary: #3A4554; --text-secondary: #A9ABB8; --text-muted: #6b7280; --border-color: #E5E7EB; --navbar-bg: rgba(255, 255, 255, 0.95); --card-bg: #FFFFFF; --table-row-alt: #F9FAFB; --table-hover: rgba(61, 164, 223, 0.06); --input-bg: #F8F9FA; --input-border: #E5E7EB; --dropdown-bg: #FFFFFF; --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Brand colors (constant) */ --color-coral: #EC5D50; --color-blue: #3DA4DF; --color-slate: #3A4554; /* Demand badges (constant) */ --demand-extreme: #7c3aed; --demand-high: #EC5D50; --demand-moderate: #f97316; --demand-low: #3DA4DF; --demand-none: #6b7280; /* Price color */ --color-price: #16a34a; } [data-theme="dark"] { --bg-primary: #1a1a2e; --bg-secondary: #22223a; --bg-tertiary: #2a2a4a; --text-primary: #FFFFFF; --text-secondary: #888888; --text-muted: #666666; --border-color: #333333; --navbar-bg: rgba(26, 26, 46, 0.95); --card-bg: #22223a; --table-row-alt: #1e1e36; --table-hover: rgba(61, 164, 223, 0.08); --input-bg: #2a2a4a; --input-border: #333333; --dropdown-bg: #22223a; --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --color-price: #4ade80; } /* Smooth theme transition */ html { transition: background-color 0.2s ease, color 0.2s ease; } /* Override Webflow's body color which uses --text-color--text-primary. Use html body for higher specificity than Webflow's body rule. */ html body { background-color: var(--bg-primary); color: var(--text-primary); /* Override Webflow's own variable so inherited elements also get themed */ --text-color--text-primary: var(--text-primary); --link-color--link-primary: var(--color-blue); --background-color--background-primary: var(--bg-primary); }