Theming

Teal is the default accent and needs no class. Four more accent families apply with a single theme-* class on any ancestor, and a heritage dark scope is available as corpo-dark. Every color in the system resolves through --corpo-* tokens.

Accent themes

Each row below is the same markup inside a different theme scope:

<html class="theme-amber">          <!-- plain CSS -->

<ThemeProvider theme="amber">       // React
  <App />
</ThemeProvider>

Dark scope

Apply corpo-dark on an ancestor. Surfaces, borders, text tiers, status colors, and the chart palette all carry dedicated dark-surface values — chart series in particular use separately validated muted steps rather than a brightness flip.

Key tokens

Token	Purpose
--corpo-bg / --corpo-bg-panel	Page background / card and panel surfaces
--corpo-text … --corpo-text-dim	Four text tiers, all WCAG AA on light surfaces
--corpo-accent / --corpo-accent-strong / --corpo-accent-subtle	The active theme's accent family
--corpo-green/red/amber/blue + -subtle	Status palette — reserved for status, never chart series
--corpo-chart-1 … --corpo-chart-5	Categorical chart series, CVD-validated, fixed order
--corpo-border / -dim / -strong	Border weights
--corpo-radius / --corpo-radius-lg	2px controls, 4px surfaces
--corpo-shadow-sm/md/lg	Quiet elevation — no glow
--corpo-font-sans / --corpo-font-mono	Public Sans body, JetBrains Mono for labels and data

Tailwind v4

/* globals.css */
@import 'tailwindcss';
@import '@nukleas/corpo/tailwind';

/* then: bg-corpo-accent, text-corpo-text-muted, border-corpo-border-dim, … */