/*
  Shared button base for Home (2:13410) — "Contact me", "Download CV"
  (hero), "View case" ("Case Card — ATJ1" / "Case Card — Uniqkey", formerly
  Case_1/Case_2), "Book a Call" (CTA). Verified via get_design_context on
  2:13414, 2:13454, 2:13472, 2:13501.

  Nav's ".nav-cta" (css/nav.css) is visually identical to .btn--secondary;
  its own hover rule is defined there (not merged into this shared class)
  since the base rule stays untouched per earlier instruction.

  Hover states added 2026-08-25, verified against the Figma component
  sets "Button primary" (2:15346), "Button Second" (2:15357), and
  "View case" (2:15362) — each a 2-variant (Default/Hover) set, not a
  separate Figma frame per state.
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-white);
  white-space: nowrap;
}

.btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--primary {
  background-color: var(--color-cta-purple);
  border-color: #4f4c61;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primary:hover {
  background-color: #6a5aba;
  border-color: #433a70;
}

.btn--secondary {
  background-color: #151515;
  border-color: #2a2a2a;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.btn--secondary:hover {
  background-color: #181413;
  border-color: #6a5aba;
  color: var(--color-cta-purple);
}

.btn--outline {
  background-color: #151515;
  border-color: rgba(255, 255, 255, 0.2);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn--outline:hover {
  border-color: rgba(154, 115, 255, 0.2);
  color: var(--color-purple-light);
}