/* Pair filled controls explicitly; legacy .btn is an outlined button. */
.btn.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; filter: none; }
.btn.btn-success:hover, .btn.btn-danger:hover, .btn.btn-warning:hover { color: #fff; filter: brightness(.9); }
.btn:focus-visible, .cv-btn:focus-visible { filter: none; }

/* Placeholders are instructions too. Do not allow browser opacity to fade them. */
input::placeholder, textarea::placeholder { color: var(--ink-5) !important; opacity: 1 !important; }
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select, textarea { border-color: var(--control-border) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; }

/* Keep links identifiable when surrounded by prose, regardless of colour. */
main p a:not(.btn):not(.cv-btn), .page p a:not(.btn):not(.cv-btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
}
.cv-recruiter-mode-pill:has(input:focus-visible),
.cv-chip:has(input:focus-visible),
.cv-chip-toggle:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Dark panels need their own light secondary text rather than light-page ink. */
.cv-tier-card--featured, .cv-landing-section--ink {
  --ink-4: #c2c2cb;
  --ink-5: #c2c2cb;
  --accent-3: #a5b4fc;
}
.cv-landing-section--ink .cv-trust-grid__body { color: #c2c2cb; }
.cv-pricing-matrix__dash { color: var(--ink-5); }
@media (forced-colors: active) {
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight !important;
  }
  .btn, .cv-btn, .cv-chip span, .cv-recruiter-mode-pill { border: 1px solid ButtonText !important; }
}