/* Scaffolding for the design-system cards only. Not part of the system:
   consuming projects never load this file. Everything visual in the cards
   comes from ../styles.css. */
body { padding: 0; }
.demo { padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
.demo-head { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-4) 0 calc(-1 * var(--space-1)); }
.demo-head:first-child { margin-top: 0; }
.note { font-size: 13.5px; color: var(--color-text-muted); max-width: 68ch; margin: 0; }
.swatch { border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.swatch .chip { height: 64px; }
.swatch p { margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.swatch b { display: block; font-size: 13px; color: var(--color-text); }
.swatch code { font-size: 11.5px; }
.ramp { display: grid; grid-template-columns: repeat(9, 1fr); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-divider); }
.ramp div { height: 44px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-family: var(--font-mono); font-size: 10px; }