.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-deep);
  font-size: var(--text-base);
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.btn-primary:hover { background: var(--accent); color: var(--on-accent); }

/* Button variants live here, not in the layout sheets. They modify .btn-primary
   at equal specificity, so a variant defined in an earlier-linked file loses on
   source order and its colour is silently discarded. */

/* Outlined on the dark header band. Without this the label inherits
   --accent-deep, which is the band colour, and the button renders empty. */
.nav-cta {
  border-color: rgba(237, 243, 242, 0.42);
  color: var(--on-dark);
}
.nav-cta:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--petrol-900);
}

/* Solid bright petrol, for use on the dark closing band where an outlined
   button in the mid accent would sit at roughly 2.5:1 and disappear. */
.btn-on-dark {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--petrol-900);
}
.btn-on-dark:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--petrol-900); }
.btn-primary-lg { padding: 15px 32px; }
.btn-primary-sm { padding: 9px 18px; font-size: var(--text-sm); }

/* The destination is a placeholder until a real link exists. */
.btn-primary[data-cta="pending"] { cursor: default; }