/* ============================================================
   components.css — Bootloop reusable component styles
   ============================================================
   Empty placeholder. Populated starting in M3 with classes for:
     - .btn / .btn-primary / .btn-ghost / .btn-danger
     - .input / .input-error / form fields
     - .card / .card-header / .card-body
     - .badge / .badge-success / .badge-warning / .badge-error
     - .nav / .navbar
     - .table

   All components consume tokens defined in theme.css. Reference
   variables (e.g. var(--color-brand-500)) — never hardcode.

   See docs/design-system.md for the spec.
   ============================================================ */

/* ============================================================
   Brand
   ============================================================ */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-fast);
}
.brand-link:hover { opacity: 0.85; }
.brand-link:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.brand-mark {
  height: 32px;
  width: auto;
  display: block;
}

.brand-wordmark {
  height: 20px;
  width: auto;
  display: block;
}