/* ============================================
   Design System Page Styles
   Matches Reference UI: max-w-5xl mx-auto p-6 space-y-8
   ============================================ */

.design-system {
  max-width: 64rem; /* max-w-5xl = 1024px */
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem; /* p-6 = 24px */
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 = 32px */
}

/* Section cards: bg-white rounded-xl p-6 shadow-sm */
.design-system > ::deep .duara-section {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl, 0.75rem); /* rounded-xl = 12px */
  padding: 1.5rem; /* p-6 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-sm */
}

/* Section titles: text-xl font-semibold text-[#115E59] */
.design-system > ::deep .duara-section__title {
  font-size: var(--text-xl); /* 1.25rem = 20px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark); /* #115E59 */
  margin-bottom: var(--spacing-4);
}

/* Color swatches grid */
.design-system__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.design-system__swatch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Swatch color box: h-20 rounded-lg shadow-md */
.design-system__swatch-color {
  height: 5rem; /* h-20 = 80px */
  border-radius: var(--radius-md); /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

.design-system__swatch-meta {
  padding-top: var(--spacing-1);
}

.design-system__swatch-meta p {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.design-system__swatch-meta small {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/* Grids for component showcases */
.design-system__grid {
  display: grid;
  gap: 1rem;
}

.design-system__grid--buttons,
.design-system__grid--inputs {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.design-system__grid--badges {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.design-system__grid--commerce {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Component labels: uppercase, small, muted */
.design-system__label {
  margin: 0 0 var(--spacing-3);
  color: var(--color-gray-900);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* Stacks for vertical/horizontal layouts */
.design-system__stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.design-system__stack--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

/* Commerce block with gradient accent */
.design-system__money {
  background: radial-gradient(
    circle at top right,
    color-mix(in srgb, var(--color-primary) 12%, transparent),
    var(--color-surface)
  );
}

/* Note text for overlays section */
.design-system__note {
  color: var(--color-gray-700);
  line-height: var(--line-height-normal);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .design-system {
    padding: 1rem;
    gap: 1.5rem;
  }

  .design-system > ::deep .duara-section {
    padding: 1rem;
  }

  .design-system__grid--buttons,
  .design-system__grid--badges,
  .design-system__grid--inputs,
  .design-system__grid--commerce {
    grid-template-columns: 1fr;
  }
}