/* Button
 *
 * Semantic <button> or <a class="btn"> only — never a div.
 * Every value comes from tokens. Logical properties throughout so RTL is free.
 *
 * Variants: primary (default) | secondary | ghost | danger
 * Sizes:    sm | (base) | lg
 * States:   default hover focus-visible active disabled loading
 */

.btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  /* Minimum touch target, WCAG 2.5.5. Never shrink below this — the sm variant
   * reduces padding and font, not the hit area. */
  min-block-size: var(--target-min);
  padding-inline: var(--space-5);
  padding-block: var(--space-2);

  /* No fixed width. Translated labels run ~40% longer than English. */
  inline-size: auto;
  max-inline-size: 100%;

  /* type */
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;

  /* A long label wraps rather than overflowing its container. */
  overflow-wrap: anywhere;

  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;

  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

/* One focus treatment for the whole system. Never restyled per component,
 * never removed without an equally clear replacement. */
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---- variants ---------------------------------------------------------- */

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
}
.btn--primary:hover:not(:disabled):not([aria-busy="true"]) {
  background-color: var(--color-accent-hover);
}
.btn--primary:active:not(:disabled) {
  background-color: var(--color-accent-active);
}

.btn--secondary {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled):not([aria-busy="true"]) {
  background-color: var(--color-surface-sunken);
}
.btn--secondary:active:not(:disabled) {
  border-color: var(--color-accent);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
}
.btn--ghost:hover:not(:disabled):not([aria-busy="true"]) {
  background-color: var(--color-surface-sunken);
}

/* Destructive. Colour alone never carries the meaning — the label must say
 * what it does ("Delete organisation", not "Confirm"). */
.btn--danger {
  background-color: var(--color-danger);
  color: var(--color-text-on-accent);
}
.btn--danger:hover:not(:disabled):not([aria-busy="true"]) {
  background-color: var(--color-danger-hover);
}

/* ---- sizes ------------------------------------------------------------- */

.btn--sm {
  font-size: var(--text-sm);
  padding-inline: var(--space-4);
}

.btn--lg {
  font-size: var(--text-lg);
  padding-inline: var(--space-6);
  padding-block: var(--space-3);
}

/* Full width — used on narrow viewports and in the auth card. */
.btn--block {
  display: flex;
  inline-size: 100%;
}

/* ---- states ------------------------------------------------------------ */

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
}

/* Loading. Uses aria-busy so assistive tech is told, not just the eye.
 * The label stays in the DOM — replacing it with a spinner alone loses the
 * accessible name and reflows the button. */
.btn[aria-busy="true"] {
  cursor: progress;
  color: transparent;
}
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentcolor;
  border-block-start-color: transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-on-accent);
  animation: btn-spin 0.6s linear infinite;
}
.btn--secondary[aria-busy="true"]::after,
.btn--ghost[aria-busy="true"]::after {
  color: var(--color-text);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Respect the OS setting. The spinner becomes a static ring rather than
 * disappearing, so the busy state is still visible. */
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation: none; opacity: 0.6; }
}

/* ---- groups ------------------------------------------------------------ */

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}