/* Domus Pura shared components (opt-in, no contour bindings) */

/* A. Cards */
.dp-card {
  display: grid;
  gap: var(--dp-space-4);
  background: var(--dp-color-bg-surface);
  border: var(--dp-border-width) solid var(--dp-color-border-soft);
  border-radius: var(--dp-radius-lg);
  padding: var(--dp-space-5);
  box-shadow: var(--dp-shadow-sm);
}
.dp-card--compact { padding: var(--dp-space-4); gap: var(--dp-space-3); }
.dp-card--elevated { box-shadow: var(--dp-shadow-card); }
.dp-card--muted { background: var(--dp-color-bg-muted); }
.dp-card__header { display: grid; gap: var(--dp-space-2); }
.dp-card__titlebox { display: grid; gap: var(--dp-space-1); min-width: 0; }
.dp-card__title { margin: 0; font-size: var(--dp-font-size-lg); font-weight: var(--dp-font-weight-semibold); line-height: var(--dp-line-height-tight); }
.dp-card__subtitle { margin: 0; color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-sm); }
.dp-card__body { display: grid; gap: var(--dp-space-4); min-width: 0; }
.dp-card__fields { display: grid; gap: var(--dp-space-3); }
.dp-card__footer { display: grid; gap: var(--dp-space-3); }

/* B. Metric card */
.dp-metric-card { display: grid; gap: var(--dp-space-2); border: var(--dp-border-width) solid var(--dp-color-border-soft); border-radius: var(--dp-radius-lg); background: var(--dp-color-bg-surface); padding: var(--dp-space-4); }
.dp-metric-card__label { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-sm); margin: 0; overflow-wrap: anywhere; }
.dp-metric-card__value { color: var(--dp-color-text-primary); font-size: var(--dp-font-size-2xl); line-height: var(--dp-line-height-tight); font-weight: var(--dp-font-weight-bold); margin: 0; }
.dp-metric-card__note { color: var(--dp-color-text-muted); font-size: var(--dp-font-size-xs); margin: 0; overflow-wrap: anywhere; }
.dp-metric-card--neutral { border-color: var(--dp-color-border-medium); }
.dp-metric-card--success { background: var(--dp-color-success-bg); border-color: var(--dp-color-success); }
.dp-metric-card--warning { background: var(--dp-color-warning-bg); border-color: var(--dp-color-warning); }
.dp-metric-card--danger { background: var(--dp-color-danger-bg); border-color: var(--dp-color-danger); }
.dp-metric-card--demo { background: var(--dp-color-demo-bg); border-color: var(--dp-color-demo); }

/* C. Buttons */
.dp-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--dp-space-2); border: var(--dp-border-width) solid transparent; border-radius: var(--dp-button-radius); padding: var(--dp-button-padding-y) var(--dp-button-padding-x); font-size: var(--dp-font-size-sm); font-weight: var(--dp-font-weight-medium); line-height: var(--dp-line-height-tight); text-decoration: none; cursor: pointer; }
.dp-button--primary { background: var(--dp-color-accent); color: var(--dp-color-text-inverse); }
.dp-button--secondary { background: var(--dp-color-bg-surface); border-color: var(--dp-color-border-medium); color: var(--dp-color-text-primary); }
.dp-button--ghost { background: transparent; border-color: transparent; color: var(--dp-color-accent); }
.dp-button--danger { background: var(--dp-color-danger); color: var(--dp-color-text-inverse); }
.dp-button--demo { background: var(--dp-color-demo); color: var(--dp-color-text-inverse); }
.dp-button--small { padding: var(--dp-space-1) var(--dp-space-3); font-size: var(--dp-font-size-xs); }
.dp-button:disabled { cursor: not-allowed; opacity: 0.6; }
.dp-button:not(:disabled) { box-shadow: var(--dp-shadow-sm); }

/* D. Action row */
.dp-action-row { display: flex; flex-wrap: wrap; gap: var(--dp-space-3); align-items: center; }
.dp-action-row--compact { gap: var(--dp-space-2); }
.dp-action-row--end { justify-content: flex-end; }
.dp-action-row--between { justify-content: space-between; }
.dp-action-row--divided { padding-top: var(--dp-space-3); border-top: var(--dp-border-width) solid var(--dp-color-border-soft); }

