/* * PuzzledPuzzles — Light Mode Theme * Activates when has the class "light-mode" * All dark :root variables are overridden here. */ body.light-mode { /* Backgrounds */ --bg-deep: #f2f0f8; --bg-card: #ffffff; --bg-cell: #eae7f5; --bg-dark: #e5e2f0; --bg-secondary: #ece9f8; --bg-tertiary: #e0ddf2; /* Accent (gold — slightly deepened for light-bg contrast) */ --accent: #a87b20; --accent-light: #c9a54e; --accent-glow: rgba(168, 123, 32, 0.22); --accent-solid: #a87b20; /* Text */ --text: #1c1833; --text-primary: #1c1833; --text-muted: #5c5470; --text-secondary: #5c5470; /* Borders & grid */ --border: rgba(168, 123, 32, 0.22); --grid-color: rgba(168, 123, 32, 0.07); /* Status */ --correct: #15803d; --success: #15803d; --error: #dc2626; /* Rank medals */ --gold: #a87b20; --silver: #6b7280; --bronze: #92400e; /* Misc */ --locked: #a1a1aa; --premium: #a87b20; --purple: #7c3aed; --purple-glow: rgba(124, 58, 237, 0.18); --ad-bg: #ede9f8; --ad-border: rgba(168, 123, 32, 0.28); } /* ── Body & global ── */ body.light-mode { background: var(--bg-deep); color: var(--text); } /* Subtle grid lines — keep the brand feel, just lighter */ body.light-mode::before { background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 60px 60px; } /* ── Toggle button ── */ #theme-toggle-btn { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; outline: none; -webkit-tap-highlight-color: transparent; } #theme-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); border-color: var(--accent); } /* Dark mode: dark button background */ body:not(.light-mode) #theme-toggle-btn { background: #1e1b2e; border-color: rgba(201, 165, 78, 0.25); color: #e8e4f0; } /* Light mode: white button background */ body.light-mode #theme-toggle-btn { background: #ffffff; border-color: rgba(168, 123, 32, 0.28); color: #1c1833; } /* ── Correct tile outline — light mode fix ── */ /* Dark mode uses bright #4ade80 at 0.7 opacity (vivid on dark tiles). Light mode needs full opacity + thicker border so the darker green #15803d is clearly visible against light-background tile images. */ body.light-mode .puzzle-tile.correct::after { border-width: 3px; opacity: 1; box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.4); }