/* ================================================================
   Elevations — template.css
   ================================================================
   Pure visualisations-CSS: elevation-grid (container) + elevation-card
   (atom). Inga group-/row-/page-helpers — den chromen lever i
   preview.css och appliceras av index.html.

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

.elevation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spc-05);
  width: 100%;
  padding: var(--spc-04) 0;
}

.elevation-card {
  display: flex;
  flex-direction: column;
  gap: var(--spc-04);
  padding: var(--spc-05);
  border-radius: var(--shp-md);
  background: transparent;
}

.elevation-card__sample {
  height: 88px;
  background: var(--background-secondary);
  border-radius: var(--shp-sm);
  /* JS sätter box-shadow: var(--token) runtime */
}

.elevation-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.elevation-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;
}

.elevation-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;
}

/* Dark variant — för tokens med "-drk" i namnet (eller dark surface
   recipes). Ljusa highlight/shadow-färger behöver mörk bakgrund för
   att synas. Sample får mer kontrast så subtila opacity-shadows blir
   visuellt tydliga. */
.elevation-card--dark {
  background: var(--clr-key-black);
}
.elevation-card--dark .elevation-card__sample {
  background: var(--clr-neutral-tint-1);
}
.elevation-card--dark .elevation-card__name,
.elevation-card--dark .elevation-card__value {
  color: var(--clr-neutral-tint-9);
}