/* ============================================================ 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; } /* GGL — Google-style quartet (Blue 500 / Yellow 600 / Green 500 / Red 500) */ html[data-event-theme="ggl"] { --ts-primary: #4285F4; --ts-primary-hover: #1A73E8; --ts-primary-soft: #C3ECF6; --ts-primary-strong: #0B3D91; --ts-accent: #F9AB00; --ts-accent-hover: #D99100; --ts-accent-soft: #FFE7A5; } /* Path — earthy, journey-flavoured (PLACEHOLDER — refresh once you share the actual Path palette image). Primary: deep teal. Secondary: warm clay. */ html[data-event-theme="path"] { --ts-primary: #0F766E; --ts-primary-hover: #115E59; --ts-primary-soft: #CFF2EC; --ts-primary-strong: #134E48; --ts-accent: #C2410C; --ts-accent-hover: #9A3412; --ts-accent-soft: #FBE5D6; } /* 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 */ } /* ============================================================ "Workshop" template palette (4th template) Pastel blocks + halftone markers + mono labels. ============================================================ */ :root { --ws-blue: #4285F4; --ws-green: #34A853; --ws-yellow: #F9AB00; --ws-red: #EA4335; --ws-blue-pa: #C3ECF6; --ws-green-pa: #CCF6C5; --ws-yellow-pa: #FFE7A5; --ws-red-pa: #F8D8D8; --ws-blue-ht: #57CAFF; --ws-green-ht: #5CDB6D; --ws-yellow-ht: #FFD427; --ws-red-ht: #FF7DAF; --ws-off: #F0F0F0; --ws-ink: #1E1E1E; --ws-paper: #FFFFFF; --ws-line: #DADADA; --ws-muted: #5F6368; }