/*
 * Design System v1 foundations
 *
 * These rules are deliberately additive: legacy selectors and module-specific
 * compositions remain valid while new work can use the semantic primitives.
 */

html {
  font-family: var(--font-sans);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Keeps programmatic workspace focus from suppressing a keyboard-visible ring. */
.workspace:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: -3px;
}

/* The dark sidebar needs a light focus ring with independent contrast. */
.sidebar[data-sidebar] .brand:focus-visible,
.sidebar[data-sidebar] .nav-item:focus-visible,
.sidebar[data-sidebar] .nav-group > summary:focus-visible,
.sidebar[data-sidebar] .sidebar-collapse-toggle:focus-visible,
.sidebar[data-sidebar] .sidebar-mobile-close-toggle:focus-visible {
  outline: 3px solid var(--focus-ring-color-dark);
  outline-offset: 2px;
}

.button,
button {
  font-family: var(--font-sans);
}

.button[aria-busy="true"],
button[aria-busy="true"],
.button.is-loading,
button.is-loading {
  cursor: progress;
}

.button:disabled,
.button[aria-disabled="true"],
button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
}

.card,
.table-card,
.form-card {
  --card-surface: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-surface);
  --card-shadow: var(--shadow-surface);
}

.ds-card,
.state-card {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
  box-shadow: var(--shadow-surface);
}

.table-scroll,
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.table-scroll:focus-visible,
.table-responsive:focus-visible {
  outline-offset: 4px;
}

.form-row .field-error,
.field-error,
.field-validation-message,
.errorlist {
  color: #991b1b;
}

.field-error,
.field-validation-message {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
}

.form-row.has-error :is(input, select, textarea),
:is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-status-danger);
}

.messages {
  display: grid;
  gap: var(--space-2);
}

.message {
  margin-bottom: 0;
}

.message.info,
.alert.info,
.inline-alert.info {
  border-color: #bae6fd;
  background: #e0f2fe;
  color: #075985;
}

.message.warning,
.alert.warning,
.inline-alert.warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.message.success,
.alert.success,
.inline-alert.success {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #166534;
}

.message.error,
.message.danger,
.alert.error,
.alert.danger,
.inline-alert.error,
.inline-alert.danger {
  border-color: #fecaca;
  background: #fee2e2;
  color: #991b1b;
}

.alert,
.state-empty,
.state-loading,
.state-error,
.state-success,
.empty-state {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.alert {
  color: var(--color-text);
}

.state-empty,
.empty-state {
  border-style: dashed;
  text-align: center;
}

.state-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.state-error {
  border-color: #fecaca;
  background: #fff7f7;
  color: #991b1b;
}

.state-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.settings-subsection {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.settings-subsection h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--text-lg);
}

.settings-subsection > .muted {
  max-width: 72ch;
  margin: 0 0 var(--space-4);
}

@media (max-width: 640px) {
  .ds-card,
  .state-card {
    padding: var(--space-4);
  }

  .table-scroll,
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}