Foundations

Spacing & layout

A 4px-based spacing scale, square corners by intent, and a small set of layout primitives. Mobile-first: base styles target ~320px, three min-width steps enhance upward.

ScaleSpacing (4px base)

--cc-s1 .25rem

--cc-s2 .5rem

--cc-s3 .75rem

--cc-s4 1rem

--cc-s5 1.5rem

--cc-s6 2rem

--cc-s7 3rem

--cc-s8 4rem

--cc-s9 6rem

--cc-s10 8rem

ReferenceWidths, breakpoints & sizing

Container	`--cc-container` 1180px · `--cc-container-wide` 1320px
Reading measure	`--cc-measure` 64ch for prose
Gutters	16px mobile → 32px from md
Breakpoints	`sm` 600 · `md` 900 · `lg` 1200 (min-width, mobile-first)
QA viewports	320 · 375 · 390 · 430 · 768 · 1024 · 1280 · 1440
Touch target	`--cc-touch` 44px · controls `--cc-control-h` 48px
Radius	`--cc-radius` 0 — square by intent
Elevation	Flat. One soft `--cc-shadow-pop` for menus/overlays only.

PrimitivesLayout helpers

.cc-grid-side main + 320px sidebar from lg, stacked below

Main column

Sidebar (320px)

.cc-stack / .cc-section vertical rhythm + section padding

Item

Item (1rem above)