/*
 * BIT BRAND — Bookitier's own product colors
 * ==========================================
 * The palette the PRODUCT owns, as opposed to the per-org --bit-* theme vars.
 *
 * WHY THESE ARE NOT THEMED
 * --bit-primary / --bit-success are org-configurable, and the Color slots are
 * routinely filled with pale badge tints (one org runs Primary #e0ebf2 /
 * Success #def2e6). Anything that must stay legible — the primary button, a
 * success panel, a money figure — cannot be hostage to that value, so it reads
 * the brand vars below instead. checkout-button.css and the .btn-danger rule in
 * frosted-modal.css already took this stance; this file makes it the rule.
 *
 * Orgs still theme the soft surfaces: --bit-badge-* keeps driving the pills, and
 * the --bit-brand-* vars can be overridden on :root to re-skin the product.
 */

:root {
    /* Primary button — the brand gradient (mockup .btn-grad). Previously
       duplicated, hardcoded, in frosted-modal.css and frosted-listing.css, which
       is why it reached employee modals and listings but never the cart. */
    --bit-brand-primary-from: #2674a6;
    --bit-brand-primary-to: #112a54;
    --bit-brand-primary-fg: #ffffff;
    --bit-brand-primary-shadow-rgb: 38, 116, 166;

    /* Success — panels, money, anything that means "paid / done". */
    --bit-brand-success: #055932;
    --bit-brand-success-fg: #ffffff;
}

/* ===== primary button =====
 * Global on purpose: any .btn-primary anywhere is the brand button. Scoped
 * variants that deliberately differ (soft buttons in .card-icon-header, the
 * glass chips in .frosted-listing headers) all carry higher specificity and
 * keep winning on their own.
 *
 * .btn-brand (theme_buttons.css) is the same gradient in a fully-rounded pill
 * cut and reads these same vars — reach for it when you want the pill.
 */

.btn-primary {
    background-image: linear-gradient(135deg, var(--bit-brand-primary-from), var(--bit-brand-primary-to)) !important;
    background-color: var(--bit-brand-primary-from) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: var(--bit-brand-primary-fg) !important;
    border-radius: 11px !important;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(var(--bit-brand-primary-shadow-rgb), .38) !important;
    transition: transform .16s ease, box-shadow .16s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-image: linear-gradient(135deg, var(--bit-brand-primary-from), var(--bit-brand-primary-to)) !important;
    background-color: var(--bit-brand-primary-from) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    color: var(--bit-brand-primary-fg) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(var(--bit-brand-primary-shadow-rgb), .5) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    transform: none !important;
    box-shadow: none !important;
    opacity: .65;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary {
        transition: none;
    }

    .btn-primary:hover,
    .btn-primary:focus {
        transform: none;
    }
}