/* ============================================
   STATES — Universal interactive feedback
   ============================================
   Hover, focus-visible, active, disabled, loading on every
   button / link / card / input. Plus 44px touch targets,
   .visually-hidden a11y helper, and reduced-motion fallbacks.

   Load AFTER tokens/textures.css and BEFORE sections/sections.css.
   Token-level interaction rules win on cascade tie-breaks.
   ============================================ */

/* --- BUTTON / CTA states ----------------------------------- */
button,
.cc-cta__action,
.cc-nav__cta,
[role="button"] {
  min-height: 44px;
  cursor: pointer;
  transition:
    transform   var(--dur-swift) var(--ease-spring),
    background  var(--dur-swift),
    border-color var(--dur-swift),
    color       var(--dur-swift),
    opacity     var(--dur-swift),
    box-shadow  var(--dur-swift);
}
button:hover,
.cc-cta__action:hover,
.cc-nav__cta:hover { transform: translateY(-2px); }

button:active,
.cc-cta__action:active,
.cc-nav__cta:active {
  transform: translateY(1px);
  transition-duration: var(--dur-instant);
}

button[disabled],
button[aria-disabled="true"],
.cc-cta__action[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

button[aria-busy="true"],
button[data-loading] {
  cursor: progress;
  pointer-events: none;
}

/* --- LINK states ------------------------------------------- */
a {
  transition: color var(--dur-swift), opacity var(--dur-swift);
}

/* --- FOCUS-VISIBLE rings (keyboard nav only) -------------- */
:focus-visible {
  outline: 2px solid var(--color-discord);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Specific tighter ring for already-bordered elements */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline-offset: 1px;
}

/* --- FORM INPUT states ------------------------------------- */
input,
textarea,
select {
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-fg);
  font-family: var(--font-swiss);
  font-size: var(--type-body);
  transition:
    border-color var(--dur-swift),
    background   var(--dur-swift);
  border-radius: 0;
}
input::placeholder,
textarea::placeholder { color: var(--color-muted); }

input:hover,
textarea:hover,
select:hover { border-color: var(--color-fg); }

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-discord);
  border-color: var(--color-fg);
}

input:invalid:not(:placeholder-shown) {
  border-color: var(--color-discord);
}

input[disabled],
textarea[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- LOADING (button spinner) ------------------------------ */
button[aria-busy="true"]::after,
button[data-loading]::after {
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cc-spin 0.8s linear infinite;
  vertical-align: text-bottom;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* --- VISUALLY HIDDEN (a11y screen-reader-only) ------------ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- REDUCED MOTION --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button[aria-busy="true"]::after,
  button[data-loading]::after { animation: none; }
  button:hover,
  .cc-cta__action:hover,
  .cc-nav__cta:hover { transform: none; }
}