/* styleguide.css — mise en page de la page uikit.html (démonstration), pas un composant réutilisable. */
.styleguide-header{
  padding-block: var(--space-8) var(--space-7);
  border-bottom: var(--border-hairline);
}
.styleguide-header p{ color: var(--color-ink-soft); max-width: 60ch; }

.styleguide-section{
  padding-block: var(--space-8);
  border-bottom: var(--border-hairline);
}
.styleguide-section__head{ margin-bottom: var(--space-6); }
.styleguide-section--last{ border-bottom: 0; }
.styleguide-section__file{
  display: inline-block;
  margin-top: var(--space-2);
  padding: 3px 10px;
  font-size: var(--fs-micro);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  background: var(--color-gray-100);
  border: var(--border-hairline);
  color: var(--color-ink-soft);
}

.styleguide-demo{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}
.styleguide-demo--column{ flex-direction: column; align-items: stretch; }

.styleguide-block{ max-width: 420px; }
.styleguide-block--wide{ max-width: 900px; }
.styleguide-block--md{ max-width: 560px; }

.styleguide-note{
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
}
.styleguide-note--micro{
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--color-ink-faint);
}

/* Palette */
.color-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.color-swatch{ border: var(--border-hairline); }
.color-swatch__fill{ height: 80px; background: var(--swatch-fill, var(--color-gray-200)); }
.color-swatch__meta{ padding: var(--space-3); }
.color-swatch__name{ font-size: var(--fs-small); font-weight: 600; }
.color-swatch__hex{ font-size: var(--fs-micro); color: var(--color-ink-faint); font-family: ui-monospace, monospace; }

/* Typo scale */
.type-row{
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-top: var(--border-hairline);
}
.type-row:first-child{ border-top: 0; }
.type-row__label{ width: 90px; flex-shrink: 0; font-size: var(--fs-micro); color: var(--color-ink-faint); font-family: ui-monospace, monospace; }

.type-sample{ margin: 0; }
.type-sample--h1{ font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--color-ink); }
.type-sample--h2{ font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--color-ink); }
.type-sample--h3{ font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); color: var(--color-ink); }
.type-sample--lead{ font-size: var(--fs-lead); color: var(--color-ink); max-width: 46ch; }
.type-sample--body{ font-size: var(--fs-body); color: var(--color-ink); max-width: 46ch; }
.type-sample--small{ font-size: var(--fs-small); color: var(--color-ink-soft); }
.type-sample--kicker{ font-size: var(--fs-micro); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--color-accent-text); }

/* Spacing scale */
.space-row{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}
.space-row__bar{ height: 12px; width: var(--bar-w, 4px); background: var(--color-accent); }
.space-row__label{ width: 130px; flex-shrink: 0; font-size: var(--fs-small); font-family: ui-monospace, monospace; }

/* Composants list table */
.components-list{ width: 100%; border-top: var(--border-hairline); }
.components-list__row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding-block: var(--space-3);
  border-bottom: var(--border-hairline);
  font-size: var(--fs-small);
}
.components-list__name{ font-weight: 600; }
.components-list__file{ font-family: ui-monospace, monospace; color: var(--color-accent-text); font-size: var(--fs-micro); }