/* ============================================================ Meow Homez — THEME TOKENS (single source of truth) ------------------------------------------------------------ To rebrand the whole website, edit ONLY this file. • Colours → change the brand palette below • Fonts → change --font-head / --font-body (and the Google Fonts in each page's ) • Shape → radii / shadow This is the ONE theme for the ENTIRE app — the marketing site AND the booking app both load this exact file (same origin, served at /theme.css). Edit colours/fonts here once and every page, the booking form, and the admin all change together. No more editing two files. ============================================================ */ :root{ /* —— brand palette: MIDNIGHT (primary) + BLUSH (accent) —— (var names kept as --teal*/--gold* for compatibility) */ --teal:#22304A; /* primary = midnight navy */ --teal-d:#141E30; /* primary hover / strong (deep navy) */ --teal-dd:#101827; /* darkest (footers, dark bands) = midnight */ --gold:#E9A9B4; /* accent = blush (on dark) */ --gold-d:#B96B7A; /* accent = deep blush (on light) */ --cream:#F4F3F0; /* cool off-white page background */ --ink:#1E2636; /* body text (deep slate) */ --muted:#64707F; /* secondary text */ --line:#E4E2E7; /* hairlines / card borders */ /* —— glass —— */ --glass:rgba(255,255,255,.16); --glass-bd:rgba(255,255,255,.4); /* —— type —— */ --font-head:'Fraunces',Georgia,serif; /* headings + emotional emphasis */ --font-body:'Nunito',-apple-system,sans-serif; /* body + UI */ /* —— shape —— */ --shadow:0 18px 50px rgba(20,26,40,.18); --r:16px; --r-lg:22px; --max:1120px; /* ============================================================ Booking-app token aliases — so the booking form + admin share THIS file. The booking app's CSS uses --mar/--mar2/--wine/--disp etc.; they all point back to the brand primitives above, so a single colour/font change here restyles the booking app too. ============================================================ */ /* NOTE: these booking aliases are FLATTENED to real values (not var(--teal) etc.) because nested custom properties (--mar:var(--teal)) were not resolving in some browsers, causing `background:var(--mar)` to collapse to transparent (white buttons). To rebrand the booking app, edit the hexes/fonts here — keep them in sync with the midnight/blush primitives above (--mar=--teal, --mar2=--teal-d, --wine=--teal-dd). */ --mar:#22304A; /* booking primary = midnight navy (= --teal) */ --mar2:#141E30; /* booking strong = deep navy (= --teal-d) */ --wine:#101827; /* booking darkest = midnight (= --teal-dd) */ --goldS:#EEBEC8; /* soft blush (booking accents) */ --goldP:#F7E6EA; /* pale blush (booking tints) */ --beige:#ECEBE7; /* cool panel tint */ --white:#fff; --inks:#64707F; /* booking secondary text (= --muted) */ --ok:#1D9E75; --bad:#C0392B; /* status colours */ --gr:#22304A; /* gauge/accent (= --teal) */ --disp:'Fraunces',Georgia,serif; /* booking headings = Fraunces */ --body:'Nunito',-apple-system,sans-serif; /* booking body = Nunito */ --rad:18px; --radS:12px; /* booking radii */ --sh:0 14px 40px rgba(20,26,40,.12); }