/* ──────────────────────────────────────────────────────────── Sydney Watch Plug — theme switching. The site defaults to the dark showroom palette (tokens/colors.css). Adding data-theme="light" on re-maps every semantic token to a warm daylight palette. A tiny inline script in each page's applies the saved choice before first paint. ──────────────────────────────────────────────────────────── */ :root { /* theme-dependent values that used to be hardcoded inline */ --nav-scrim: rgba(7, 7, 7, 0.85); /* scrolled navbar backdrop */ --section-tint: rgba(17, 17, 17, 0.4); /* contact / cta band */ --placeholder-icon: rgba(255, 255, 255, 0.13); /* watch glyph on empty photos */ } html[data-theme="light"] { /* surfaces: warm paper instead of ink */ --background: #f7f6f2; --foreground: #17160f; --surface-card: #ffffff; --surface-card-foreground: #1a1913; --surface-popover: #ffffff; --surface-sidebar: #f0eee8; --surface-muted: #edebe4; --surface-secondary: #edebe4; --text-body: #17160f; --text-muted: #676659; --text-on-gold: #ffffff; /* gold deepens so it keeps contrast on paper */ --gold-500: #8a6d1e; --gold-300: #6f5717; --gold-tint: rgba(138, 109, 30, 0.1); --gold-line: rgba(138, 109, 30, 0.32); --accent: var(--gold-500); --accent-hover: var(--gold-300); --accent-fill: var(--gold-tint); --accent-border: var(--gold-line); --accent-foreground: var(--gold-500); --border: rgba(23, 22, 15, 0.1); --border-input: rgba(23, 22, 15, 0.18); --border-strong: rgba(23, 22, 15, 0.32); --ring: var(--gold-500); --destructive: #c23934; --danger: #c23934; --status-available: #23744c; --status-available-bg: rgba(35, 116, 76, 0.1); --status-available-border: rgba(35, 116, 76, 0.35); --status-reserved: #8a6d1e; --status-reserved-bg: rgba(138, 109, 30, 0.1); --status-reserved-border: rgba(138, 109, 30, 0.35); --status-sold: #5f6570; --status-sold-bg: rgba(95, 101, 112, 0.1); --status-sold-border: rgba(95, 101, 112, 0.3); --placeholder-from: #e9e6dd; --placeholder-via: #dfdcd2; --placeholder-to: #d5d2c8; --nav-scrim: rgba(247, 246, 242, 0.88); --section-tint: rgba(23, 22, 15, 0.04); --placeholder-icon: rgba(23, 22, 15, 0.22); } /* the pages define dark scrollbars; re-skin them in daylight */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #eceae3; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8c5bb; border-radius: 8px; }