/* ============================================================ TECH SESSIONS · Site tokens Sits on top of assets/eh-foundation.css. Home pages: Edler Hub palette only (navy, yellow, teal, white). Event pages: same base, plus per-event override variables that the client/event admin can customise from the event config. ============================================================ */ :root { /* ---------- Edler Hub working palette --------------------- */ --ts-ink: var(--eh-navy-900); --ts-paper: var(--eh-white); --ts-paper-2: #FAFBFC; --ts-line: var(--eh-navy-100); --ts-line-2: var(--eh-navy-200); --ts-text: var(--eh-navy-800); --ts-text-muted: var(--eh-navy-500); --ts-text-subtle:var(--eh-navy-400); /* Brand roles — default to EH */ --ts-primary: var(--eh-teal-500); /* links / primary actions */ --ts-primary-hover: var(--eh-teal-600); --ts-primary-soft: var(--eh-teal-50); --ts-primary-strong: var(--eh-teal-700); --ts-accent: var(--eh-yellow-500); /* the spark */ --ts-accent-hover: var(--eh-yellow-600); --ts-accent-soft: var(--eh-yellow-50); /* Status tokens — kept neutral & semantic, not pulled from Google quartet */ --ts-live: var(--eh-success); --ts-live-soft: #E6F4EA; --ts-warn: var(--eh-warning); --ts-danger: var(--eh-danger); /* Type — alias EH families */ --ts-display: var(--font-display); --ts-sans: var(--font-sans); --ts-mono: var(--font-mono); --ts-script: var(--font-script); /* Rhythm */ --ts-page-pad: clamp(20px, 4vw, 56px); --ts-max: 1280px; --ts-radius: 14px; --ts-radius-sm: 10px; } /* ============================================================ EVENT PAGE THEME OVERRIDES Set data-event-theme="*" on to swap the working palette on event detail + registration pages without touching the home. ============================================================ */ /* Edler Hub default — same as :root above, listed for clarity */ html[data-event-theme="edler-hub"] { --ts-primary: var(--eh-teal-500); --ts-primary-hover: var(--eh-teal-600); --ts-primary-soft: var(--eh-teal-50); --ts-primary-strong: var(--eh-teal-700); --ts-accent: var(--eh-yellow-500); --ts-accent-hover: var(--eh-yellow-600); --ts-accent-soft: var(--eh-yellow-50); } /* Cool / corporate */ html[data-event-theme="cobalt"] { --ts-primary: #1F4FD9; --ts-primary-hover: #1740B8; --ts-primary-soft: #E8EEFC; --ts-primary-strong: #102A8A; --ts-accent: #F5B700; --ts-accent-hover: #D9A300; --ts-accent-soft: #FFFAE8; } /* Warm / community */ html[data-event-theme="ember"] { --ts-primary: #C0392B; --ts-primary-hover: #A12C20; --ts-primary-soft: #FBEAE7; --ts-primary-strong: #7A1F17; --ts-accent: #F5B700; --ts-accent-hover: #D9A300; --ts-accent-soft: #FFFAE8; } /* Mono / minimal */ html[data-event-theme="graphite"] { --ts-primary: var(--eh-navy-800); --ts-primary-hover: var(--eh-navy-900); --ts-primary-soft: var(--eh-navy-50); --ts-primary-strong: var(--eh-navy-900); --ts-accent: var(--eh-yellow-500); --ts-accent-hover: var(--eh-yellow-600); --ts-accent-soft: var(--eh-yellow-50); } /* Forest / sustainability */ html[data-event-theme="forest"] { --ts-primary: #1F8A5B; --ts-primary-hover: #166B45; --ts-primary-soft: #E6F4EC; --ts-primary-strong: #0F4A30; --ts-accent: #F5B700; --ts-accent-hover: #D9A300; --ts-accent-soft: #FFFAE8; } /* Custom — values come from inline style="--ts-primary: …" on . The event-loader injects this from the event's colors config. */ html[data-event-theme="custom"] { /* nothing here on purpose; overrides are inlined */ }