/* ============================================================
   CARL DESIGN SYSTEM — BUTTONS
   One component, themed by .theme-carl / .theme-compass.
   Variants: --primary (brand gradient) / --white / --navy
   Sizes: --sm / --lg.  Zero !important. Accessible states.
   ============================================================ */

.carl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font: 600 1rem/1 var(--carl-font);
  padding: .85em 1.6em;
  border-radius: var(--carl-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

/* States (shared) */
.carl-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.carl-btn:active        { transform: translateY(1px); }
.carl-btn[disabled],
.carl-btn.is-disabled   { opacity: .5; pointer-events: none; }

/* --- Primary: brand gradient (teal for CARL, lime for Compass) --- */
.carl-btn--primary {
  background: var(--brand-grad);
  color: var(--brand-ink);
  box-shadow: var(--carl-shadow-btn);
}
.carl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,45,76,.12), 0 14px 28px -8px rgba(0,45,76,.30); }

/* --- White --- */
.carl-btn--white {
  background: var(--carl-white);
  color: var(--carl-navy);
  border-color: var(--carl-border);
}
.carl-btn--white:hover { background: var(--carl-off-white); transform: translateY(-2px); box-shadow: var(--carl-shadow-card); }

/* --- Navy --- */
.carl-btn--navy {
  background: var(--carl-navy);
  color: var(--carl-white);
  border-color: rgba(255,255,255,.16);   /* edge for dark surfaces; invisible on light */
}
.carl-btn--navy:hover { background: var(--carl-navy-deep); transform: translateY(-2px); box-shadow: var(--carl-shadow-btn); }

/* --- Sizes --- */
.carl-btn--sm { padding: .6em 1.1em;  font-size: .875rem; }
.carl-btn--lg { padding: 1.05em 2.1em; font-size: 1.125rem; }

/* Arrow helper (matches your existing "→" usage) */
.carl-btn .carl-btn__arrow { transition: transform .15s ease; }
.carl-btn:hover .carl-btn__arrow { transform: translateX(3px); }