/* Shared palette for every page. Dark is the default; [data-theme="light"] * on flips the whole app to light mode. Variables are named with the * `--g-` prefix for historical reasons (gallery was the first consumer); * admin-styled pages (admin.css, home.css, trails.css, creator.css, etc.) * read them unchanged. * * Precedence: theme.css MUST be linked before admin.css/gallery.css in each * template so page-specific rules can still override if needed. */ :root { --g-bg: #0b0b0f; --g-panel: #15151d; --g-panel-2: #1e1e28; --g-border: #2a2a36; --g-text: #f5f5f8; --g-text-dim: #9a9ab0; --g-accent: #8e44ad; --g-accent-2: #6c3483; /* Semantic aliases used by light-mode overrides without losing the palette * vocabulary. Dark values mirror the core palette; light mode shifts them. */ --g-danger: #e07f7f; --g-danger-bg: #5a2020; --g-danger-border: #8a3b3b; --g-ok: #7fe085; --g-ok-bg: #1d4a1f; --g-warn: #ffd166; --g-warn-bg: #4a3a1a; --g-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* Explicit dark override so prefers-color-scheme can't sneak in if the * user hasn't chosen. Keeps visual parity when the user-agent flips. */ [data-theme="dark"] { color-scheme: dark; } /* Light mode. Chosen for readable contrast on bright phone screens, not * clinical whiteness. Primary background is a warm off-white so the violet * accent keeps the same visual weight. */ [data-theme="light"] { --g-bg: #fbfaf6; --g-panel: #ffffff; --g-panel-2: #f1eee8; --g-border: #dcd8d0; --g-text: #1a1a22; --g-text-dim: #63636f; --g-accent: #7a39a0; --g-accent-2: #5a1f7c; --g-danger: #c84848; --g-danger-bg: #fbe4e4; --g-danger-border: #e8a8a8; --g-ok: #2b7d3a; --g-ok-bg: #e1f2e3; --g-warn: #a57200; --g-warn-bg: #faf0d4; --g-shadow: 0 2px 8px rgba(60, 40, 90, 0.08); color-scheme: light; } /* Auto-follow OS preference only when the user hasn't explicitly picked. * The theme-init inline script (in every template head) sets data-theme * from localStorage before first paint, so this media query only kicks * in for never-toggled visitors. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --g-bg: #fbfaf6; --g-panel: #ffffff; --g-panel-2: #f1eee8; --g-border: #dcd8d0; --g-text: #1a1a22; --g-text-dim: #63636f; --g-accent: #7a39a0; --g-accent-2: #5a1f7c; --g-danger: #c84848; --g-danger-bg: #fbe4e4; --g-danger-border: #e8a8a8; --g-ok: #2b7d3a; --g-ok-bg: #e1f2e3; --g-warn: #a57200; --g-warn-bg: #faf0d4; color-scheme: light; } } /* Keyboard-visible focus ring — applies globally unless a component opts out. * Using box-shadow instead of outline so it hugs rounded corners. */ :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--g-bg), 0 0 0 4px var(--g-accent); border-radius: inherit; } /* Respect "reduced motion" — we animate in several places. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }