/* ============================================================
   BUTTONS — Premium Industrial Controls
   Precise, tactile, architectural. Not SaaS-soft.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  border-radius: 0;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.025em;
  transition:
    box-shadow 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:active {
  transform: scale(0.97) translateY(1px);
}


/* ── Primary — deep amber, industrial control panel ── */

.btn--primary {
  background: linear-gradient(160deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  border: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 4px 20px rgba(217, 119, 6, 0.40),
    0 2px 6px rgba(217, 119, 6, 0.22);
}

.btn--primary:hover {
  filter: brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 8px 32px rgba(217, 119, 6, 0.54),
    0 3px 10px rgba(217, 119, 6, 0.30);
  transform: translateY(-1px);
}

.btn--primary:active {
  filter: brightness(0.95);
  transform: scale(0.97) translateY(1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 2px 8px rgba(217, 119, 6, 0.28);
}


/* ── Secondary — precise outline, strong contrast ── */

.btn--secondary {
  background: transparent;
  color: rgba(10, 15, 25, 0.82);
  border: 1.5px solid rgba(31, 41, 51, 0.42);
  box-shadow: none;
}

.btn--secondary:hover {
  background: rgba(31, 41, 51, 0.04);
  border-color: rgba(31, 41, 51, 0.68);
  color: rgba(10, 15, 25, 0.95);
  box-shadow: 0 2px 10px rgba(31, 41, 51, 0.08);
}

.btn--secondary:active {
  background: rgba(31, 41, 51, 0.08);
  transform: scale(0.97) translateY(1px);
}


/* ── Large ── */

.btn--lg {
  padding: 18px 36px;
  font-size: var(--text-md);
  border-radius: 0;
}


/* ── Full width ── */

.btn--full {
  width: 100%;
}