/* StackChum design tokens — the single source of truth for colour, type and * shape across every StackChum surface (UX-010, Docs/Platform/ui-ux- * architecture-review.md § F). Brand values come from * Docs/Branding/StackChum-BrandingBoard-V6 (navy #0F172A, blue #2563EB, cyan * #06B6D4, green #22C55E, amber #F59E0B, off-white #F8FAFC; Poppins display). * * Source: services/_shared/ui/. Consumers carry a verbatim copy under * vendor/stackchum-ui/ produced by scripts/sync-shared-ui.sh; never edit a * copy. scripts/check-shared-ui.sh fails on drift. * * Contract: every variable is prefixed --sc-. A service maps its own legacy * variable names onto these (values only) — see § F.4 of the review. */ :root { /* ---- brand palette ---- */ --sc-navy: #0F172A; --sc-navy-2: #1E293B; --sc-navy-deep: #020617; --sc-blue: #2563EB; --sc-blue-bright: #3B82F6; --sc-blue-soft: #DBEAFE; --sc-cyan: #06B6D4; --sc-cyan-bright: #22D3EE; --sc-cyan-light: #67E8F9; --sc-cyan-deep: #0891B2; --sc-cyan-soft: #ECFEFF; --sc-green: #22C55E; --sc-green-bright: #4ADE80; --sc-amber: #F59E0B; --sc-amber-bright: #FBBF24; --sc-red: #DC2626; --sc-red-bright: #F87171; --sc-violet: #7C3AED; --sc-violet-bright: #A78BFA; /* ---- neutrals (light) ---- */ --sc-ink: #0F172A; --sc-ink-2: #334155; --sc-muted: #64748B; --sc-line: #E2E8F0; --sc-line-strong: #CBD5E1; --sc-surface: #FFFFFF; --sc-surface-2: #F1F5F9; --sc-background: #F8FAFC; /* ---- dark surfaces (Administration, Keel) ---- */ --sc-admin-bg: #0B1220; --sc-admin-panel: #111A2E; --sc-admin-panel-strong: #1B2A44; --sc-admin-line: #26354F; --sc-admin-text: #ECF7FB; --sc-admin-muted: #A9BFCC; /* ---- semantic ---- */ --sc-accent: var(--sc-blue); --sc-accent-ink: #FFFFFF; --sc-accent-soft: var(--sc-blue-soft); --sc-link: var(--sc-blue); --sc-focus: var(--sc-cyan); --sc-success: var(--sc-green); --sc-warning: var(--sc-amber); --sc-danger: var(--sc-red); /* ---- workspace bar (set per workspace below) ---- */ --sc-workspace-bar-bg: var(--sc-navy); --sc-workspace-bar-ink: #FFFFFF; --sc-workspace-bar-chip: rgba(255, 255, 255, 0.16); /* ---- typography ---- */ --sc-font-display: "Poppins", "Segoe UI", system-ui, sans-serif; --sc-font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --sc-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --sc-text-xs: 12px; --sc-text-sm: 14px; --sc-text-md: 16px; --sc-text-lg: 20px; --sc-text-xl: 24px; --sc-text-2xl: 32px; --sc-text-3xl: 40px; /* ---- shape & spacing ---- */ --sc-radius-sm: 8px; --sc-radius: 12px; --sc-radius-lg: 18px; --sc-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06); --sc-shadow-2: 0 10px 28px rgba(15, 23, 42, 0.10); --sc-space-1: 4px; --sc-space-2: 8px; --sc-space-3: 12px; --sc-space-4: 16px; --sc-space-6: 24px; --sc-space-8: 32px; /* ---- breakpoints are documented, not variables (CSS cannot use vars in media queries): 480 / 768 / 1024 / 1280 ---- */ } /* --------------------------------------------------------------------------- * Workspaces. Put data-workspace on or . The workspace bar * colour and label are what a person reads first (review § E.1 / F.2). * ------------------------------------------------------------------------ */ [data-workspace="public"] { --sc-workspace-bar-bg: transparent; } [data-workspace="account"] { --sc-workspace-bar-bg: var(--sc-ink-2); --sc-workspace-bar-ink: #FFFFFF; --sc-accent: var(--sc-blue); } [data-workspace="product"] { /* accent comes from data-product below */ --sc-workspace-bar-bg: var(--sc-accent); --sc-workspace-bar-ink: #FFFFFF; /* UX-026: a chip on a coloured bar darkens, so white text keeps AA contrast */ --sc-workspace-bar-chip: rgba(0, 0, 0, 0.28); } [data-workspace="admin"] { color-scheme: dark; --sc-workspace-bar-bg: var(--sc-amber); --sc-workspace-bar-ink: var(--sc-navy); --sc-workspace-bar-chip: rgba(15, 23, 42, 0.14); --sc-accent: var(--sc-amber); --sc-accent-ink: var(--sc-navy); --sc-accent-soft: rgba(245, 158, 11, 0.18); --sc-link: var(--sc-cyan-bright); --sc-ink: var(--sc-admin-text); --sc-ink-2: var(--sc-admin-text); --sc-muted: var(--sc-admin-muted); --sc-line: var(--sc-admin-line); --sc-line-strong: #34486A; --sc-surface: var(--sc-admin-panel); --sc-surface-2: var(--sc-admin-panel-strong); --sc-background: var(--sc-admin-bg); --sc-success: var(--sc-green-bright); --sc-warning: var(--sc-amber-bright); --sc-danger: var(--sc-red-bright); } [data-workspace="keel"] { color-scheme: dark; --sc-workspace-bar-bg: var(--sc-violet); --sc-workspace-bar-ink: #FFFFFF; --sc-workspace-bar-chip: rgba(0, 0, 0, 0.3); --sc-accent: var(--sc-violet-bright); --sc-accent-ink: var(--sc-navy); --sc-accent-soft: rgba(124, 58, 237, 0.22); --sc-link: var(--sc-violet-bright); --sc-ink: var(--sc-admin-text); --sc-ink-2: var(--sc-admin-text); --sc-muted: var(--sc-admin-muted); --sc-line: var(--sc-admin-line); --sc-line-strong: #34486A; --sc-surface: var(--sc-admin-panel); --sc-surface-2: var(--sc-admin-panel-strong); --sc-background: var(--sc-admin-bg); --sc-success: var(--sc-green-bright); --sc-warning: var(--sc-amber-bright); --sc-danger: var(--sc-red-bright); } /* --------------------------------------------------------------------------- * Products. Put data-product on / (with data-workspace="product") * or on a marketing section. Accents are the ones the products already use in * their reports and mail templates (review § F.3), so email, report and web * finally agree. * ------------------------------------------------------------------------ */ [data-product="sitewatch"] { --sc-accent: #0F766E; --sc-accent-ink: #FFFFFF; --sc-accent-soft: #CCFBF1; --sc-link: #0F766E; } [data-product="permitsignal"] { --sc-accent: #0B7285; --sc-accent-ink: #FFFFFF; --sc-accent-soft: #CFFAFE; --sc-link: #0B7285; } [data-product="farbrief"] { --sc-accent: #1F6F9C; --sc-accent-ink: #FFFFFF; --sc-accent-soft: #DBEAFE; --sc-link: #1F6F9C; --sc-accent-deep: #1F3A4D; } [data-product="agendasignal"] { --sc-accent: #3D7A3D; --sc-accent-ink: #FFFFFF; --sc-accent-soft: #DCFCE7; --sc-link: #3D7A3D; } [data-product="recompeteradar"] { --sc-accent: #8A5A1F; --sc-accent-ink: #FFFFFF; --sc-accent-soft: #FEF3C7; --sc-link: #8A5A1F; }