/* SAMTAG design system — TOKENS (custom properties only). BUILD_BRIEF_design_system_v2. Global, additive, safe everywhere. Three composing axes on : data-theme="dark|light", data-cvd="on", data-brand="". Authoritative: component CSS references these; any colour/font baked into the reference mockups is superseded by this file. Monospace is RETIRED. */ :root{ /* ===== SURFACES (dark = default theme) ===== */ --st-ink:#0E0F11; --st-ink-2:#121419; --st-surface:#16181C; --st-surface-2:#1C1F25; --st-surface-3:#23272E; --st-line:#2A2F37; --st-line-soft:#212630; --st-line-strong:#3D444E; /* ===== TEXT (dark) ===== */ --st-text:#E9EBEE; --st-text-dim:#9BA1AA; --st-text-faint:#6C727B; --st-label:#CBD0D6; /* ===== BRAND ACCENT (default = SAMTAG amber; a data-brand override replaces these only) ===== */ --st-brand:#F5A623; /* bright accent: fills, wordmark, active nav, focus */ --st-brand-ink:var(--st-brand); /* accent used as text/small UI (deepened in light theme) */ --st-brand-bright:#FBB73B; /* hover */ --st-brand-deep:#C9851A; /* borders */ --st-brand-glow:rgba(245,166,35,.16); --st-on-brand:#17130A; /* text/icon ON a brand fill (constant dark) */ /* ===== STATUS / RAG (LOCKED: a brand NEVER overrides these; only colour-safe does) ===== */ --st-rag-red:#E5604D; --st-rag-red-bg:rgba(229,96,77,.13); --st-rag-amber:#E0A03A; --st-rag-amber-bg:rgba(224,160,58,.13); --st-rag-green:#5FB87A; --st-rag-green-bg:rgba(95,184,122,.13); --st-rag-grey:#7A828C; --st-rag-grey-bg:rgba(122,130,140,.12); /* ===== ELEVATION ===== */ --st-card-shadow:none; /* ===== DARK RAIL (CONSTANT in both themes) ===== */ --st-side-bg:linear-gradient(180deg,#15171B,#0E0F12); --st-side-border:#23262C; --st-side-text:#C4C8CE; --st-side-text-bright:#F1F2F4; --st-side-text-dim:#7E848C; --st-side-hover:rgba(255,255,255,.05); --st-side-active-bg:rgba(255,255,255,.07); --st-side-accent:var(--st-brand); /* rail accent follows the brand */ --st-side-avatar-bg:rgba(255,255,255,.07); /* ===== SHAPE & TYPE ===== */ --st-radius:11px; --st-radius-sm:8px; --st-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --st-cond:'Barlow Condensed',var(--st-sans); /* MONOSPACE RETIRED. Identifiers/codes/dates use --st-sans with font-variant-numeric:tabular-nums where numeric alignment matters. */ } /* ===== LIGHT THEME (warm, layered). Rail tokens untouched, so the rail stays dark. ===== */ body[data-theme="light"]{ --st-ink:#EAE7E1; --st-ink-2:#F3F1EC; --st-surface:#F8F6F2; --st-surface-2:#EEEBE4; --st-surface-3:#E2DED6; --st-line:#D8D3CA; --st-line-soft:#E3DFD7; --st-line-strong:#C0BAAE; --st-text:#211F1B; --st-text-dim:#5F5C55; --st-text-faint:#938E85; --st-label:#4A463F; --st-brand-ink:#8A5406; /* deep accent for text on light (default amber brand) */ --st-brand-deep:#7C4C05; --st-brand-glow:rgba(245,166,35,.20); --st-rag-red:#BC3A2C; --st-rag-red-bg:rgba(188,58,44,.10); --st-rag-amber:#946410; --st-rag-amber-bg:rgba(148,100,16,.13); --st-rag-green:#2E7548; --st-rag-green-bg:rgba(46,117,72,.10); --st-rag-grey:#6B6760; --st-rag-grey-bg:rgba(107,103,96,.10); --st-card-shadow:0 1px 2px rgba(60,50,30,.04),0 10px 26px -18px rgba(60,50,30,.22); } /* ===== COLOUR-SAFE (accessibility): status tuned per theme. Shape glyphs in components. ===== */ body[data-cvd="on"][data-theme="dark"]{ --st-rag-red:#E2683F; --st-rag-red-bg:rgba(226,104,63,.16); --st-rag-amber:#EBB52E; --st-rag-amber-bg:rgba(235,181,46,.16); --st-rag-green:#5B9BD5; --st-rag-green-bg:rgba(91,155,213,.18); /* "good" = blue, not green */ } body[data-cvd="on"][data-theme="light"]{ --st-rag-red:#C24A22; --st-rag-red-bg:rgba(194,74,34,.12); --st-rag-amber:#9A6B0E; --st-rag-amber-bg:rgba(154,107,14,.13); --st-rag-green:#2E6FB0; --st-rag-green-bg:rgba(46,111,176,.13); } /* ===== BRAND (white-label) — EXAMPLE ONLY, not built in V1. A tenant overrides --st-brand* ONLY. ===== body[data-brand="acme"]{ --st-brand:#3B6FB0; --st-brand-bright:#4E82C4; --st-brand-deep:#2C568C; --st-brand-glow:rgba(59,111,176,.16); --st-on-brand:#FFFFFF; } body[data-brand="acme"][data-theme="light"]{ --st-brand-ink:#2C568C; } RAG tokens are NEVER set in a brand block. */