/* Shared base for design system preview cards. Imports the token CSS. */
@import url('../colors_and_type.css');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--background-primary);
  color: var(--content-primary);
  font: var(--type-body-md-regular);
}

/* Each specimen sits in a centred column below the sticky header. Short
   specimens float to the vertical middle; tall ones fill and scroll from the
   top (justify-content only distributes free space when there is some). */
.spec-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 32px 72px;
  min-height: calc(100vh - 69px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}
.spec-head { display: flex; flex-direction: column; gap: 10px; }
.spec-head .gd-motif { width: 44px; }
.spec-head h1 { font: var(--type-heading-lg); letter-spacing: var(--type-heading-tracking); color: var(--content-primary); margin: 0; }
.spec-head p { font: var(--type-body-md-regular); color: var(--content-tertiary); margin: 0; max-width: 62ch; }

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--content-tertiary); font: var(--type-label-sm-medium); }
.mono  { font: var(--type-label-sm-regular); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--content-tertiary); }

.swatch {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.swatch-row { display: flex; gap: 8px; flex-wrap: nowrap; }
.swatch-row .swatch { flex: 1; min-width: 0; height: 56px; }

.label-cap {
  font: var(--type-label-sm-medium);
  color: var(--content-tertiary);
}

.divider {
  height: 1px;
  background: var(--border-subtle);
  width: 100%;
}