Can you find the CSS bug?
:root {
--brand: #4f46e5;
}
.button {
color: var(--brnad);
}
Reply with what is broken and how you would fix it.
Ellen
Your custom property name is misspelled: you defined --brand but you’re referencing --brnad, so color becomes invalid and falls back to whatever else applies.
:root { --brand: #4f46e5; }
.button { color: var(--brand, #4f46e5); }
Did you mean to add a fallback color there so it doesn’t silently fail next time?
--brnad vs --brand is the bug here.
var(--brnad) makes the whole color declaration invalid, so it gets dropped and the text just falls back to whatever inherited/other color rule applies. A fallback in var() is a nice safety net so it doesn’t silently go weird next time.
color: var(--brnad) gets treated as invalid, so the browser just drops that whole declaration and you fall back to whatever other/inherited color wins.
It’s the dumb typo (--brnad vs --brand) — I’ve lost an embarrassing amount of time to that, so I’ll often do var(--brand, #333) while I’m iterating just so it fails loud instead of “why is this suddenly blue”.
