/* OriginAI brand tokens — copied verbatim from DESIGN.md §5. Source of truth: DESIGN.md. Do not hand-edit values here; edit DESIGN.md and re-sync instead. */ :root { /* Fonts */ --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: var(--font-sans); /* headlines — Platform default */ --font-display-labs: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif; --font-serif: 'Newsreader', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* Neutrals */ --n-0:#FFFFFF; --n-50:#F2F3F6; --n-100:#EBECF0; --n-200:#DEE0E7; --n-300:#C6C9D3; --n-400:#9DA2B0; --n-500:#6E7484; --n-600:#4C5160; --n-700:#343846; --n-800:#1F222E; --n-900:#14161C; /* Platform — Ultramarine */ --p-50:#EEF0FD; --p-100:#DDE2FB; --p-200:#BCC5F7; --p-300:#93A1F1; --p-400:#6478EA; --p-500:#3D52E0; --p-600:#2E40C4; --p-700:#2634A0; --p-on-dark:#5A6CF0; /* Labs — Amber */ --a-50:#FBF3E3; --a-100:#F6E6C2; --a-200:#EFD08A; --a-300:#E5B24E; --a-400:#D9971F; --a-500:#D08A18; --a-600:#A66A10; --a-700:#7E4F0C; --a-on-dark:#E5A83B; /* Semantic */ --success:#17916B; --success-text:#0F7A57; --success-bg:#E4F3EC; --warning:#C77D12; --warning-text:#8A5A0E; --warning-bg:#FBEFD6; --danger:#D9434E; --danger-text:#C0313C; --danger-bg:#FBE7E7; --info:#3D52E0; --info-text:#2E40C4; --info-bg:#EEF0FD; /* Role aliases — default = Platform */ --bg:var(--n-50); --surface:var(--n-0); --text:var(--n-900); --text-muted:var(--n-500); --text-secondary:var(--n-600); --border:var(--n-200); --divider:var(--n-300); --accent:var(--p-500); --accent-text:var(--p-600); --accent-hover:var(--p-600); --accent-fill-text:#FFFFFF; /* Radius / space / shadow */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(20,22,28,.06); --shadow-md:0 4px 16px rgba(20,22,28,.08); --shadow-lg:0 12px 40px rgba(20,22,28,.12); --ease:cubic-bezier(.22,.61,.36,1); } /* Labs division — set data-brand="labs" on , a section, or a component */ [data-brand="labs"] { --font-display: var(--font-display-labs); /* Labs headlines = Bricolage Grotesque */ --accent:var(--a-500); /* fills & graphics */ --accent-text:var(--a-700); /* text/links on light — accessible */ --accent-hover:var(--a-600); --accent-fill-text:var(--n-900);/* ink on amber fills, NOT white */ } /* Dark mode / dark surfaces */ [data-theme="dark"] { --bg:#0E1017; --surface:#14161C; --text:#F2F3F6; --text-muted:#9DA2B0; --text-secondary:#C6C9D3; --border:rgba(255,255,255,.10); --divider:rgba(255,255,255,.08); --accent:var(--p-on-dark); --accent-text:var(--p-400); } [data-theme="dark"][data-brand="labs"] { --accent:var(--a-on-dark); --accent-text:var(--a-on-dark); --accent-fill-text:var(--n-900); }