/* Buttons — Standard Bearer Co.
   Heritage rule: Red is accent only. Never use --accent for primary CTAs.
   Use --primary (Navy) for the dominant CTA on every page. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  line-height: 1;
  white-space: nowrap;
}
.btn:focus-visible { outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* primary — Navy on Cream/White */
.btn--primary {
  background: var(--c-navy);
  color: var(--c-cream);
  border-color: var(--c-navy);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--c-navy-deep);
  color: var(--c-cream);
}

/* ghost — for secondary actions on cream/white */
.btn--ghost {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--c-navy);
  color: var(--c-cream);
}

/* ghost-cream — for secondary actions on Navy backgrounds */
.btn--ghost-cream {
  background: transparent;
  color: var(--c-cream);
  border-color: var(--c-cream);
}
.btn--ghost-cream:hover, .btn--ghost-cream:focus-visible {
  background: var(--c-cream);
  color: var(--c-navy);
}

/* accent — Patriot Red. Sparingly: sale tags, "Shop the Drop" hero CTA when intentional. */
.btn--accent {
  background: var(--c-red);
  color: var(--c-white);
  border-color: var(--c-red);
}
.btn--accent:hover, .btn--accent:focus-visible {
  background: var(--c-red-deep);
  color: var(--c-white);
}

/* link-style button */
.btn--link {
  background: transparent;
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: var(--sp-2) 0;
  border: 0;
}
.btn--link:hover { color: var(--c-red); }

/* sizes */
.btn--sm { padding: 10px 18px; font-size: var(--fs-caption); }
.btn--lg { padding: 18px 36px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }