/* ============================================================ homehogs — user-selectable accent themes. The default is the brand blossom pink and lives in tokens.css; a user on the default has NO data-accent attribute, so the brand renders byte-identical to before. Each rule below repaints only the ACCENT family (buttons, links, focus, accent text and icons, accent-soft fills). It deliberately leaves --hc-brand alone, so the header logo lockup stays the brand pink. Selection is driven by data-accent on , set server-side from the user's saved choice, so there is no colour flash on load. Each theme is defined by just two hand-picked base colours, one for light mode and one for dark, chosen to sit in the same contrast band as the brand pink on both the near-white and the dark-navy surface (see the palette validation that accompanied this work). hover/soft/on-accent are then derived with the SAME color-mix relationships tokens.css uses for the brand, so a new theme needs no further tuning. To add one: pick a light base and a dark base, clone a block. ============================================================ */ /* ---- Light mode -------------------------------------------------------- */ :root[data-accent="coral"] { --hc-accent: #e7623f; --hc-accent-hover: color-mix(in srgb, #e7623f 85%, var(--hc-ink)); --hc-accent-soft: color-mix(in srgb, #e7623f 12%, #ffffff); --hc-on-accent: #ffffff; } :root[data-accent="amber"] { --hc-accent: #bd7f12; --hc-accent-hover: color-mix(in srgb, #bd7f12 85%, var(--hc-ink)); --hc-accent-soft: color-mix(in srgb, #bd7f12 12%, #ffffff); --hc-on-accent: #ffffff; } :root[data-accent="teal"] { --hc-accent: #1c9aa6; --hc-accent-hover: color-mix(in srgb, #1c9aa6 85%, var(--hc-ink)); --hc-accent-soft: color-mix(in srgb, #1c9aa6 12%, #ffffff); --hc-on-accent: #ffffff; } :root[data-accent="ocean"] { --hc-accent: #3f7fd0; --hc-accent-hover: color-mix(in srgb, #3f7fd0 85%, var(--hc-ink)); --hc-accent-soft: color-mix(in srgb, #3f7fd0 12%, #ffffff); --hc-on-accent: #ffffff; } :root[data-accent="indigo"] { --hc-accent: #6d6be0; --hc-accent-hover: color-mix(in srgb, #6d6be0 85%, var(--hc-ink)); --hc-accent-soft: color-mix(in srgb, #6d6be0 12%, #ffffff); --hc-on-accent: #ffffff; } :root[data-accent="grape"] { --hc-accent: #9f57c9; --hc-accent-hover: color-mix(in srgb, #9f57c9 85%, var(--hc-ink)); --hc-accent-soft: color-mix(in srgb, #9f57c9 12%, #ffffff); --hc-on-accent: #ffffff; } /* ---- Dark mode -------------------------------------------------------- A lighter base per theme so the accent reads on the dark-navy surface, with dark text on filled buttons — mirroring how tokens.css treats the brand pink in dark mode. soft is a dark, low-chroma tint of the surface. */ @media (prefers-color-scheme: dark) { :root[data-accent="coral"] { --hc-accent: #f6977a; --hc-accent-hover: color-mix(in srgb, #f6977a 80%, #ffffff); --hc-accent-soft: color-mix(in srgb, #f6977a 22%, var(--hc-surface)); --hc-on-accent: #0f1828; } :root[data-accent="amber"] { --hc-accent: #ecbb55; --hc-accent-hover: color-mix(in srgb, #ecbb55 80%, #ffffff); --hc-accent-soft: color-mix(in srgb, #ecbb55 22%, var(--hc-surface)); --hc-on-accent: #0f1828; } :root[data-accent="teal"] { --hc-accent: #56c7d0; --hc-accent-hover: color-mix(in srgb, #56c7d0 80%, #ffffff); --hc-accent-soft: color-mix(in srgb, #56c7d0 22%, var(--hc-surface)); --hc-on-accent: #0f1828; } :root[data-accent="ocean"] { --hc-accent: #7fb0f0; --hc-accent-hover: color-mix(in srgb, #7fb0f0 80%, #ffffff); --hc-accent-soft: color-mix(in srgb, #7fb0f0 22%, var(--hc-surface)); --hc-on-accent: #0f1828; } :root[data-accent="indigo"] { --hc-accent: #a3a0f2; --hc-accent-hover: color-mix(in srgb, #a3a0f2 80%, #ffffff); --hc-accent-soft: color-mix(in srgb, #a3a0f2 22%, var(--hc-surface)); --hc-on-accent: #0f1828; } :root[data-accent="grape"] { --hc-accent: #c88fe6; --hc-accent-hover: color-mix(in srgb, #c88fe6 80%, #ffffff); --hc-accent-soft: color-mix(in srgb, #c88fe6 22%, var(--hc-surface)); --hc-on-accent: #0f1828; } }