/* Siteinator — Default Theme Variables Customer overrides via site/theme Firestore doc + loadTheme() in page-renderer.js. */ :root { /* Brand */ --brand-primary: #0A95D7; /* Electric Blue — buttons, links */ --brand-accent: #56F9F3; /* Luminous Cyan — high-energy accents */ --brand-anchor: #0059B3; /* Slipwai Navy — hover states, structure */ /* Backgrounds */ --bg-base: #020817; /* Void Blue — page background */ --bg-surface: #0F172A; /* Slate Hull — cards, sections */ --bg-elevated: #1E293B; /* Steel Wave — elevated elements */ /* Text */ --text-primary: #FFFFFF; --text-secondary: #94A3B8; --text-muted: #64748B; /* Borders — derived from --text-primary so they invert with the theme: a white-translucent line on dark backgrounds, a dark-translucent line on light. CSS variables nesting is supported and re-evaluates at use-site, so swapping --text-primary via loadTheme automatically repaints. */ --border: color-mix(in srgb, var(--text-primary) 10%, transparent); --border-hover: color-mix(in srgb, var(--text-primary) 20%, transparent); /* Shadows stay black-translucent — matches universal real-world shadow direction (sun/lights cast dark shadows regardless of background). */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); /* Status */ --success: #00E676; --warning: #FFD600; --danger: #FF5252; /* Layout — overridable per-customer via site/theme + loadTheme() */ --section-padding: 2rem; /* Typography — theme overrides set these from site/theme via loadTheme(). */ --font-heading: 'Barlow Semi Condensed', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-code: 'JetBrains Mono', monospace; } /* Base reset and defaults */ /* The previous `*, *::before, *::after { box-sizing; margin: 0; padding: 0 }` reset lived here when the page loaded Tailwind via CDN (Tailwind v3 + runtime injection — no strict @layer separation). With Tailwind v4 built to `public/css/tailwind.css`, Preflight already applies the same reset inside `@layer base`, which is the cascade-correct position: utilities like `mx-auto` and `px-6` (in `@layer utilities`) properly override it. Re-introducing the same reset here as unlayered CSS would beat every Tailwind utility regardless of specificity (unlayered > layered in CSS cascade) and collapse every `mx-auto` / `px-*` / `py-*` in the templates. */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Below the body (overscroll bounce, short content) the html element's background is what shows through. Track the footer's theme — when the header / body / footer use different themes, "the rest of the page" past the footer matches the footer rather than reverting to the body background. Falls back to the body bg when the footer isn't themed independently. */ background-color: var(--footer-bg-base, var(--bg-base)); } body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--heading-colour, var(--text-primary)); } code, pre { font-family: var(--font-code); } /* Form inputs — theme-aware focus ring + placeholder colour, replacing the hardcoded Tailwind focus:ring-blue-brand / placeholder-gray-500 utilities that templates used to apply per-input. */ input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand-primary); outline-offset: 2px; } ::placeholder { color: var(--text-muted); opacity: 1; } /* Header / footer theme scoping. The body's active theme writes to the unprefixed --bg-base, --text-primary etc. variables. The header and footer active themes write to --header-* / --footer-* variants. These rules redefine the unprefixed names inside