@@ -1996,7 +1996,7 @@ export function test_css_variable_fallback() {
 		},
 		{
 			className: 'undefined-css-variable-with-multiple-fallbacks',
-			expectedColor: limeColor,
+			expectedColor: undefined,
 		},
 		{
 			className: 'undefined-css-variable-with-missing-fallback-value',
@@ -2037,7 +2037,7 @@ export function test_css_variable_fallback() {
 
     .undefined-css-variable-with-multiple-fallbacks {
         --my-fallback-var: lime;
-        color: var(--undefined-var, var(--my-fallback-var), yellow); /* resolved as color: lime; */
+        color: var(--undefined-var, var(--my-fallback-var), yellow); /* resolved as color: unset; */
     }
 
     .undefined-css-variable-with-missing-fallback-value {
 
@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+
+import { _evaluateCssVariableExpression } from '.';
+
+function evaluate(value: string, variables: Record<string, string> = {}) {
+	const view = { style: { getCssVariable: (name: string) => (name in variables ? variables[name] : null) } };
+	return _evaluateCssVariableExpression(view as any, 'color', value);
+}
+
+describe('_evaluateCssVariableExpression', () => {
+	it('substitutes defined variables and falls back for undefined ones', () => {
+		expect(evaluate('var(--a)', { '--a': 'blue' })).toBe('blue');
+		expect(evaluate('var(--a, red)', { '--a': 'blue' })).toBe('blue');
+		expect(evaluate('var(--missing, red)')).toBe('red');
+		expect(evaluate('var(--missing)')).toBe('unset');
+	});
+
+	it('resolves nested fallbacks', () => {
+		expect(evaluate('var(--missing, var(--b))', { '--b': 'lime' })).toBe('lime');
+		expect(evaluate('var(--missing, var(--missing-too, yellow))')).toBe('yellow');
+		expect(evaluate('var(--missing, var(--missing-too))')).toBe('unset');
+	});
+
+	it('keeps parentheses inside the fallback', () => {
+		expect(evaluate('var(--missing, rgb(0, 0, 255))')).toBe('rgb(0, 0, 255)');
+		expect(evaluate('linear-gradient(var(--missing, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%))')).toBe('linear-gradient(rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)');
+	});
+
+	it('keeps every comma-separated part of the fallback', () => {
+		expect(evaluate('var(--missing, red 0%, blue 100%)')).toBe('red 0%, blue 100%');
+	});
+
+	it('uses the fallback for a variable set to initial', () => {
+		expect(evaluate('var(--a, red)', { '--a': 'initial' })).toBe('red');
+		expect(evaluate('var(--a)', { '--a': 'initial' })).toBe('unset');
+	});
+
+	it('resolves a gradient built from variables with fallbacks', () => {
+		const variables = {
+			'--via-stops': 'initial',
+			'--position': 'to right in oklab',
+			'--from': 'rgb(98, 96, 255)',
+			'--from-position': '0%',
+			'--to': 'rgb(246, 51, 154)',
+			'--to-position': '100%',
+		};
+		expect(evaluate('linear-gradient(var(--via-stops, var(--position), var(--from) var(--from-position), var(--to) var(--to-position)))', variables)).toBe(
+			'linear-gradient(to right in oklab, rgb(98, 96, 255) 0%, rgb(246, 51, 154) 100%)',
+		);
+	});
+
+	it('leaves values without variables alone', () => {
+		expect(evaluate('rgb(0, 0, 0)')).toBe('rgb(0, 0, 0)');
+	});
+});
@@ -219,20 +219,22 @@ export function _evaluateCssVariableExpression(view: ViewBase, cssName: string,
 			continue;
 		}
 
-		const endIdx = output.indexOf(')', idx);
+		const endIdx = findClosingParenthesis(output, idx + 3);
 		if (endIdx === -1) {
 			continue;
 		}
 
-		const matched = output
-			.substring(idx + 4, endIdx)
-			.split(',')
-			.map((v) => v.trim())
-			.filter((v) => !!v);
-		const cssVariableName = matched.shift();
+		// The fallback is everything after the first comma, commas included.
+		const body = output.substring(idx + 4, endIdx);
+		const commaIdx = body.indexOf(',');
+		const cssVariableName = (commaIdx === -1 ? body : body.substring(0, commaIdx)).trim();
+		const fallback = commaIdx === -1 ? '' : body.substring(commaIdx + 1).trim();
 		let cssVariableValue = view.style.getCssVariable(cssVariableName);
-		if (cssVariableValue === null && matched.length) {
-			cssVariableValue = _evaluateCssVariableExpression(view, cssName, matched.join(', ')).split(',')[0];
+		if (cssVariableValue?.trim() === 'initial') {
+			cssVariableValue = null;
+		}
+		if (cssVariableValue === null && fallback) {
+			cssVariableValue = _evaluateCssVariableExpression(view, cssName, fallback);
 		}
 
 		if (!cssVariableValue) {
@@ -245,6 +247,20 @@ export function _evaluateCssVariableExpression(view: ViewBase, cssName: string,
 	return output;
 }
 
+function findClosingParenthesis(value: string, openIdx: number): number {
+	let depth = 0;
+	for (let i = openIdx; i < value.length; i++) {
+		const ch = value[i];
+		if (ch === '(') {
+			depth++;
+		} else if (ch === ')' && --depth === 0) {
+			return i;
+		}
+	}
+
+	return -1;
+}
+
 export function _evaluateCssCalcExpression(value: string) {
 	if (typeof value !== 'string') {
 		return value;
 
@@ -112,6 +112,33 @@ describe('CssState.setPropertyValues', () => {
 		expect(view.style.color.toString()).toBe('#FF0000');
 	});
 
+	it('resolves custom properties that refer to ones declared after them', () => {
+		const { view } = styled('label { --a: var(--b, blue); --b: var(--c); --c: red; color: var(--a); }');
+		view._cssState.onLoaded();
+
+		expect(view.style.color.toString()).toBe('#FF0000');
+	});
+
+	it('evaluates properties after the custom properties they use, whatever the order', () => {
+		const { view } = styled('.a { color: var(--brand); } .b { --brand: var(--base); --base: red; }', 'a b');
+		view._cssState.onLoaded();
+
+		expect(view.style.color.toString()).toBe('#FF0000');
+	});
+
+	it('prefers a later-defined variable over the fallback that referenced it', () => {
+		const css = `
+			.l { --via-stops: initial; }
+			.from { --from: red; --stops: var(--via-stops, var(--from)); }
+			.via { --via: lime; --via-stops: var(--from), var(--via); --stops: var(--via-stops); }
+			.to { --stops: var(--via-stops, var(--from)); color: var(--stops); }
+		`;
+		const { view } = styled(css, 'l from via to');
+		view._cssState.onLoaded();
+
+		expect(view.style.getCssVariable('--stops')).toBe('red, lime');
+	});
+
 	it('does not re-apply an unchanged css expression', () => {
 		const { view } = styled('label { --brand: red; color: var(--brand); }');
 		view._cssState.onLoaded();
 
@@ -117,6 +117,57 @@ function evaluateCssExpressions(view: ViewBase, property: string, value: string)
 	return value;
 }
 
+// Custom properties may refer to ones declared after them, so re-evaluate until they settle.
+function settleCssVariables(view: ViewBase, cssExpsProperties: Record<string, string>) {
+	let names: string[];
+	for (const property in cssExpsProperties) {
+		if (isCssVariable(property)) {
+			if (!names) {
+				names = [];
+			}
+			names.push(property);
+			view.style.setScopedCssVariable(property, evaluateCssExpressions(view, property, cssExpsProperties[property]));
+		}
+	}
+	if (!names || names.length < 2 || !hasForwardCssVariableReference(names, cssExpsProperties)) {
+		return;
+	}
+
+	for (let pass = 1; pass < names.length; pass++) {
+		let changed = false;
+		for (const name of names) {
+			const value = evaluateCssExpressions(view, name, cssExpsProperties[name]);
+			if (value !== view.style.getCssVariable(name)) {
+				view.style.setScopedCssVariable(name, value);
+				changed = true;
+			}
+		}
+		if (!changed) {
+			return;
+		}
+	}
+}
+
+function hasForwardCssVariableReference(names: string[], values: Record<string, string>): boolean {
+	for (let i = 0; i < names.length; i++) {
+		const value = values[names[i]];
+		for (let j = i + 1; j < names.length; j++) {
+			const ref = `var(${names[j]}`;
+			let at = value.indexOf(ref);
+			while (at !== -1) {
+				// `var(--a` must not match `var(--ab`.
+				const next = value[at + ref.length];
+				if (next === ')' || next === ',' || next === ' ' || next === undefined) {
+					return true;
+				}
+				at = value.indexOf(ref, at + 1);
+			}
+		}
+	}
+
+	return false;
+}
+
 /**
  * Only marks the merged list dirty - it is rebuilt on next read, since frameworks
  * register stylesheets one call at a time.
@@ -934,21 +985,23 @@ export class CssState {
 			valuesToApply[property] = value;
 		}
 		//we need to parse CSS vars first before evaluating css expressions
+		if (cssExpsProperties) {
+			settleCssVariables(view, cssExpsProperties);
+		}
 		for (const property in cssExpsProperties) {
 			const hadOldValue = property in oldProperties;
 			const oldValue = hadOldValue ? oldProperties[property] : undefined;
 			if (hadOldValue) {
 				delete oldProperties[property];
 			}
 
-			const value = evaluateCssExpressions(view, property, cssExpsProperties[property]);
-
 			if (isCssVariable(property)) {
-				view.style.setScopedCssVariable(property, value);
 				delete newPropertyValues[property];
 				continue;
 			}
 
+			const value = evaluateCssExpressions(view, property, cssExpsProperties[property]);
+
 			if (value === unsetValue) {
 				delete newPropertyValues[property];
 			} else {
Original file line number	Diff line number	Diff line change
`@@ -1996,7 +1996,7 @@ export function test_css_variable_fallback() {`
`1996`	`1996`	`},`
`1997`	`1997`	`{`
`1998`	`1998`	`className: 'undefined-css-variable-with-multiple-fallbacks',`
`1999`		`- expectedColor: limeColor,`
	`1999`	`+ expectedColor: undefined,`
`2000`	`2000`	`},`
`2001`	`2001`	`{`
`2002`	`2002`	`className: 'undefined-css-variable-with-missing-fallback-value',`
`@@ -2037,7 +2037,7 @@ export function test_css_variable_fallback() {`
`2037`	`2037`
`2038`	`2038`	`.undefined-css-variable-with-multiple-fallbacks {`
`2039`	`2039`	`--my-fallback-var: lime;`
`2040`		`- color: var(--undefined-var, var(--my-fallback-var), yellow); /* resolved as color: lime; */`
	`2040`	`+ color: var(--undefined-var, var(--my-fallback-var), yellow); /* resolved as color: unset; */`
`2041`	`2041`	`}`
`2042`	`2042`
`2043`	`2043`	`.undefined-css-variable-with-missing-fallback-value {`