/* E. Registry */
.dp-registry-grid { display: grid; gap: var(--dp-space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dp-registry-card { display: grid; gap: var(--dp-space-3); border: var(--dp-border-width) solid var(--dp-color-border-soft); border-radius: var(--dp-radius-md); background: var(--dp-color-bg-surface); padding: var(--dp-space-4); }
.dp-registry-card__header { display: grid; gap: var(--dp-space-2); }
.dp-registry-card__title { margin: 0; font-size: var(--dp-font-size-md); font-weight: var(--dp-font-weight-semibold); overflow-wrap: anywhere; }
.dp-registry-card__meta { display: grid; gap: var(--dp-space-2); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.dp-registry-card__fields { display: grid; gap: var(--dp-space-2); }
.dp-registry-card__actions { display: flex; flex-wrap: wrap; gap: var(--dp-space-2); }

/* F. Detail */
.dp-detail-panel { display: grid; gap: var(--dp-space-4); border: var(--dp-border-width) solid var(--dp-color-border-soft); border-radius: var(--dp-radius-lg); background: var(--dp-color-bg-surface); padding: var(--dp-space-5); }
.dp-detail-panel__header { display: grid; gap: var(--dp-space-2); }
.dp-detail-panel__title { margin: 0; font-size: var(--dp-font-size-lg); font-weight: var(--dp-font-weight-semibold); }
.dp-detail-panel__note { margin: 0; color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-sm); overflow-wrap: anywhere; }
.dp-detail-group { display: grid; gap: var(--dp-space-3); }
.dp-detail-group__title { margin: 0; font-size: var(--dp-font-size-sm); font-weight: var(--dp-font-weight-semibold); color: var(--dp-color-text-secondary); }
.dp-focus-area { grid-column: 1 / -1; }

/* G. Empty/alert */
.dp-empty-state { display: grid; gap: var(--dp-space-2); text-align: left; padding: var(--dp-space-5); border: var(--dp-border-width) dashed var(--dp-color-border-medium); border-radius: var(--dp-radius-md); background: var(--dp-color-bg-muted); }
.dp-empty-state__title { margin: 0; font-size: var(--dp-font-size-md); font-weight: var(--dp-font-weight-semibold); }
.dp-empty-state__note { margin: 0; color: var(--dp-color-text-secondary); overflow-wrap: anywhere; }
.dp-alert { display: grid; gap: var(--dp-space-2); border: var(--dp-border-width) solid var(--dp-color-border-medium); border-radius: var(--dp-radius-md); padding: var(--dp-space-3) var(--dp-space-4); background: var(--dp-color-bg-muted); color: var(--dp-color-text-secondary); }
.dp-alert--info { background: var(--dp-color-accent-muted); border-color: var(--dp-color-accent); color: var(--dp-color-accent); }
.dp-alert--warning { background: var(--dp-color-warning-bg); border-color: var(--dp-color-warning); color: var(--dp-color-warning); }
.dp-alert--danger { background: var(--dp-color-danger-bg); border-color: var(--dp-color-danger); color: var(--dp-color-danger); }
.dp-alert--success { background: var(--dp-color-success-bg); border-color: var(--dp-color-success); color: var(--dp-color-success); }
.dp-alert--demo { background: var(--dp-color-demo-bg); border-color: var(--dp-color-demo); color: var(--dp-color-demo); }

/* H. Page/header */
.dp-page-header { display: grid; gap: var(--dp-space-2); }
.dp-page-header__title { margin: 0; font-size: var(--dp-font-size-xl); line-height: var(--dp-line-height-tight); font-weight: var(--dp-font-weight-semibold); }
.dp-page-header__subtitle { margin: 0; color: var(--dp-color-text-secondary); overflow-wrap: anywhere; }
.dp-toolbar { display: flex; flex-wrap: wrap; gap: var(--dp-space-3); align-items: center; }
.dp-card-link {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

@media (max-width: 720px) {
  .dp-registry-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}