html {
  color-scheme: dark;
}

body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  transition: background-color var(--transition-base), color var(--transition-base);
}

::selection {
  background: var(--bg-hover);
}

a {
  color: inherit;
}

.is-hidden {
  display: none;
}

.panel,
.empty-state,
.settings-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  min-width: 0;
  overflow: hidden;
}

/* ── Unified badge system ──
   New class: .badge (+ modifiers --md, --neutral, --success, --warning, --danger, --info, --outline).
   Legacy aliases kept for backward compat: .pill, .status-badge[--*], .tpl-card__step-badge.
   All three legacy classes share the same base rules so visuals stay in sync. */
.badge,
.pill,
.status-badge,
.tpl-card__step-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-weight: 600;
  gap: var(--space-2xs);
  width: fit-content;
}

/* Dense size (default) — for status badges, step badges, inline tags. */
.badge,
.status-badge,
.tpl-card__step-badge {
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  padding: var(--space-2xs) var(--space-xs);
}

/* Medium size — for section headers, count pills. */
.badge--md,
.pill {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  padding: var(--space-2xs) var(--space-sm);
}

/* Variants — paired with legacy classes so existing markup lights up. */
.badge--neutral,
.status-badge--neutral {
  background: var(--bg-status-neutral);
  color: var(--text-secondary);
}
.badge--success,
.status-badge--success {
  background: var(--bg-status-success);
  color: var(--vibrance-success);
}
.badge--warning,
.status-badge--warning {
  background: var(--bg-status-warning);
  color: var(--vibrance-warning);
}
.badge--danger {
  background: var(--bg-danger-soft);
  color: var(--vibrance-danger);
}
.badge--info,
.pill {
  background: var(--bg-accent-soft);
  color: var(--text-secondary);
}
.badge--outline,
.tpl-card__step-badge {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

.btn,
.btn-secondary,
.btn-danger,
.btn-success {
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: inline-flex;
  gap: var(--space-xs);
  justify-content: center;
  min-height: var(--control-h-md);
  padding: 0 var(--space-md);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.btn {
  background: var(--neutral-700);
  border-color: var(--border-strong);
  color: var(--neutral-100);
  font-weight: 600;
}

/* Hover states — all three color variants change bg+border+color for consistent feedback. */
.btn:hover {
  background: var(--vibrance-hover);
  border-color: var(--vibrance-hover);
  color: var(--text-inverse);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-danger:hover {
  background: var(--bg-danger-soft);
  border-color: var(--border-danger-soft);
  color: var(--vibrance-danger);
}

.btn-success:hover {
  background: var(--bg-success-soft);
  border-color: var(--border-success-soft);
  color: var(--vibrance-success);
}

.btn:active,
.btn-secondary:active,
.btn-danger:active,
.btn-success:active {
  transform: scale(0.97);
}

/* Unified focus ring on all button variants */
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.btn-danger { color: var(--vibrance-danger); }
.btn-success { color: var(--vibrance-success); }

/* Flash feedback — applied temporarily via JS after async actions */
.btn--flash-ok {
  animation: btn-flash-ok 1.6s ease-out forwards;
}

.btn--flash-err {
  animation: btn-flash-err 1.6s ease-out forwards;
}

@keyframes btn-flash-ok {
  0%   { background: var(--vibrance-success); border-color: var(--vibrance-success); color: var(--neutral-900); }
  70%  { background: var(--vibrance-success); border-color: var(--vibrance-success); color: var(--neutral-900); }
  100% { background: var(--neutral-700); border-color: var(--border-strong); color: var(--neutral-100); }
}

@keyframes btn-flash-err {
  0%   { background: var(--vibrance-danger); border-color: var(--vibrance-danger); color: var(--neutral-100); }
  70%  { background: var(--vibrance-danger); border-color: var(--vibrance-danger); color: var(--neutral-100); }
  100% { background: var(--neutral-700); border-color: var(--border-strong); color: var(--neutral-100); }
}
.btn-secondary { background: transparent; }
.btn-secondary--sm {
  font-size: var(--text-sm);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-sm);
}

.btn-text-danger {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-xs);
  padding: var(--space-2xs) var(--space-xs);
  transition: color var(--transition-fast);
}
.btn-text-danger:hover { color: var(--vibrance-danger); }

.btn:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.field,
.textarea,
.select {
  background: var(--bg-card-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  max-width: 100%;
  min-height: var(--control-h-lg);
  min-width: 0;
  padding: 0 var(--space-sm);
  transition: border-color var(--transition-base), background-color var(--transition-base);
  width: 100%;
}

.textarea {
  min-height: 6rem;
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  resize: vertical;
}

/* Unified focus ring — applies to all text inputs regardless of historical class name. */
.field:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  border-color: var(--vibrance-hover);
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Custom checkbox & radio */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="checkbox"], input[type="radio"] { appearance: none; background: var(--bg-card-soft); border: 1.5px solid var(--border-strong); cursor: pointer; flex-shrink: 0; height: 1.25rem; position: relative; transition: background-color var(--transition-fast), border-color var(--transition-fast); width: 1.25rem; }
input[type="checkbox"] { border-radius: var(--radius-xs); }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]::after, input[type="radio"]::after { content: ''; left: 50%; opacity: 0; position: absolute; top: 50%; transition: opacity var(--transition-fast), transform var(--transition-fast); }
input[type="checkbox"]::after { border-bottom: 2px solid var(--text-inverse); border-right: 2px solid var(--text-inverse); height: 0.55rem; top: 45%; transform: translate(-50%, -50%) rotate(45deg) scale(0); width: 0.3rem; }
input[type="radio"]::after { background: var(--text-inverse); border-radius: 50%; height: 0.45rem; transform: translate(-50%, -50%) scale(0); width: 0.45rem; }

input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--vibrance-hover); border-color: var(--vibrance-hover); }
input[type="checkbox"]:checked::after { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
input[type="radio"]:checked::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* File dropzone button */
.file-dropzone { align-items: center; background: var(--bg-accent-soft); border: 2px dashed var(--border-strong); border-radius: var(--radius-md); cursor: pointer; display: inline-flex; gap: var(--space-xs); justify-content: center; padding: var(--space-sm) var(--space-md); transition: background var(--transition-fast); }
.file-dropzone:hover { background: var(--bg-hover); }
.file-dropzone__icon { font-size: var(--text-lg); line-height: 1; }
.file-dropzone__label { color: var(--text-secondary); font-size: var(--text-sm); }