CSS Variables

CSS variables (custom properties) let you store a value once and reuse it everywhere. Change the variable in one place and every element using it updates. Define them on :root so the whole page can use them, then read them with var().

:root {
  --primary: #0ea5e9;
  --radius: 12px;
}

.button {
  background: var(--primary);
  border-radius: var(--radius);
}

/* Fallback value if the variable is missing */
.card {
  color: var(--text, #1e293b);
}