/* ============================================================ PROJECT PERSONALITY (Layer 3) Brand palette + per-page accent mapping. A project page sets data-project on to adopt its accent; the foundation's --brand/--accent then resolve to these. Style themes never overwrite --brand, so project colour survives any look. ============================================================ */ :root{ --brand-zupee:#FFD02F; --brand-zupee-deep:#5B23D6; --on-brand-zupee:#0E0E0E; --brand-shopdeck:#2D7FF7; --brand-shopdeck-deep:#1B5FD0;--on-brand-shopdeck:#FFFFFF; --navy:#0C1E3C; /* legacy aliases so existing markup keeps working */ --zupee:var(--brand-zupee); --zupee-deep:var(--brand-zupee-deep); --shopdeck:var(--brand-shopdeck); } [data-project="zupee"] { --brand:var(--brand-zupee); --brand-deep:var(--brand-zupee-deep); --on-brand:var(--on-brand-zupee); --accent:var(--brand-zupee); --accent-deep:var(--brand-zupee-deep); --on-accent:var(--on-brand-zupee); } [data-project="shopdeck"]{ --brand:var(--brand-shopdeck); --brand-deep:var(--brand-shopdeck-deep); --on-brand:var(--on-brand-shopdeck); --accent:var(--brand-shopdeck); --accent-deep:var(--brand-shopdeck-deep); --on-accent:var(--on-brand-shopdeck); }