How to use CSS variables
Define shared values
Custom property names begin with two hyphens. Defining global tokens on :root makes them available throughout the document.
:root {
--color-brand: #075985;
--space-md: 1rem;
--radius: 0.5rem;
}Read a variable
Use var() wherever the property's grammar accepts the resulting value.
.button {
background: var(--color-brand);
padding: var(--space-md);
border-radius: var(--radius);
}Override by scope
Custom properties participate in the cascade and inherit, so a component or theme can replace a value locally.
.alert { --accent: #b42318; }
.alert__title { color: var(--accent); }Supply a fallback
A fallback is used when the referenced property is missing or invalid.
.card {
border-color: var(--card-border, #cbd5e1);
}