/* Apenas composição da vitrine; os exemplos usam os estilos reais da aplicação. */
.design-system { display:grid;gap:var(--space-6);min-width:0 }
.design-system-header p { max-width:70ch }
.design-system-nav { display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4) }
.design-system-nav a { color:var(--color-gold);min-height:44px;display:inline-flex;align-items:center }
.design-system-section { display:grid;gap:var(--space-4);min-width:0 }
.design-system-section>h2,.design-system-section>p { margin:0 }
.design-system-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--card-gap);margin:0 }
.design-system-swatch { display:grid;align-content:start;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md) }
.design-system-swatch dt { display:flex;align-items:center;gap:var(--space-3) }
.design-system-swatch dt,.design-system-swatch dd { margin:0;overflow-wrap:anywhere }
.design-system-swatch dd { color:var(--color-text-muted);font-size:var(--text-caption) }
.design-system-color { width:36px;height:36px;border:1px solid var(--line);border-radius:var(--radius-sm);flex-shrink:0 }
.swatch-bg { background:var(--color-bg) }
.swatch-surface { background:var(--color-surface) }
.swatch-surface-raised { background:var(--color-surface-raised) }
.swatch-border { background:var(--color-border) }
.swatch-text { background:var(--color-text) }
.swatch-text-muted { background:var(--color-text-muted) }
.swatch-gold { background:var(--color-gold) }
.swatch-success { background:var(--color-success) }
.swatch-warning { background:var(--color-warning) }
.swatch-danger { background:var(--color-danger) }
.swatch-info { background:var(--color-info) }
.design-system-examples { display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap }
.design-system-panel { padding:var(--card-padding);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface) }
.design-system-panel>*:first-child { margin-top:0 }
.design-system-panel>*:last-child { margin-bottom:0 }
.design-system code { overflow-wrap:anywhere;color:var(--color-text-muted) }