/* Premier Taxis Salisbury — shared theme system Used by both the public site (css/style.css) and the dashboard (dashboard/css/dashboard.css). Two independent choices: 1. Mode — data-theme="light" | "dim" | "lights-out" (background/surface/text) 2. Accent — data-accent="amber" | "blue" | "purple" | "pink" | "green" | "red" (highlight color) Both are set on by js/theme.js and persisted in localStorage. --navy / --navy-light stay constant across modes — that's brand chrome (header, hero, footer), not something that should invert like content does. */ :root { --navy: #0F2438; --navy-light: #1B3A57; --radius: 14px; --max-width: 1140px; /* Fixed white for text/icons that sit on permanently-dark brand chrome (header, hero, footer, booking section) — these don't invert with the light/dim/lights-out mode, unlike --surface and --text. */ --on-dark: #FFFFFF; } /* ---------- Modes ---------- */ [data-theme="light"] { --bg: #F7F8FA; --surface: #FFFFFF; --surface-alt: #F1F3F6; --text: #1F2937; --muted: #64748B; --border: #E5E9EF; --shadow: 0 10px 30px -12px rgba(15, 36, 56, 0.18); --shadow-sm: 0 2px 8px rgba(15, 36, 56, 0.06); --success: #1E8E5A; --success-bg: #EAF7EF; --error: #DC2626; --error-bg: #FDECEC; --warning: #B45309; --warning-bg: #FEF3C7; } [data-theme="dim"] { --bg: #15202B; --surface: #1E2732; --surface-alt: #253341; --text: #E7ECF1; --muted: #8899A6; --border: #38444D; --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --success: #3DD68C; --success-bg: rgba(61, 214, 140, 0.12); --error: #F87171; --error-bg: rgba(248, 113, 113, 0.12); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, 0.12); } [data-theme="lights-out"] { --bg: #000000; --surface: #111417; --surface-alt: #17191D; --text: #ECEFF3; --muted: #71767B; --border: #23262B; --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); --success: #3DD68C; --success-bg: rgba(61, 214, 140, 0.1); --error: #F87171; --error-bg: rgba(248, 113, 113, 0.1); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, 0.1); } /* ---------- Accents ---------- */ [data-accent="amber"] { --accent: #F5A623; --accent-dark: #D6890A; --accent-contrast: #0F2438; --accent-soft: rgba(245, 166, 35, 0.14); } [data-accent="blue"] { --accent: #3B82F6; --accent-dark: #2563EB; --accent-contrast: #FFFFFF; --accent-soft: rgba(59, 130, 246, 0.14); } [data-accent="purple"]{ --accent: #8B5CF6; --accent-dark: #7C3AED; --accent-contrast: #FFFFFF; --accent-soft: rgba(139, 92, 246, 0.14); } [data-accent="pink"] { --accent: #F43F6E; --accent-dark: #D92858; --accent-contrast: #FFFFFF; --accent-soft: rgba(244, 63, 110, 0.14); } [data-accent="green"] { --accent: #10B981; --accent-dark: #059669; --accent-contrast: #FFFFFF; --accent-soft: rgba(16, 185, 129, 0.14); } [data-accent="red"] { --accent: #EF4444; --accent-dark: #DC2626; --accent-contrast: #FFFFFF; --accent-soft: rgba(239, 68, 68, 0.14); } /* ---------- Theme picker widget (shared markup, injected by theme.js) ---------- */ .theme-picker { position: relative; } /* Default styling assumes the button sits on permanently-dark brand chrome (the public site header). The dashboard topbar's background changes with the theme, so dashboard.css overrides this to stay adaptive there. */ .theme-picker-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; } .theme-picker-btn:hover { background: rgba(255, 255, 255, 0.22); } .theme-picker-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 250px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px; z-index: 500; display: none; } .theme-picker-panel.open { display: block; } .theme-picker-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; } .theme-picker-label:not(:first-child) { margin-top: 16px; } .theme-mode-options { display: flex; flex-direction: column; gap: 6px; } .theme-mode-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.86rem; font-weight: 500; cursor: pointer; text-align: left; } .theme-mode-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 700; } .theme-mode-btn .check { color: var(--accent); opacity: 0; } .theme-mode-btn[aria-pressed="true"] .check { opacity: 1; } .theme-accent-options { display: flex; gap: 10px; flex-wrap: wrap; } .theme-accent-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; } .theme-accent-swatch[aria-pressed="true"] { border-color: var(--text); } .theme-accent-swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid var(--surface); }