CSS Design Tokens

All CSS custom properties available in style.css. These tokens switch automatically between light and dark themes.

Colours

Token	Light	Dark	Usage
`--bg`	`#fafafa`	`#0f0f17`	Page background
`--bg-surface`	`#ffffff`	`#1a1a28`	Card / surface background
`--bg-code`	`#f0f2f5`	`#1e1e2e`	Code block background
`--text`	`#1a1a2e`	`#e4e4ef`	Primary text
`--text-secondary`	`#5a5a72`	`#a0a0b8`	Body text
`--text-muted`	`#8e8ea0`	`#6c6c82`	Captions, hints
`--accent`	`#4361ee`	`#7b8cff`	Accent / brand colour
`--border`	`#e2e2ea`	`#2a2a3c`	Borders, dividers

Token	Value
`--font-sans`	Inter, system-ui fallbacks
`--font-mono`	JetBrains Mono, monospace fallbacks

.my-element {
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}