Cards & Containers

Surface — základní obal pro karty a panely. Jedna komponenta pro oba registry: světlý (card / soft / sage / mint / blush) a tmavý akcent (dark / gradient / glass). Hairline ring, elevace, radius, padding.

Povrchy

card → glass

Registry

světlý · tmavý

Elevace

flat · ring · raised

Radius

12 → 32px

Povrchy — dva registry

Světlý registr (default) pro obsah a produktové karty; tmavý akcent pro hero / feature / footer. Glass jen nad gradientem nebo fotem.

Světlý registr

card

soft

sage

mint

blush

Tmavý akcent

dark

gradient

glass

Elevace

flat → ring (default) → raised. Hairline ring (ne border-*), brand-tintovaný stín.

flat

ring

raised

Radius

md 12 · lg 16 · xl 20 · 2xl 24 (default) · 3xl 32px. Plná škála + playground viz Tvary & pohyb.

2xl

3xl

Padding

none · sm 16 · md 20/24 · lg 24/32px (responzivní).

pad sm

pad md

pad lg

Interaktivní

interactive = jemný zdvih + stín na hover (klikatelná karta). Najeď myší.

Klikatelná karta

Na hover se jemně zvedne. Pro navigaci zabal do Link.

Props & pravidla

<Surface>

components/ui/surface.tsx

Prop	Typ	Default	Použití
kind	"card" \| "soft" \| "sage" \| "mint" \| "blush" \| "dark" \| "gradient" \| "glass"	"card"	Povrch (registr)
elevation	"flat" \| "ring" \| "raised"	"ring"	Hairline ring / stín
radius	"md" \| "lg" \| "xl" \| "2xl" \| "3xl"	"2xl"	Zaoblení
pad	"none" \| "sm" \| "md" \| "lg"	"md"	Vnitřní odsazení
interactive	boolean	false	Hover zdvih (klikatelná)
as	"div" \| "section" \| "article"	"div"	HTML tag

Decision tree: bílá stránka → page; zvednutá karta → card; jemný well → soft; sekce s tintem → sage / mint; teplé promo → blush; hero / feature / footer → dark nebo gradient.
Glass jen nad gradientem / fotem; gradient = čistý grad-cover + grain (bez topo).
Hrana vždy přes hairline ring, nikdy border-*.
Šířku sekce řeší width systém (.section-bb / .section-wide), ne Surface.