Semantic Variables

Semantic variables are runtime CSS variables. They do not generate Tailwind utilities in V0.

Light

Surfaces

--surface-canvas

var(--color-surface-0)

--surface-panel

var(--color-surface-1)

--surface-elevated

var(--color-surface-2)

--surface-subtle

var(--color-surface-3)

--surface-muted

var(--color-surface-4)

Text

--text-primary

var(--color-neutral-950)

--text-secondary

var(--color-neutral-700)

--text-muted

var(--color-neutral-600)

--text-inverse

var(--color-surface-2)

--text-accent

var(--color-lavender-700)

Accent

--accent-primary

var(--color-lavender-500)

--accent-primary-hover

var(--color-lavender-600)

--accent-primary-active

var(--color-lavender-700)

--accent-soft

var(--color-lavender-100)

--accent-contrast

var(--color-lavender-950)

Status

--status-success

var(--color-success-500)

--status-warning

var(--color-warning-500)

--status-danger

var(--color-danger-500)

--status-info

var(--color-info-500)

Dark

The same semantic names are overridden under .dark.

Dark surfaces

--surface-canvas

#121019

--surface-panel

#191623

--surface-elevated

#211d2e

--surface-subtle

#2a2635

--surface-muted

#373142

Dark text

--text-primary

#f7f1e6

--text-secondary

#d7cdbc

--text-muted

#aa9e8b

--text-inverse

#151310

--text-accent

var(--color-lavender-300)

Dark accent

--accent-primary

var(--color-lavender-300)

--accent-primary-hover

var(--color-lavender-200)

--accent-primary-active

var(--color-lavender-100)

--accent-soft

rgb(156 143 217 / 0.18)

--accent-contrast

var(--color-lavender-950)

Reading

The reading layer is for long-form prose. It inherits light and dark semantic colors and adds a font-relative measure for body copy.

Variable	Value / source
--reading-font-body	var(--font-reading)
--reading-font-heading	var(--font-reading)
--reading-measure	65ch
--reading-font-size	var(--text-lg)
--reading-line-height	var(--leading-reading)
--reading-paragraph-gap	1.2em
--reading-fg	var(--text-primary)
--reading-bg	var(--surface-canvas)
--reading-fg-muted	var(--text-secondary)
--reading-link	var(--text-accent)
--reading-code-bg	var(--surface-subtle)

Use --reading-measure for the body text column. Use --container-reading or --layout-prose-width for the outer layout shell.