/* ========================================================================== EVISCHURCH — Centralized color system Single source of truth for all accent colors. Loads LAST so it overrides every other CSS file. To rebrand or theme an environment, edit ONLY --primary / --primary-dark / --primary-light below (or in the body.env-* override at the bottom). Every opacity variant (--primary-soft, --primary-06, --primary-22, ...) and every module alias (--academy-primary, --gc-accent, --landing-accent, calendar events, buttons, ...) is derived from those 3 values via color-mix(), so nothing else needs to be touched or kept in sync by hand. ========================================================================== */ /* Declared on `body` (not `:root`) on purpose: custom properties are "frozen" to their resolved value where they're declared, then simply inherit downward. If these lived on :root (the element, a PARENT of ), body.env-dev overriding --primary would NOT retroactively recompute --landing-accent / --primary-soft / etc., since they'd already be locked to the :root value. Declaring them on the same `body` element that env-dev targets means var() resolves against the final per-element cascade, so it responds correctly to body.env-dev below. */ body { /* Brand color - Brun église palette. Change these 3 and everything below recomputes automatically. */ --primary: #B89A7A; --primary-dark: #8B6E55; --primary-light: #D4B5A0; /* Opacity washes, derived from --primary — do not hardcode rgba() here */ --primary-soft: color-mix(in srgb, var(--primary) 10%, transparent); --primary-soft-2: color-mix(in srgb, var(--primary) 16%, transparent); --primary-border: color-mix(in srgb, var(--primary) 18%, transparent); --primary-bg: color-mix(in srgb, var(--primary) 8%, transparent); --primary-03: color-mix(in srgb, var(--primary) 3%, transparent); --primary-06: color-mix(in srgb, var(--primary) 6%, transparent); --primary-12: color-mix(in srgb, var(--primary) 12%, transparent); --primary-15: color-mix(in srgb, var(--primary) 15%, transparent); --primary-20: color-mix(in srgb, var(--primary) 20%, transparent); --primary-22: color-mix(in srgb, var(--primary) 22%, transparent); --primary-24: color-mix(in srgb, var(--primary) 24%, transparent); --primary-28: color-mix(in srgb, var(--primary) 28%, transparent); --primary-30: color-mix(in srgb, var(--primary) 30%, transparent); --primary-40: color-mix(in srgb, var(--primary) 40%, transparent); --primary-50: color-mix(in srgb, var(--primary) 50%, transparent); --primary-55: color-mix(in srgb, var(--primary) 55%, transparent); --primary-78: color-mix(in srgb, var(--primary) 78%, transparent); --primary-85: color-mix(in srgb, var(--primary) 85%, transparent); /* Calendar event colors */ --event-bg: var(--primary); --event-bg-hover: var(--primary-dark); --event-text: #ffffff; /* Aliases for different modules — all derive from --primary above */ --academy-primary: var(--primary); --academy-primary-soft: var(--primary-06); --academy-primary-border: var(--primary-22); --gc-accent: var(--primary); --gc-accent-hover: var(--primary-light); --gc-accent-soft: var(--primary-06); --gc-accent-border: var(--primary-22); --plan-accent: var(--primary); --plan-accent-hover: var(--primary-light); --plan-accent-soft: var(--primary-06); --plan-accent-border: var(--primary-22); --comm-primary: var(--primary); --comm-primary-soft: var(--primary-soft); --comm-primary-border: var(--primary-border); --landing-accent: var(--primary); --landing-accent-hover: var(--primary-dark); --landing-accent-soft: var(--primary-bg); --landing-accent-border: var(--primary-border); --landing-hero-accent: var(--primary); --env-accent: var(--primary); --env-accent-soft: var(--primary-12); --env-accent-border: var(--primary-24); --env-accent-text: var(--primary-dark); } /* ── Environment theming ────────────────────────────────────────────────── Give a non-production environment (dev/uat/preprod/perso) a visually distinct accent so it's obvious at a glance which one you're on. Only override the 3 core variables — every derived variant above (buttons, calendar events, badges, hovers, ...) recomputes automatically. */ body.env-dev { --primary: #7A3FD6; --primary-dark: #5F2FA8; --primary-light: #B49EE8; }