/* ============================================================ Workshop UI (eSided family) — Design Tokens Two-layer model: Layer 1 --esd-* global/raw tokens (family primitives). Referenced ONLY by semantic-token definitions below. Layer 2 --wui-* semantic tokens. Components consume ONLY these. Themes swap values, never markup: light, projector-safe (default) dark, screen-only ============================================================ */ /* ---------- LAYER 1: GLOBAL (theme-independent primitives) ---------- */ :root { /* Type — the eSided family signal; never substituted per product */ --esd-font-heading: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; --esd-font-body: 'Inter', 'Segoe UI', sans-serif; --esd-weight-display: 800; --esd-weight-heading: 700; --esd-weight-label: 600; --esd-tracking-display: -0.025em; --esd-tracking-heading: -0.02em; --esd-tracking-eyebrow: 0.16em; /* Type scale (px; pages may clamp() between steps) */ --esd-fs-display: 56px; /* hero: clamp(44px, 5.6vw, 78px) */ --esd-fs-title1: 44px; /* page h1: clamp(38px, 4.6vw, 58px) */ --esd-fs-title2: 32px; /* section h2: clamp(28px, 3.2vw, 40px) */ --esd-fs-subtitle: 20px; --esd-fs-lead: 18px; --esd-fs-body: 15px; --esd-fs-ui: 14px; --esd-fs-eyebrow: 13px; --esd-fs-caption: 12px; /* Geometry — invariant family bones */ --esd-radius-pill: 100px; /* CTAs, chips, tags, theme switch */ --esd-radius-card: 18px; /* section cards */ --esd-radius-tile: 16px; /* method cards, video frame */ --esd-radius-card-sm: 14px; /* quick-link cards, swatches */ --esd-radius-input: 12px; /* inputs 10–14px */ --esd-accentbar-w: 7px; /* vertical rounded bar left of titles */ /* Spacing (4px grid) */ --esd-space-1: 4px; --esd-space-2: 8px; --esd-space-3: 12px; --esd-space-4: 16px; --esd-space-5: 20px; --esd-space-6: 24px; --esd-space-8: 32px; --esd-space-10: 40px; --esd-space-12: 48px; --esd-space-16: 64px; /* Motion */ --esd-motion-fast: 120ms; --esd-motion-base: 200ms; --esd-motion-theme: 350ms; --esd-ease: ease; /* Workshop UI amber ramp (the sub-brand's ONE owned variable) */ --esd-amber-900: #8C500A; /* accentDk */ --esd-amber-700: #BE6D0E; /* accent — deepened so white text clears AA-large */ --esd-amber-500: #E6A23C; /* accentLt — dark-theme accent */ /* Warm neutral ramps */ --esd-warm-bg-lt: #FAF7F2; --esd-warm-band-lt: #F1E9DB; --esd-warm-ink-lt: #241E17; --esd-warm-ink2-lt: #6E655A; --esd-warm-ink3-lt: #A39A8C; --esd-warm-bg-dk: #0D0B08; --esd-warm-surface-dk: #1C1813; --esd-warm-band-dk: #17130E; --esd-warm-ink-dk: #F4EFE7; --esd-warm-ink2-dk: #CDC4B5; --esd-warm-ink3-dk: #9E9484; --esd-warm-border-dk: #2A2419; /* Parent-brand blue (eSided corporate) — reference only, never used in Workshop UI layouts */ --esd-blue-700: #0886C8; --esd-blue-900: #066BA0; --esd-blue-500: #2BA3DF; } /* ---------- LAYER 2: SEMANTIC — workshop-live (default) ---------- */ :root, [data-theme="workshop-live"] { color-scheme: light; --wui-bg: var(--esd-warm-bg-lt); --wui-surface: #FFFFFF; --wui-band: var(--esd-warm-band-lt); /* full-bleed meta strip */ --wui-ink: var(--esd-warm-ink-lt); --wui-ink2: var(--esd-warm-ink2-lt); --wui-ink3: var(--esd-warm-ink3-lt); --wui-accent: var(--esd-amber-700); --wui-accent-strong: var(--esd-amber-900); /* hover / pressed / on-white-emphasis */ --wui-on-accent: #FFFFFF; --wui-glow: 190, 109, 14; /* accent as R,G,B for tints/shadows */ --wui-border: rgba(190, 109, 14, 0.18); --wui-pill-border: rgba(190, 109, 14, 0.24); --wui-footer-tint: rgba(190, 109, 14, 0.04); /* States */ --wui-hover-tint: rgba(190, 109, 14, 0.06); --wui-pressed-tint: rgba(190, 109, 14, 0.12); --wui-selected-bg: var(--esd-amber-700); --wui-selected-fg: #FFFFFF; --wui-disabled-fg: var(--esd-warm-ink3-lt); --wui-disabled-bg: rgba(36, 30, 23, 0.06); --wui-focus-ring: var(--esd-amber-700); /* Status */ --wui-success-bg: #DFEFDC; --wui-success-fg: #2E7A3E; --wui-warning-bg: #FBEECB; --wui-warning-fg: #8A5A00; --wui-danger-bg: #F6E0DB; --wui-danger-fg: #A8442E; --wui-link: var(--esd-amber-900); /* Elevation (accent-tinted, from --wui-glow) */ --wui-shadow-tile: 0 2px 10px rgba(var(--wui-glow), 0.06); --wui-shadow-card: 0 8px 30px rgba(var(--wui-glow), 0.05); --wui-shadow-float: 0 20px 60px rgba(var(--wui-glow), 0.10); --wui-shadow-cta: 0 10px 26px rgba(var(--wui-glow), 0.28); /* Method-category tags (bg / fg) */ --wui-cat-warmup-bg: #FBEECB; --wui-cat-warmup-fg: #8A5A00; --wui-cat-explore-bg: #D9EDE8; --wui-cat-explore-fg: #1E6F62; --wui-cat-narrow-bg: #DCE7F5; --wui-cat-narrow-fg: #245C99; --wui-cat-create-bg: #DFEFDC; --wui-cat-create-fg: #2E7A3E; --wui-cat-choose-bg: #E9E1F4; --wui-cat-choose-fg: #5C46A0; --wui-cat-reset-bg: #F6E4D6; --wui-cat-reset-fg: #A8542E; --wui-logo-light: inline-block; /* workshop-lockup-live.svg */ --wui-logo-dark: none; /* workshop-lockup-dark.svg */ } /* ---------- LAYER 2: SEMANTIC — workshop-dark (screen-only) ---------- */ [data-theme="workshop-dark"] { color-scheme: dark; --wui-bg: var(--esd-warm-bg-dk); --wui-surface: var(--esd-warm-surface-dk); --wui-band: var(--esd-warm-band-dk); --wui-ink: var(--esd-warm-ink-dk); --wui-ink2: var(--esd-warm-ink2-dk); --wui-ink3: var(--esd-warm-ink3-dk); --wui-accent: var(--esd-amber-500); /* lifted for dark contrast */ --wui-accent-strong: var(--esd-amber-700); --wui-on-accent: #FFFFFF; --wui-glow: 230, 162, 60; --wui-border: var(--esd-warm-border-dk); --wui-pill-border: var(--esd-warm-border-dk); --wui-footer-tint: rgba(230, 162, 60, 0.04); --wui-hover-tint: rgba(230, 162, 60, 0.08); --wui-pressed-tint: rgba(230, 162, 60, 0.14); --wui-selected-bg: var(--esd-amber-500); --wui-selected-fg: #241E17; /* dark ink on light amber for AA */ --wui-disabled-fg: var(--esd-warm-ink3-dk); --wui-disabled-bg: rgba(244, 239, 231, 0.06); --wui-focus-ring: var(--esd-amber-500); --wui-success-bg: rgba(94, 176, 110, 0.16); --wui-success-fg: #8FD19A; --wui-warning-bg: rgba(230, 162, 60, 0.16); --wui-warning-fg: #EDBB6B; --wui-danger-bg: rgba(196, 92, 62, 0.18); --wui-danger-fg: #E39A82; --wui-link: var(--esd-amber-500); --wui-shadow-tile: 0 2px 10px rgba(0, 0, 0, 0.35); --wui-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35); --wui-shadow-float: 0 20px 60px rgba(0, 0, 0, 0.45); --wui-shadow-cta: 0 10px 26px rgba(var(--wui-glow), 0.22); --wui-cat-warmup-bg: rgba(230, 162, 60, 0.16); --wui-cat-warmup-fg: #EDBB6B; --wui-cat-explore-bg: rgba(64, 158, 141, 0.16); --wui-cat-explore-fg: #7CC7B8; --wui-cat-narrow-bg: rgba(90, 141, 199, 0.16); --wui-cat-narrow-fg: #8FB4DF; --wui-cat-create-bg: rgba(94, 176, 110, 0.16); --wui-cat-create-fg: #8FD19A; --wui-cat-choose-bg: rgba(140, 112, 199, 0.18); --wui-cat-choose-fg: #B4A0E0; --wui-cat-reset-bg: rgba(196, 110, 74, 0.18); --wui-cat-reset-fg: #DD9B7F; --wui-logo-light: none; --wui-logo-dark: inline-block; }