/*
  buttons.css
  Reusable Comrade button system. Overrides Bootstrap's default button
  look entirely; these classes are used instead of .btn-primary etc.
*/

.comrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 1.3rem;
  border-radius: var(--comrade-radius-pill);
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid transparent;
  /* Hover-driven or not, any transform on this element itself needs a
     stable, predictable anchor — see :active below, the one state
     here that still uses one. */
  transform-origin: center;
  transition: transform var(--comrade-transition-hover),
    box-shadow var(--comrade-transition-hover),
    background-color var(--comrade-transition-hover),
    border-color var(--comrade-transition-hover),
    color var(--comrade-transition-hover);
}

.comrade-btn__icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  transition: transform var(--comrade-transition-hover);
}

.comrade-btn__icon svg {
  width: 100%;
  height: 100%;
}

.comrade-btn:hover .comrade-btn__icon {
  transform: translate(3px, -3px);
}

/* Press feedback stays fast even though hovering-in is slow: a click
   should always feel immediate, only the hover "popup" is meant to be
   slow and smooth. */
.comrade-btn:active {
  transition-duration: var(--comrade-transition-fast);
  transform: translateY(1px) scale(0.98);
}

/*
  Primary: burgundy background, white text. Brand color always wins
  here, neumorphism only adds a tactile bevel on top of it (a hairline
  inset highlight along the top edge, a soft inset shadow along the
  bottom), so the button still reads as unmistakably burgundy, just
  with a touch of physical depth. Pressed briefly flattens the outer
  elevation and deepens the inset instead, reading as "pushed in".
*/
.comrade-btn--primary {
  background-color: var(--comrade-primary);
  color: var(--comrade-text-on-primary);
  box-shadow: 0 10px 24px var(--comrade-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 3px rgba(0, 0, 0, 0.12);
}

/* No translateY here on purpose — see the note at the top of this
   file. Box-shadow alone (bigger blur, bigger spread, no position
   change) reads as the same "lifting" cue and can never itself move
   the button out from under a stationary cursor, which a translateY
   applied directly to the hovered element always risks: near an edge,
   the shift can carry that edge out from under the pointer, firing
   mouseleave, which reverts the shift and re-enters hover — an
   oscillation that reads as flicker. */
.comrade-btn--primary:hover {
  background-color: var(--comrade-primary-hover);
  color: var(--comrade-text-on-primary);
  box-shadow: 0 18px 34px var(--comrade-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.14);
}

.comrade-btn--primary:active {
  box-shadow: 0 4px 10px var(--comrade-shadow-soft),
    inset 0 2px 5px rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/*
  Secondary: the stronger neumorphic candidate, since it already shares
  the page's own cream surface family (unlike primary's saturated
  burgundy). Sits on --comrade-surface-soft rather than pure white so it
  reads as "carved from the same material" as the page background, not
  a separate white card. The border is kept, but faint: the dual
  light/dark shadow does the main work of defining its edge.
*/
.comrade-btn--secondary {
  background-color: var(--comrade-surface-soft);
  color: var(--comrade-text);
  border-color: var(--comrade-border);
  box-shadow: var(--comrade-neumo-raised);
}

/* Same reasoning as .comrade-btn--primary:hover above: no translateY,
   shadow growth alone (--comrade-neumo-raised-hover is already a
   bigger, more offset dual shadow than the resting
   --comrade-neumo-raised) carries the "lift". */
.comrade-btn--secondary:hover {
  background-color: var(--comrade-surface-soft);
  border-color: var(--comrade-primary);
  color: var(--comrade-primary);
  box-shadow: var(--comrade-neumo-raised-hover);
}

.comrade-btn--secondary:active {
  box-shadow: var(--comrade-neumo-pressed);
}

@media (prefers-reduced-motion: reduce) {
  .comrade-btn,
  .comrade-btn__icon {
    transition: background-color var(--comrade-transition-fast),
      color var(--comrade-transition-fast);
  }

  .comrade-btn:active {
    transform: none;
  }

  .comrade-btn:hover .comrade-btn__icon {
    transform: none;
  }
}