/* ================================================================== THEMES — each overrides the same variable NAMES the site already uses (--navy-*, --copper-*, --paper, etc.), so no other CSS changes. A theme is selected by data-theme="..." on , set by the Worker from the value saved in the admin panel. The default (:root in style.css) is "navy-copper". Selecting that in the panel simply omits the attribute, so the base values apply. Each theme sets: dark brand ramp --navy-900..600 (darkest -> mid) cool neutrals --steel-500, --slate-400/200/100, --paper accent ramp --copper-600..100 ink --ink, --ink-soft fonts --font, --font-display The variable names stay "navy"/"copper" for continuity; the values are what change. ================================================================== */ /* ---- 2 · Slate & Blue — cooler, cleaner, modern HVAC ---- */ [data-theme="slate-blue"] { --navy-900: #0b1a2b; --navy-800: #12293f; --navy-700: #1d3d59; --navy-600: #2a5580; --steel-500: #5c748f; --slate-400: #8598ac; --slate-200: #d9e0e9; --slate-100: #eef1f6; --paper: #f6f8fb; --copper-600: #1f6fb2; --copper-500: #2f8fd6; --copper-400: #5aa9e2; --copper-100: #e4f1fb; --ink: #15263a; --ink-soft: #46586c; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Archivo", "Inter", sans-serif; } /* ---- 3 · Forest & Brass — premium, established ---- */ [data-theme="forest-brass"] { --navy-900: #0c1f16; --navy-800: #123024; --navy-700: #1c4635; --navy-600: #2a6349; --steel-500: #5d7a6c; --slate-400: #8a9d92; --slate-200: #d9e2db; --slate-100: #eef2ee; --paper: #f6f9f5; --copper-600: #a9781f; --copper-500: #c99a3a; --copper-400: #ddb968; --copper-100: #f7eed9; --ink: #16271d; --ink-soft: #46574d; --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Fraunces", Georgia, serif; } /* ---- 4 · Charcoal & Amber — bold, high-contrast ---- */ [data-theme="charcoal-amber"] { --navy-900: #101012; --navy-800: #1a1a1e; --navy-700: #2a2a30; --navy-600: #3d3d45; --steel-500: #6f6f79; --slate-400: #9a9aa3; --slate-200: #e0e0e4; --slate-100: #f0f0f2; --paper: #f7f7f8; --copper-600: #cc7a10; --copper-500: #f0971c; --copper-400: #f7b352; --copper-100: #fdefd7; --ink: #17171a; --ink-soft: #4b4b52; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Oswald", "Inter", sans-serif; } /* ---- 5 · Deep Teal & Coral — friendly, approachable ---- */ [data-theme="teal-coral"] { --navy-900: #06232a; --navy-800: #0a343d; --navy-700: #114c58; --navy-600: #1a6b7a; --steel-500: #4f7d85; --slate-400: #7f9da4; --slate-200: #d5e2e4; --slate-100: #ecf3f4; --paper: #f4faf9; --copper-600: #d1502f; --copper-500: #f26a45; --copper-400: #f8916f; --copper-100: #fde7df; --ink: #10292e; --ink-soft: #435b60; --font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Bricolage Grotesque", "Inter", sans-serif; }