/* Только для styleguide.html — образцы токенов. В рабочие страницы не подключать. */
@layer components {
  .sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3); }
  .sg-swatch { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--kb-t-xs); }
  .sg-swatch__chip { block-size: var(--space-12); border: var(--border-hair) solid var(--kb-border); border-radius: var(--r-sm); }
  .sg-swatch code { color: var(--kb-text-muted); }
  .sg-bg { background: var(--kb-bg); } .sg-surface { background: var(--kb-surface); } .sg-raise { background: var(--kb-surface-raise); }
  .sg-sunken { background: var(--kb-surface-sunken); } .sg-border { background: var(--kb-border); } .sg-text { background: var(--kb-text); }
  .sg-muted { background: var(--kb-text-muted); } .sg-brand { background: var(--kb-brand); } .sg-brand-ink { background: var(--kb-brand-ink); }
  .sg-brand-soft { background: var(--kb-brand-soft); } .sg-rose { background: var(--kb-rose); } .sg-amber { background: var(--kb-amber); }
  .sg-success { background: var(--kb-success); } .sg-warning { background: var(--kb-warning); } .sg-danger { background: var(--kb-danger); }
  .sg-root { background: var(--kb-root); } .sg-leaf { background: var(--kb-leaf); }
  .sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-2); }
  .sg-icon { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--r-sm); background: var(--kb-surface-raise); font-size: var(--kb-t-2xs); color: var(--kb-text-muted); overflow: hidden; }
  .sg-type > * + * { margin-block-start: var(--space-3); }
}