less and less

Change --brand once

/* ❌ Theming the hard way */
.button-primary { background: #0a7; }
.link-primary { color: #0a7; }
.border-primary { border-color: #0a7; }
.bg-primary-light { background: #e5f7ed; }
/* Change brand = find/replace nightmare */

/* ✅ CSS custom properties + color-mix() */
:root {
  --primary: #0a7;
  --bg-light: color-mix(in srgb, var(--primary) 5%, white);
  --bg-dark: color-mix(in srgb, var(--primary) 20%, black);
}

button { background: var(--primary); }
a { color: var(--primary); }
.card { background: var(--bg-light); }
/* Change once, entire palette updates */