/* =============================================================================
   AlphaFlux console components
   -----------------------------------------------------------------------------
   The component layer. Every rule here reads SEMANTIC tokens from tokens.css
   and never a primitive, and never a raw colour, radius, shadow or duration.

   Load order: tokens.css, base.css, then this file.
   ========================================================================== */

/* --- Button -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  block-size: var(--control-h-md);
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

/* The focus ring must appear on the frame focus arrives, so it declares no
   transition. A ring that fades in is lost while tabbing quickly. */
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* A disabled control looks unavailable. A loading one does not: it is working,
   and dimming it makes a running action read as a blocked one. The page that
   exists to show every state is what surfaced this. */
.btn[disabled],
.btn.is-disabled {
  cursor: not-allowed;
  opacity: .55;
}

.btn.is-loading {
  cursor: progress;
  opacity: 1;
}

/* Sizes */

.btn--sm {
  block-size: var(--control-h-sm);
  padding-inline: var(--space-3);
  font-size: var(--text-label);
}

.btn--lg {
  block-size: var(--control-h-lg);
  padding-inline: var(--space-5);
  font-size: var(--text-body);
}

.btn--full {
  inline-size: 100%;
}

/* Intents. Intent is meaning, not styling: one definition per intent, and a
   call site asks for the intent. */

.btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn--primary:hover:not([disabled]) { background: var(--primary-hover); }
.btn--primary:active:not([disabled]) { background: var(--primary-active); }

.btn--secondary {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--foreground);
}
.btn--secondary:hover:not([disabled]) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--foreground-secondary);
}
.btn--ghost:hover:not([disabled]) {
  background: var(--surface-hover);
  color: var(--foreground);
}

.btn--destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.btn--destructive:hover:not([disabled]) { background: var(--destructive-hover); }

.btn--link {
  background: transparent;
  block-size: auto;
  padding: 0;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn--link:hover:not([disabled]) { text-decoration-thickness: 2px; }

/* Loading. A loading button must not also be clickable, which is why the
   component sets disabled alongside the spinner. */

.btn__spinner {
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin 600ms linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(1turn); }
}

/* The one animation worth keeping is the spinner; a user who asked for less
   motion still needs to know the button is working, so it slows rather than
   disappears. */
@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation-duration: 2000ms; }
}

/* --- Demo scaffold ------------------------------------------------------- */
/* Used only by the design-system page so the components can be seen in every
   state. Not a product component. */

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

.demo-swatch {
  display: grid;
  gap: var(--space-1);
}

.demo-chip {
  block-size: var(--space-7);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}