/* ============================================================ LPJH BRAND TOKEN SYSTEM · The Peak CRTVE Group Two identities, one role contract. • Teton Reserve (--tr-*) — charcoal + gold (PRIMARY, default) • Primary Palette (--pp-*) — navy + sage (secondary) COMPONENTS MUST REFERENCE THE ROLE LAYER (--brand-*) ONLY — never --tr-* or --pp-* directly. The active identity is chosen once at the root; flipping it re-themes the whole site. Active identity: Teton Reserve (default). To switch: set . Source of truth: media/Teton_Reserve_Color_Kit.html + media/Primary_Palette_Color_Kit.html ============================================================ */ :root { /* ═══════════ TETON RESERVE — raw tokens (--tr-*) ═══════════ */ /* Core */ --tr-charcoal:#1C1917; --tr-stone:#44403C; --tr-stone-muted:#78716C; --tr-gold:#A16207; --tr-gold-light:#CA8A04; --tr-gold-pale:#D4A84B; --tr-gold-600:#875206; --tr-cream:#FAFAF8; --tr-linen:#F5F3EF; --tr-canvas:#E8E5E0; --tr-white:#FFFFFF; --tr-body:#3C3836; --tr-border:#E7E5E4; /* Semantic roles */ --tr-bg:#FAFAF8; --tr-surface:#FFFFFF; --tr-surface-alt:#F5F3EF; --tr-surface-sunken:#E8E5E0; --tr-heading:#1C1917; --tr-text:#3C3836; --tr-text-muted:#78716C; --tr-accent:#A16207; --tr-accent-hover:#875206; --tr-accent-subtle:#F0E0BE; --tr-on-accent:#FAFAF8; --tr-focus:#CA8A04; --tr-inverse-bg:#1C1917; --tr-inverse-text:#FAFAF8; /* Type */ --tr-font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif; --tr-font-body:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ═══════════ PRIMARY PALETTE — raw tokens (--pp-*) ═══════════ */ /* Core */ --pp-navy:#002E40; --pp-navy-accent:#274156; --pp-ink:#0A0A0A; --pp-slate:#303030; --pp-teal:#4A5858; --pp-sage:#D9EEE9; --pp-sage-gray:#92A6A1; --pp-ivory:#FFFAF0; --pp-mist:#EBEEEB; --pp-white:#FFFFFF; --pp-canvas:#F3F5F3; --pp-border:#E3E6E4; /* Semantic roles */ --pp-bg:#FFFAF0; --pp-surface:#FFFFFF; --pp-surface-alt:#EBEEEB; --pp-surface-sunken:#F3F5F3; --pp-heading:#0A0A0A; --pp-text:#303030; --pp-text-muted:#4A5858; --pp-accent:#002E40; --pp-accent-hover:#274156; --pp-accent-subtle:#D9EEE9; --pp-on-accent:#FFFAF0; --pp-focus:#274156; --pp-inverse-bg:#002E40; --pp-inverse-text:#EBEEEB; /* Type */ --pp-font-display:"Playfair Display", Georgia, serif; --pp-font-body:"Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ═══════════ BRAND ROLE LAYER (--brand-*) — reference THESE ═══════════ */ /* Default identity = Teton Reserve */ --brand-bg: var(--tr-bg); --brand-surface: var(--tr-surface); --brand-surface-alt: var(--tr-surface-alt); --brand-surface-sunken: var(--tr-surface-sunken); --brand-heading: var(--tr-heading); --brand-text: var(--tr-text); --brand-text-muted: var(--tr-text-muted); --brand-border: var(--tr-border); --brand-accent: var(--tr-accent); --brand-accent-hover: var(--tr-accent-hover); --brand-accent-subtle: var(--tr-accent-subtle); --brand-on-accent: var(--tr-on-accent); --brand-focus: var(--tr-focus); --brand-inverse-bg: var(--tr-inverse-bg); --brand-inverse-text: var(--tr-inverse-text); --brand-font-display: var(--tr-font-display); --brand-font-body: var(--tr-font-body); /* Functional UI states (identity-agnostic, app UI only) */ --brand-success:#4F6F52; --brand-success-bg:#EAF0EA; --brand-warning:#B7791F; --brand-warning-bg:#FBF1DC; --brand-error:#9B3D3D; --brand-error-bg:#F6E7E5; --brand-info:#4A5858; --brand-info-bg:#E6ECEC; /* ═══════════ ELEMENTOR COMPAT SHIM ═══════════ * Owned CSS (VRP luxury templates) still references Elementor's * --e-global-color-* variables. The Elementor kit defines these while the * plugin is active; this shim mirrors them onto the --brand-* role layer so * that REMOVING Elementor does not drop the variables (the site keeps its * colors, and follows the active identity). While Elementor is active its * kit CSS loads later and wins with identical values — no visible change. * Retire this block once all owned CSS references --brand-* directly. */ --e-global-color-primary: var(--brand-heading); --e-global-color-secondary: var(--brand-surface-alt); --e-global-color-text: var(--brand-text); --e-global-color-accent: var(--brand-accent); --e-global-color-2b35b52: var(--brand-bg); } /* ═══════════ IDENTITY TOGGLE → Primary Palette ═══════════ */ :root[data-brand="primary"], [data-brand="primary"] { --brand-bg: var(--pp-bg); --brand-surface: var(--pp-surface); --brand-surface-alt: var(--pp-surface-alt); --brand-surface-sunken: var(--pp-surface-sunken); --brand-heading: var(--pp-heading); --brand-text: var(--pp-text); --brand-text-muted: var(--pp-text-muted); --brand-border: var(--pp-border); --brand-accent: var(--pp-accent); --brand-accent-hover: var(--pp-accent-hover); --brand-accent-subtle: var(--pp-accent-subtle); --brand-on-accent: var(--pp-on-accent); --brand-focus: var(--pp-focus); --brand-inverse-bg: var(--pp-inverse-bg); --brand-inverse-text: var(--pp-inverse-text); --brand-font-display: var(--pp-font-display); --brand-font-body: var(--pp-font-body); }