/* ── Buttons ───────────────────────────────────────────────────
   Two variants, same Brand/Red family, different weight (Issue 45 v2,
   approved mockup: "primary = red filled, secondary = red outline") -
   primary is solid Red, the site's one "act now" fill; secondary is
   the same Red as an outline + text color on a transparent/white
   background, one visual step down in weight rather than a different
   hue. (Issue 45's first revision had put Secondary on a neutral
   grey outline instead, reasoning that repeating Brand color on every
   two-button row diluted "CTA" back into "just a color" - the
   approved mockup explicitly asks for red-outline again, so that's
   reverted here.) Two variants cover every case; do not add a third
   without a concrete cross-workspace need. A destructive action
   (Delete) is neither of these - see apps/portal's technology/media
   delete buttons, which use --status-danger-text directly, since
   deletion is a business-state-adjacent risk, not a CTA weight.
*/
.btn-primary,
.btn-secondary {
    display: inline-block;
    font: var(--type-label-weight) var(--type-small-size) / var(--type-small-line-height) var(--font-sans);
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
    text-decoration: none;
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    text-decoration: none;
}

form .btn-primary {
    border: none;
}