/* ==========================================================================
   BUTTON COMPONENT
========================================================================== */
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-min-height);
    padding: var(--button-padding);
    border: 2px solid transparent;
    border-radius: var(--radius-button);
    text-align: center;
    text-decoration: none;
    font-size: var(--button-font-size);
    line-height: 1;
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-letter-spacing);
    text-transform: uppercase;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

/* -----------------------------------
   Focus
----------------------------------- */
.button:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 3px;
}

/* ==========================================================================
   PRIMARY
========================================================================== */
.button--primary {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.button--primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-white);
}

/* ==========================================================================
   DARK
========================================================================== */
.button.button--dark {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 8px 16px;
}

.button--dark:hover {
    color: var(--color-white);
}

/* ==========================================================================
   OUTLINE
========================================================================== */
.button--outline {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* ==========================================================================
   OUTLINE ACCENT
========================================================================== */
.button--outline-accent {
    background-color: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ==========================================================================
   SECONDARY
========================================================================== */
.button--secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.button--secondary:hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-white);
}

/* ==========================================================================
   PLAIN WHITE
========================================================================== */
.button.button--plain-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    min-height: auto;
    background: transparent;
    border: 0;
    color: var(--color-white);
    box-shadow: none;
    font-size: var(--font-size-body);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-letter-spacing);
    text-transform: uppercase;
}

.button--plain-white:hover {
    transform: translateY(-1px);
    opacity: 0.8;
    box-shadow: none;
}

.button--plain-white .button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding-top: 4px;
}