.auth-page--register,
.gift-page {
    --signup-green: #08774e;
    --signup-green-hover: #066441;
    --signup-green-active: #045537;
}

/* The shared palette uses !important for all primary buttons. */
body :is(.gift-page, .auth-page--register) .btn-primary.signup-emerald-action {
    background: var(--signup-green) !important;
    color: #fff !important;
    border-color: var(--signup-green) !important;
    min-height: 44px;
}

body :is(.gift-page, .auth-page--register) .btn-primary.signup-emerald-action:hover {
    background: var(--signup-green-hover) !important;
    border-color: var(--signup-green-hover) !important;
}

body :is(.gift-page, .auth-page--register) .btn-primary.signup-emerald-action:active {
    background: var(--signup-green-active) !important;
    border-color: var(--signup-green-active) !important;
}

.auth-page--register {
    background-color: #f4faf5;
}

.auth-page--register .auth-card {
    background: #fff;
}

.auth-page--register .auth-gift-context {
    background: #e4f3e9;
    color: #1a5939;
}

body .auth-page--register .auth-form .form-group :is(input[type="text"], input[type="email"], input[type="password"], select) {
    background-color: #fff;
    border-color: #7b897e;
}

body .auth-page--register .auth-form .form-group :is(input[type="text"], input[type="email"], input[type="password"], select):focus {
    border-color: var(--signup-green);
}

body :is(.gift-page, .auth-page--register) .signup-emerald-action:focus-visible,
body .auth-page--register :is(.auth-gift-context, .auth-form :is(input, select, button, a), .auth-switch a):focus-visible {
    outline: 2px solid var(--signup-green);
    outline-offset: 3px;
}

.auth-page--register .auth-consent input {
    accent-color: var(--signup-green);
}

.auth-page--register :is(.auth-consent, .auth-switch) a {
    color: var(--signup-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}