/* Caledonian — cos-buttons.css */
.cos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  font-family: var(--cos-font-ui);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .20em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: .9375rem 2.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .35s, color .35s, border-color .35s, transform .2s;
}
.cos-btn:active { transform: scale(.99); }
.cos-btn svg { flex-shrink: 0; }

/* Primary — solid gold; inverts to outline on hover */
.cos-btn--primary   { background: var(--cos-gold); color: var(--cos-navy); border-color: var(--cos-gold); }
.cos-btn--primary:hover { background: transparent; color: var(--cos-gold); }

/* Ghost dark */
.cos-btn--ghost-dark { background: transparent; color: rgba(245,240,232,.65); border-color: rgba(245,240,232,.22); }
.cos-btn--ghost-dark:hover { color: var(--cos-cream); border-color: rgba(245,240,232,.55); background: rgba(245,240,232,.05); }

/* Ghost light */
.cos-btn--ghost-light { background: transparent; color: rgba(11,25,38,.60); border-color: rgba(11,25,38,.20); }
.cos-btn--ghost-light:hover { color: var(--cos-navy); border-color: rgba(11,25,38,.50); background: rgba(11,25,38,.04); }