CSS custom properties (variables)

--accent: #a0c000; color: var(--accent); Change once, update everywhere.

Code example

:root {
  --accent: #a0c000;
  --text-primary: #e6edf3;
}
.btn-primary {
  background: var(--accent);
  color: #1a1a1a;
}

How it works

CSS custom properties (variables) let you define a value once and reuse it across the stylesheet. The big win: theming. OpenBenchML defines --accent, --bg-primary, --text-primary, --border, --shadow-glow on :root, then every component uses var(--accent) etc. To re-skin the entire app from olive to violet, you change one line. CSS variables also work in calc() — `padding: calc(var(--gap) * 2)` — and can be overridden per-component with inline styles.