Layout
Section .
Primitiva da theming-spine: define data-surface e re-resolve todos os role tokens.
Section — Theming-Spine Proof
Identical child markup placed inside four Section surfaces.
The role tokens re-resolve automatically — no per-surface overrides.
paper → cream → carbon → ink
--surface resolves to white (#FFFFFF). The default light surface.
Card on paper
--card-bg resolves to white; --card-border to --n-100 (light grey). Role tokens, not hardcoded colours.
Card · elevated
elevated prop → --shadow-card-hover. Same bg and border — only the shadow changes.
--surface resolves to cream (#EFF4EF). Light tinted surface.
Card on cream
--card-bg resolves to white; --card-border transparent. Cream block sets these — zero changes in Card.astro.
Card · elevated
elevated prop → --shadow-card-hover. Same bg and border — only the shadow changes.
--surface resolves to --dark-anchor (#1C1C1C). Dark surface via cascade.
Card on carbon
--card-bg and --card-border resolve to their dark values via the [data-surface="carbon"] cascade — no overrides in Card.astro.
Card · elevated
elevated prop → --shadow-card-hover. Same bg and border — only the shadow changes.
--surface resolves to --ink (#121312). Darkest surface.
Card on ink
--card-bg and --card-border resolve to their darkest values via the [data-surface="ink"] cascade. No hex in Card.astro.
Card · elevated
elevated prop → --shadow-card-hover. Same bg and border — only the shadow changes.