/* Button component styles */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.c-button:disabled,
.c-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.c-button.is-loading {
  cursor: wait;
}

.c-button.is-loading .c-button__inner { visibility: hidden; }

/* ---- Inner layout ---- */
.c-button__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.c-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}
.c-button__icon svg { width: 100%; height: 100%; }

/* ---- Sizes ---- */
.c-button--sm {
  height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}
.c-button--md {
  height: 38px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}
.c-button--lg {
  height: 48px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

.c-button--full { width: 100%; }

/* ---- Variants ---- */
.c-button--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}
.c-button--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.c-button--primary:active { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); }

.c-button--secondary {
  background: var(--color-bg-overlay);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.c-button--secondary:hover { background: var(--color-bg-overlay-2); border-color: var(--color-border-strong); }
.c-button--secondary:active { background: var(--color-bg-elevated); }

.c-button--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.c-button--ghost:hover { background: var(--color-bg-overlay); }
.c-button--ghost:active { background: var(--color-bg-overlay-2); }

.c-button--danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.c-button--danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
.c-button--danger:active { background: var(--color-danger-pressed); }

.c-button--link {
  background: transparent;
  color: var(--color-link);
  border-color: transparent;
  padding: 0;
  height: auto;
}
.c-button--link:hover { color: var(--color-link-hover); text-decoration: underline; }

.c-button--cta {
  background: var(--color-cta);
  color: #fff;
  border-color: var(--color-cta);
}
.c-button--cta:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.c-button--cta:active { background: var(--color-cta-pressed); }

/* ---- Spinner ---- */
.c-button__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: c-button-spin 0.8s linear infinite;
}
.c-button.is-loading .c-button__spinner { display: block; }

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