/* Three variants, matching NetSuite's measured button spec (DESIGN-REFERENCE.md §3.2):
   4px radius, 2px border matching the button's own fill, 11px/20px padding. */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #0F172A;
}

.btn--primary:hover {
  background: #67E3F5;
  border-color: #67E3F5;
  box-shadow: 0 6px 16px rgba(34, 211, 238, 0.35);
}

.btn--dark {
  background: var(--surface-dark);
  border-color: var(--surface-dark);
  color: #FFFFFF;
  font-weight: 400;
  font-size: 16px;
}

.btn--dark:hover {
  background: #1E293B;
  border-color: #1E293B;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}

/* For use on light backgrounds (the common case) -- dark navy on transparent,
   contrast-checked at 13.98:1 against the page background. */
.btn--outline {
  background: transparent;
  border-color: var(--surface-dark);
  color: var(--surface-dark);
}

.btn--outline:hover {
  background: var(--surface-dark);
  color: #FFFFFF;
}

/* For use on dark backgrounds only (hero bands, .section--dark) -- teal reads
   clearly there (9.88:1) but fails badly on light backgrounds (1.81:1), which
   is why this is a separate class rather than the default. */
.btn--outline-inverse {
  background: transparent;
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn--outline-inverse:hover {
  background: var(--accent-primary);
  color: #0F172A;
}