@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
@import url("./variables.css");
@import url("./base.css");
@import url("./layout.css");
@import url("./buttons.css");
@import url("./cards.css");
@import url("./forms.css");
@import url("./tables.css");
@import url("./utilities.css");
@import url("./login.css");
@import url("./branding.css");

.modal {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal::backdrop {
  background: var(--color-overlay);
  backdrop-filter: blur(3px);
}

.modal__header,
.modal__body,
.modal__footer {
  padding: var(--space-5) var(--space-6);
}

.modal__header,
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.modal__header { border-bottom: 1px solid var(--color-border); }
.modal__footer { justify-content: flex-end; border-top: 1px solid var(--color-border); }
.modal__title { margin: 0; font-size: var(--font-size-lg); }