/* =========================================================
   Chaise Processing - Buttons
   ========================================================= */


/* ---------------------------------------------------------
   Base Button
--------------------------------------------------------- */

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    min-height: 48px;
    padding: 0 24px;

    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);

    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;

    text-align: center;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

.button i {
    font-size: 0.82rem;

    transition: transform var(--transition-fast);
}

.button:hover i {
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   Primary
--------------------------------------------------------- */

.button-primary {
    background-color: var(--color-gold);
    border-color: var(--color-gold);

    color: var(--color-navy-950);

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.button-primary:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);

    color: var(--color-navy-950);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}


/* ---------------------------------------------------------
   Secondary

   Intended primarily for dark backgrounds.
--------------------------------------------------------- */

.button-secondary {
    background-color: transparent;

    border-color: rgba(255, 255, 255, 0.38);

    color: var(--color-white);
}

.button-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.7);

    color: var(--color-white);
}


/* ---------------------------------------------------------
   Gold

   Strong CTA used against navy backgrounds.
--------------------------------------------------------- */

.button-gold {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);

    color: var(--color-navy-950);

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.button-gold:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);

    color: var(--color-navy-950);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
   Dark Outline

   Intended for white / ivory backgrounds.
--------------------------------------------------------- */

.button-outline-dark {
    background-color: transparent;

    border-color: var(--color-navy-900);

    color: var(--color-navy-900);
}

.button-outline-dark:hover {
    background-color: var(--color-navy-900);

    border-color: var(--color-navy-900);

    color: var(--color-white);
}


/* ---------------------------------------------------------
   Dark Solid
--------------------------------------------------------- */

.button-dark {
    background-color: var(--color-navy-900);
    border-color: var(--color-navy-900);

    color: var(--color-white);
}

.button-dark:hover {
    background-color: var(--color-navy-950);
    border-color: var(--color-navy-950);

    color: var(--color-white);

    box-shadow: var(--shadow-sm);
}


/* ---------------------------------------------------------
   Light Outline

   For dark sections where a quieter CTA is needed.
--------------------------------------------------------- */

.button-outline-light {
    background-color: transparent;

    border-color: rgba(255, 255, 255, 0.45);

    color: var(--color-white);
}

.button-outline-light:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);

    color: var(--color-navy-950);
}


/* ---------------------------------------------------------
   Sizes
--------------------------------------------------------- */

.button-small {
    min-height: 40px;
    padding: 0 18px;

    font-size: 0.84rem;
}

.button-large {
    min-height: 54px;
    padding: 0 30px;

    font-size: 0.96rem;
}


/* ---------------------------------------------------------
   Full Width
--------------------------------------------------------- */

.button-full {
    width: 100%;
}


/* ---------------------------------------------------------
   Disabled
--------------------------------------------------------- */

.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.55;

    cursor: not-allowed;
    pointer-events: none;

    transform: none;
    box-shadow: none;
}


/* ---------------------------------------------------------
   Accessibility
--------------------------------------------------------- */

.button:focus-visible {
    outline: 3px solid var(--color-gold-light);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   Reduced Motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .button,
    .button i {
        transition: none;
    }

    .button:hover,
    .button:active {
        transform: none;
    }

    .button:hover i {
        transform: none;
    }

}