/* 
.btn--danger {
  --btn-background: var(--color-negative);
  --btn-border-color: transparent;
  --btn-color: white;
  --btn-hover-color: rgb(from var(--color-negative) r g b / .9);
}

.btn--sm {
  --btn-font-size: var(--text-xs);
  --btn-padding: .25rem .75rem;
}


.flex {
  display: flex;
}

.grid {
  display: grid;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--size-2);
}

.gap-4 {
  gap: var(--size-4);
}

.gap-6 {
  gap: var(--size-6);
}

.text-secondary {
  color: var(--color-text-subtle);
}

.form-group {
  margin-block-end: var(--size-4);
}

.form-section {
  border: var(--border) solid var(--color-border);
  border-radius: var(--rounded-lg);
  padding: var(--size-4);
  margin-block-end: var(--size-4);
}

.form-row {
  display: grid;
  gap: var(--size-4);
}

.form-actions {
  display: flex;
  gap: var(--size-2);
  margin-block-start: var(--size-6);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--size-6);
}

.empty-state {
  text-align: center;
  padding: var(--size-12) var(--size-4);
  color: var(--color-text-subtle);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--size-6);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.admin-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--size-3) var(--size-6);
}

.admin-dl dt {
  font-weight: var(--font-semibold);
}

.link {
  color: var(--color-link);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}


.current-image {
  margin-block-start: var(--size-3);
}

.current-image img {
  max-inline-size: 300px;
  border-radius: var(--rounded-md);
  border: var(--border) solid var(--color-border);
}

.error-messages {
  background: rgb(from var(--color-negative) r g b / .1);
  border: 1px solid var(--color-negative);
  padding: var(--size-4);
  border-radius: var(--rounded-md);
  margin-block-end: var(--size-4);
}

.error-messages h2 {
  font-weight: var(--font-bold);
  margin-block-end: var(--size-2);
  color: var(--color-negative);
}

.error-messages ul {
  padding-inline-start: var(--size-5);
  color: var(--color-negative);
} */