01 · CSS Custom Properties

Theme Switcher

Runtime :root variable update via JS

--color-primary
--color-accent
--color-bg
--color-text

Palette Variables

CSS custom properties defined in :root

--color-primary
--color-accent
--color-bg
--color-surface
--color-text
--color-muted

calc() — Spacing Scale

Computed spacing using calc(var(--space-base) * N)

×1 = calc(var(--space-base) * 1)
×2 = calc(var(--space-base) * 2)
×3 = calc(var(--space-base) * 3)
×4 = calc(var(--space-base) * 4)
×6 = calc(var(--space-base) * 6)
×8 = calc(var(--space-base) * 8)

calc() — Fluid Typography

Font size scales with calc() between min and max

xs — calc(0.75rem + 0.25vw)

sm — calc(0.875rem + 0.35vw)

md — calc(1rem + 0.5vw)

lg — calc(1.25rem + 0.75vw)

xl — calc(1.5rem + 1vw)

2xl — calc(2rem + 1.5vw)

Component-scoped Variables

Local overrides without touching :root

card A

--card-hue: 220deg

card B

--card-hue: 140deg

card C

--card-hue: 350deg