/**
 * Standard CARE buttons (.care-btn + modifiers). Requires care-app-shell-tokens.css first.
 * Loaded by app shell and by pages that render pricing tiers without the full shell (landing lightbox).
 */

.care-btn {
    --care-btn-color: var(--care-app-color-ink-primary);
    --care-btn-bg: var(--care-app-color-surface-default);
    --care-btn-border-color: var(--care-app-color-border-subtle);
    --care-btn-hover-color: var(--care-app-color-ink-primary);
    --care-btn-hover-bg: var(--care-app-color-surface-subtle);
    --care-btn-hover-border-color: var(--care-app-color-border-subtle);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--care-app-space-sm) var(--care-app-space-lg);
    font: inherit;
    font-weight: var(--care-app-type-weight-heading);
    line-height: var(--care-app-type-leading-tight);
    color: var(--care-btn-color);
    background: var(--care-btn-bg);
    border: var(--care-app-border-width-hairline) solid var(--care-btn-border-color);
    border-radius: var(--care-app-radius-md);
    cursor: pointer;
    transition:
        background var(--care-app-motion-duration-interaction) var(--care-app-motion-ease),
        border-color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease),
        color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease),
        transform var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

a.care-btn {
    text-decoration: none;
    box-sizing: border-box;
}

html.care-app a.care-btn,
html.care-app a.care-btn:visited {
    color: var(--care-btn-color);
    text-decoration: none;
}

html.care-app a.care-btn:hover {
    color: var(--care-btn-hover-color);
    text-decoration: none;
}

html.care-app a.care-btn:focus-visible {
    outline: var(--care-app-focus-ring-width) solid var(--care-app-color-focus-ring);
    outline-offset: var(--care-app-focus-ring-offset);
    border-radius: var(--care-app-radius-md);
}

.care-btn:hover {
    color: var(--care-btn-hover-color);
    background: var(--care-btn-hover-bg);
    border-color: var(--care-btn-hover-border-color);
}

.care-btn:focus-visible {
    outline: var(--care-app-focus-ring-width) solid var(--care-app-color-focus-ring);
    outline-offset: var(--care-app-focus-ring-offset);
}

.care-btn--primary {
    --care-btn-color: var(--care-app-color-ink-on-accent);
    --care-btn-bg: var(--care-app-color-accent);
    --care-btn-border-color: transparent;
    --care-btn-hover-color: var(--care-app-color-ink-on-accent);
    --care-btn-hover-bg: var(--care-app-color-accent-hover);
    --care-btn-hover-border-color: transparent;
}

.care-btn--secondary {
    --care-btn-color: var(--care-app-color-ink-secondary);
    --care-btn-hover-color: var(--care-app-color-ink-primary);
}

a.care-btn--secondary {
    --care-btn-bg: transparent;
    --care-btn-hover-bg: transparent;
    --care-btn-border-color: transparent;
    --care-btn-hover-border-color: transparent;
}

.care-btn--danger {
    --care-btn-color: var(--care-app-color-danger-button-label);
    --care-btn-bg: var(--care-app-color-danger-button-surface);
    --care-btn-border-color: var(--care-app-color-danger-button-border);
    --care-btn-hover-color: var(--care-app-color-danger-button-ink);
    --care-btn-hover-bg: var(--care-app-color-danger-button-fill);
    --care-btn-hover-border-color: transparent;
}

.care-btn--danger:hover {
    background: var(--care-app-color-danger-button-fill-hover);
}

html.care-app .care-btn--small {
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
}

/* Full-width CTAs in pricing tier / enterprise compact footers */
.care-pricing-tier__actions .care-btn,
.care-pricing-enterprise-compact__actions .care-btn {
    width: 100%;
    text-align: center;
}