Layout
Card .
Contêiner surface-aware, radius 20px; hover elevado é opt-in (interactive).
Card — variants & surfaces
Four Card props (default, elevated, padding lg, interactive) shown on paper and ink surfaces. --card-bg and --card-border re-resolve through the [data-surface] cascade. No per-surface overrides in Card.astro.
Card · default
--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 as the resting card — only the shadow changes.
Card · padding lg
padding="lg" → --space-7 (48px). --radius-box (20px) applied. Same surface role tokens as siblings.
Card · interactive
interactive prop → card--interactive class. Hover applies --shadow-card-hover + translateY(-2px). Static cards do NOT lift on hover — hover elevation is opt-in.
Card on carbon
--card-bg and --card-border resolve to their dark values via the [data-surface="carbon"] cascade in tokens.css — no overrides in Card.astro.
Card · elevated
elevated prop → --shadow-card-hover. Same bg and border as the resting card — only the shadow changes.
Card · padding lg
padding="lg" → --space-7 (48px). --radius-box (20px) applied. Same surface role tokens as siblings.
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.
Card · padding lg
padding="lg" → --space-7 (48px). Same surface role tokens as siblings.