/* =========================================================================== Khy Physio — THEME TOKENS (change the site's colours here) --------------------------------------------------------------------------- How it works: • Every colour is defined ONCE below as an RGB channel triplet (e.g. "156 94 44"). • The Tailwind config (in includes/header.php) maps each colour name to rgb(var(--xxx-rgb) / ) so utility classes like bg-grn text-ink bg-grn/15 border-cream/20 all read from these variables — including opacity modifiers. • theme.css uses the same variables, so the whole site re-skins from one place. TO CHANGE THE PALETTE: • Quick tweak -> edit the :root values below. • Whole new look -> copy the :root block to a :root[data-theme="name"] block (see "Harbour" example), then set 'theme' => 'name' in config.php. The attribute (set from config) activates it. =========================================================================== */ :root, :root[data-theme="clay"] { /* ---- Clay (default) — warm earthy brand ---- */ --cream-rgb: 244 239 229; /* page background */ --cream-deep-rgb: 234 223 204; /* alt section background */ --ink-rgb: 42 26 14; /* headings, borders, dark UI */ --ink-soft-rgb: 92 71 51; /* secondary headings/text */ --body-rgb: 107 86 64; /* body copy */ --grn-rgb: 156 94 44; /* primary accent / buttons */ --grn-dark-rgb: 126 74 32; /* accent (darker) */ --grn-light-rgb: 216 174 124; /* accent (light, on dark) */ --grn-hover-rgb: 177 110 54; /* primary button hover */ --amber-rgb: 200 137 63; /* marker highlight, stars */ --night-rgb: 36 23 16; /* dark sections */ --night-deep-rgb: 22 13 7; /* footer / deepest dark */ --line-rgb: 218 205 182; /* hairlines */ --card-rgb: 255 255 255; /* card surfaces */ } /* ---- Harbour (example alternate theme — cool & coastal) ---- Activate with 'theme' => 'harbour' in config.php. Duplicate this block, rename, and tweak to add your own themes. */ :root[data-theme="harbour"] { --cream-rgb: 238 242 244; --cream-deep-rgb: 221 229 233; --ink-rgb: 20 32 43; --ink-soft-rgb: 58 74 87; --body-rgb: 74 90 102; --grn-rgb: 31 111 139; --grn-dark-rgb: 21 80 99; --grn-light-rgb: 143 188 203; --grn-hover-rgb: 42 137 168; --amber-rgb: 242 183 5; --night-rgb: 15 25 34; --night-deep-rgb: 10 17 24; --line-rgb: 201 214 221; --card-rgb: 255 255 255; } /* ---- Navy (white, black, navy & light baby blue) ---- Activate from the Customizer: Colours / Theme → "Navy". */ :root[data-theme="navy"] { --cream-rgb: 255 255 255; /* page background (white) */ --cream-deep-rgb: 224 240 252; /* alt sections (baby blue) */ --ink-rgb: 17 24 39; /* headings, borders (black) */ --ink-soft-rgb: 30 41 59; --body-rgb: 51 65 85; --grn-rgb: 30 58 95; /* primary accent (navy) */ --grn-dark-rgb: 20 41 69; --grn-light-rgb: 147 197 253; /* light baby blue (on dark) */ --grn-hover-rgb: 42 79 122; --amber-rgb: 56 189 248; /* highlight (sky blue) */ --night-rgb: 17 34 64; --night-deep-rgb: 11 23 41; --line-rgb: 205 221 238; --card-rgb: 255 255 255; } /* Solid-colour convenience variables (used by theme.css for non-alpha values). These derive from the channel triplets above, so they follow the active theme. */ :root { --cream: rgb(var(--cream-rgb)); --cream-deep: rgb(var(--cream-deep-rgb)); --ink: rgb(var(--ink-rgb)); --ink-soft: rgb(var(--ink-soft-rgb)); --body: rgb(var(--body-rgb)); --grn: rgb(var(--grn-rgb)); --grn-dark: rgb(var(--grn-dark-rgb)); --grn-light: rgb(var(--grn-light-rgb)); --grn-hover: rgb(var(--grn-hover-rgb)); --amber: rgb(var(--amber-rgb)); --night: rgb(var(--night-rgb)); --night-deep: rgb(var(--night-deep-rgb)); --line: rgb(var(--line-rgb)); --card: rgb(var(--card-rgb)); }