/* Catalogue composition only. All visual values live in tokens.json.
   Specimen-only styles must not change the approved website components. */
.design-system-template :is(h4, h5, h6) {
  margin-block: var(--space-8) var(--space-4);
  font: var(--weight-heading) var(--type-subheading-size)/var(--leading-heading) var(--sans);
  letter-spacing: var(--tracking-heading);
}
.design-system-template small { font-size: var(--type-caption-size); }
.design-system-template blockquote {
  margin: var(--space-8) 0;
  padding-inline-start: var(--space-6);
  border-inline-start: var(--accent-border-width) solid var(--accent);
  font-size: var(--type-lead-size);
  line-height: var(--leading-lead);
}
.ds-intro { background: var(--paper); }
.ds-intro h1 { max-width: 100%; }
.ds-intro .lead { max-width: var(--layout-reading-width); }
.ds-intro p:not(.lead):not(.eyebrow) { max-width: var(--layout-reading-width); }
.design-system-template main { padding-top: var(--anchor-header-height); }
.design-system-template .section { padding-block: var(--section-space); }
.design-system-template .editorial-heading { margin-bottom: var(--space-12); }
.design-system-template .editorial-heading h2 { max-width: 20ch; }
.design-system-template code {
  overflow-wrap: anywhere;
  font-size: var(--type-caption-size);
}
.ds-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-10);
}
.ds-nav a { text-decoration-color: var(--accent); }
.ds-nav a:where(:hover, :focus-visible) { color: var(--accent); }
.ds-section-tinted { background: var(--paper); }
.ds-specimens { border-top: var(--border-width) solid var(--line-strong); }
.ds-specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-8);
  padding-block: var(--space-10);
  border-bottom: var(--border-width) solid var(--line-strong);
}
.ds-specimen > * { min-width: 0; }
.ds-specimen__meta h3 { font-size: var(--type-body-size); }
.ds-specimen__meta p, .ds-specimen__meta output { font-size: var(--type-meta-size); }
.ds-specimen__meta p { color: var(--graphite-soft); }
.ds-specimen__meta output { display: block; margin-top: var(--space-2); }
.type-sample {
  font-family: var(--sans);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}
.ds-display {
  font-weight: var(--weight-heading);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
}
.ds-heading {
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.type-sample[data-token="hero-title-size"] { line-height: var(--hero-title-leading); }
.type-sample[data-token="hero-lead-size"] { line-height: var(--hero-lead-leading); }
.type-sample[data-token="type-price-size"] { color: var(--accent); }
.ds-prose { max-width: var(--layout-reading-width); margin-top: var(--space-16); }
.ds-prose h3 { margin-bottom: var(--space-6); }
.ds-palette { margin-block: var(--space-12); color: var(--graphite); }
.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--measure-12rem)), 1fr));
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}
.ds-swatches li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.ds-swatches strong { font-size: var(--type-meta-size); }
.ds-swatches output { font-size: var(--type-caption-size); overflow-wrap: anywhere; }
.ds-swatch {
  width: 100%;
  height: var(--space-24);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.ds-spacing-list { display: grid; gap: var(--space-4); list-style: none; padding: 0; }
.ds-spacing-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: var(--space-6); }
.ds-spacing-list output { display: block; font-size: var(--type-meta-size); }
.ds-space { display: block; max-width: 100%; height: var(--space-4); background: var(--accent); }
.ds-table-scroll { overflow-x: auto; max-width: 100%; margin-block: var(--space-10); }
.ds-table { border-collapse: collapse; width: 100%; font-size: var(--type-meta-size); }
.ds-table caption { text-align: left; font-weight: var(--weight-heading); margin-bottom: var(--space-4); }
.ds-table :is(th, td) { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--line); text-align: left; vertical-align: top; }
.ds-table th { font-weight: var(--weight-medium); }
.ds-table code { white-space: normal; }
.ds-layout-demo {
  display: grid;
  gap: 0;
  margin-block: var(--space-6) var(--space-12);
  border: var(--border-width) solid var(--line-strong);
}
.ds-layout-demo > div { min-width: 0; padding: var(--space-8); background: var(--brand-soft); }
.ds-layout-demo > div:last-child { background: var(--paper-light); }
.ds-layout-demo p { margin-top: var(--space-4); }
.ds-layout-demo--equal { grid-template-columns: var(--layout-equal-columns); }
.ds-layout-demo--wide { grid-template-columns: var(--service-columns); column-gap: var(--service-gutter); }
.ds-layout-demo--reading { grid-template-columns: var(--layout-reading-columns); gap: var(--layout-gap); }
.design-system-template #komponenter h3 { margin-top: var(--space-12); }
.ds-dark-sample { background: var(--graphite-deep); color: var(--white); padding: var(--space-8); margin-block: var(--space-8); }
.ds-dark-sample .text-link { padding-inline: var(--button-padding-inline); }
.ds-form-sample { width: min(100%, var(--layout-reading-width)); margin-block: var(--space-8); }
.ds-form-sample > label:not(.check) { display: block; margin-top: var(--space-6); }
.ds-form-sample .hero__actions { margin-top: var(--space-6); }
.ds-icon-sample { display: block; list-style: none; padding: 0; }
.ds-reference { border-top: var(--border-width) solid var(--line-strong); margin-top: var(--space-12); padding-top: var(--space-6); }
.ds-reference > summary { cursor: pointer; font-weight: var(--weight-heading); }
@media (max-width: 55rem) {
  .ds-specimen, .ds-layout-demo, .ds-spacing-list li { grid-template-columns: minmax(0, 1fr); }
  .ds-specimen { gap: var(--space-6); }
  .ds-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-layout-demo--wide, .ds-layout-demo--reading { gap: var(--space-6); }
  .design-system-template .section { padding-block: var(--space-16); }
}