.btn {
  font: inherit;
  font-size: var(--label-large-size);
  font-weight: var(--label-large-weight);
  letter-spacing: var(--label-large-tracking);
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  transition: transform var(--motion-micro) var(--ease-enter);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn-filled { background: var(--color-primary); color: var(--color-on-primary); }
.btn-tonal { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.card {
  background: var(--card-highlight), var(--color-surface);
  border: var(--border-width) solid var(--color-card-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.card h2, .card h3 { font-size: var(--title-medium-size); line-height: var(--title-medium-line); letter-spacing: 0; }
.card p { color: var(--color-on-surface-variant); font-size: var(--body-medium-size); }

.auto-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 100%), 1fr)); }

.tag { display: inline-flex; align-items: center; padding: var(--space-xs) 10px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-card-edge); font-size: var(--body-small-size); font-weight: 600; }
.badge { display: inline-block; padding: 2px var(--space-sm); border-radius: var(--radius-sm); background: var(--color-secondary-container); color: var(--color-on-secondary-container); font-size: var(--label-small-size); font-weight: 700; letter-spacing: var(--label-small-tracking); }