/* Buttons (element-level defaults + variants) and badges.
 * Source: schreibwerkstatt components/buttons-badges.css (feature-origin
 * badges removed). */

@layer components {
/* === Buttons ===
   Every <button> is a secondary button by default (transparent, hairline).
   Variants are CLASSES on the button, never a re-definition. */
button {
  padding: var(--size-default-padding-y) var(--space-14);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
button:hover { background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface)); }
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* NOTE: replaces any own transform — an absolutely centred button needs its
   own :active rule (translate + scale) or `transform: none`. */
button:active { transform: scale(0.98); }
button:disabled { opacity: var(--opacity-hint); cursor: not-allowed; transform: none; }

button.primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
button.primary:hover { background: var(--color-primary-hover); }

button.success {
  background: var(--color-success);
  color: var(--color-surface);
  border-color: var(--color-success);
}
button.success:hover { background: var(--color-success-hover); }

button.danger {
  color: var(--color-err-text);
  border-color: color-mix(in srgb, var(--color-err-border) 50%, var(--color-border-input));
}
button.danger:hover { background: var(--color-err-bg); }

/* Compact size — pairs with other compact controls in one row. */
.btn-compact {
  font-size: var(--size-compact-font-size);
  padding: var(--size-compact-padding);
}

/* Count badge inside a button (pill). */
.btn-count {
  display: inline-block;
  margin-left: var(--space-6);
  padding: 0 var(--space-6);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  background: var(--color-tag-bg);
  color: var(--color-text);
  border-radius: var(--radius-full);
  vertical-align: middle;
}
button.primary .btn-count {
  background: color-mix(in srgb, var(--color-on-primary) 25%, transparent);
  color: var(--color-on-primary);
}

/* Button group row (expand/collapse all, filters). */
.btn-group {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  align-items: center;
  flex-wrap: wrap;
}

/* === Badges — pills with a status tint === */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  line-height: var(--lh-tight);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-weight: var(--fw-medium);
}
.badge-ok      { background: var(--color-ok-bg);   color: var(--color-ok-text); }
.badge-warn    { background: var(--color-warn-bg); color: var(--color-warn-text); }
.badge-err     { background: var(--color-err-bg);  color: var(--color-err-text); }
/* Value-free classification (kind/category), not a status. */
.badge-neutral { background: var(--color-tag-bg);  color: var(--color-muted); }
}