/* =========================================================== * Building Guessr - shared theme tokens * Dark theme is default. Add data-theme="light" on to flip. * =========================================================== */ :root, :root[data-theme="dark"] { /* Surfaces */ --bg-dark: #0f0f1a; --bg-card: #1a1a2e; --bg-surface: #16213e; --bg-elevated: #1f2b47; /* Text */ --text: #e8e6e3; --text-dim: #a8aab2; --text-muted: #7a7c84; /* Brand accent */ --accent: #e2b04a; --accent-strong: #f3c462; --accent-dim: rgba(226, 176, 74, 0.15); --accent-glow: rgba(226, 176, 74, 0.3); /* Status */ --success: #4ade80; --warning: #fbbf24; --danger: #f87171; /* Soft fills used across overlays/borders */ --border-soft: rgba(255, 255, 255, 0.08); --border-softer: rgba(255, 255, 255, 0.06); --surface-soft: rgba(255, 255, 255, 0.08); --surface-softer: rgba(255, 255, 255, 0.04); --surface-strong: rgba(255, 255, 255, 0.15); /* Scrims behind HUD/controls/overlays. Scrim sits on top of the image. */ --scrim-strong: rgba(0, 0, 0, 0.85); --scrim: rgba(0, 0, 0, 0.6); --scrim-soft: rgba(0, 0, 0, 0.4); --overlay-bg: rgba(0, 0, 0, 0.75); --overlay-bg-soft: rgba(0, 0, 0, 0.5); /* Image viewport background gradient */ --img-bg-1: #0a0a14; --img-bg-2: #12121f; /* HUD pill backgrounds (read on top of image) */ --hud-pill-bg: rgba(255, 255, 255, 0.18); --hud-pill-bg-strong: rgba(255, 255, 255, 0.28); /* Shadows */ --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45); /* Radii */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; /* Theme color (browser chrome) */ --browser-theme: #1a1a2e; color-scheme: dark; } :root[data-theme="light"] { /* Surfaces - warm cream / paper */ --bg-dark: #f5f1e8; --bg-card: #ffffff; --bg-surface: #efe9d9; --bg-elevated: #e6dec8; /* Text - high contrast on cream */ --text: #1a1a2e; --text-dim: #44495a; --text-muted: #707381; /* Brand accent - darkened for AA contrast on white */ --accent: #8a6418; --accent-strong: #6f4f10; --accent-dim: rgba(138, 100, 24, 0.16); --accent-glow: rgba(138, 100, 24, 0.28); /* Status - darker tones for light backgrounds */ --success: #15803d; --warning: #b45309; --danger: #b91c1c; /* Soft fills now in the dark direction so borders stay visible on white */ --border-soft: rgba(26, 26, 46, 0.14); --border-softer: rgba(26, 26, 46, 0.08); --surface-soft: rgba(26, 26, 46, 0.05); --surface-softer: rgba(26, 26, 46, 0.03); --surface-strong: rgba(26, 26, 46, 0.10); /* Scrims invert: light scrims on top of image so HUD text stays dark */ --scrim-strong: rgba(255, 255, 255, 0.92); --scrim: rgba(255, 255, 255, 0.78); --scrim-soft: rgba(255, 255, 255, 0.55); --overlay-bg: rgba(255, 255, 255, 0.9); --overlay-bg-soft: rgba(255, 255, 255, 0.75); /* Image viewport background gradient */ --img-bg-1: #efe9d9; --img-bg-2: #e0d8c2; /* HUD pills - darker so they read on the image */ --hud-pill-bg: rgba(26, 26, 46, 0.55); --hud-pill-bg-strong: rgba(26, 26, 46, 0.7); /* Shadows softer */ --shadow-md: 0 4px 16px rgba(26, 26, 46, 0.12); --shadow-lg: 0 8px 32px rgba(26, 26, 46, 0.18); --browser-theme: #f5f1e8; color-scheme: light; } /* When the HUD/scrim sits on top of the in-game image, we want HUD text * (score, timer, etc.) to be white in dark mode and white-on-dark-pill * in light mode. The pill background already inverts for light, but the * text should always read as bright. We expose a fixed --hud-text token. */ :root, :root[data-theme="dark"] { --hud-text: #ffffff; } :root[data-theme="light"] { --hud-text: #ffffff; } /* ==== Theme toggle button shared style (works in any header) ==== */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface-soft); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; font-family: inherit; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .theme-toggle:hover { background: var(--surface-strong); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* HUD-style toggle (translucent, inside game HUD) */ .theme-toggle.hud-style { background: var(--hud-pill-bg); color: var(--hud-text); backdrop-filter: blur(8px); } .theme-toggle.hud-style:hover { background: var(--hud-pill-bg-strong); }