/* ================================================================
   Colors — template.css
   ================================================================
   Pure visualisations-CSS: swatch-grid (container) + swatch-card (atom).
   Inga group-/row-/typography-helpers — den chromen lever i preview.css
   och appliceras av index.html. Konsumenter som vill bygga egen layout
   refererar bara hit för card-styles, ignorerar grid om de vill annan
   layout.

   Förutsätter att tokens-filen är laddad (--clr-*, --shp-*, --spc-*,
   --background-*, --content-*, --border-*, --type-family-code).
================================================================ */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spc-04);
  width: 100%;
}

.swatch-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--shp-sm);
  overflow: hidden;
  border: 1px solid var(--border-tertiary);
  background: var(--background-secondary);
}

.swatch-card__color {
  height: 96px;
  width: 100%;
  /* background sätts runtime via JS från data-token-attributet:
     - solid colors  → backgroundColor
     - gradients     → backgroundImage
     - opacity-lgt   → token-color stackad ovanpå svart bg
     - opacity-drk   → token-color stackad ovanpå vit bg */
}

.swatch-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--spc-03);
}

.swatch-card__name {
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-primary);
  word-break: break-all;
}

.swatch-card__value {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  word-break: break-all;
}

/* ---------- Family-mode: en row per familj, subsections inuti ----------
   Används när Layer 2-rader grupperas per family (background, content,
   border, brand). row__meta visar familjenamn + total token-count;
   row__content staplar subsections med egna title-md-rubriker så alla
   paletter inom en familj delar samma layout-yta. */

.row__content {
  display: flex;
  flex-direction: column;
  gap: var(--spc-08);
  width: 100%;
  min-width: 0;
}

.subsection {
  display: flex;
  flex-direction: column;
  gap: var(--spc-03);
}

/* Linje + padding-top bara MELLAN subsections — första i raden ska
   sitta direkt mot row__content top utan extra avgränsare. */
.subsection + .subsection {
  padding-top: var(--spc-08);
  border-top: 1px solid var(--border-tertiary);
}

.subsection__head {
  display: flex;
  align-items: baseline;
  gap: var(--spc-03);
  flex-wrap: wrap;
}

.subsection__title {
  margin: 0;
}

.subsection__count {
  color: var(--content-tertiary);
}

/* ---------- Variant-state-layout ----------
   Används för subgroups med layout.kind = "variant-state" (button etc.).
   Bucketar tokens per variant och renderar en .variant per variant med
   swatches i fix state_order (default → hover → focus → active → disabled). */

.subsection > .variant + .variant,
.row > .variant + .variant,
.subsection > .swatch-grid + .variant,
.row > .swatch-grid + .variant {
  margin-top: var(--spc-05);
}

.variant {
  display: flex;
  flex-direction: column;
  gap: var(--spc-03);
}

.variant__head {
  display: flex;
  align-items: baseline;
}

.variant__title {
  margin: 0;
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-secondary);
}