/* =========================
   BUTTON BASE
========================= */

button.btn-grd {
    width: 100%;
    padding: var(--padding-md);

    border-radius: var(--radius-sm);
    border: 2px solid var(--border-primary);

    cursor: pointer;

    font-weight: bold;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;

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


/* =========================
   BUTTON VARIANTS
========================= */

button.btn-grd-p {
    background: var(--gradient-primary);
    color: var(--text-primary);

    border-color: var(--border-primary);
}


button.btn-grd-s {
    background: var(--gradient-secondary);
    color: var(--text-primary);

    border-color: var(--border-secondary);
}


button.btn-grd-a {
    background: var(--gradient-accent);
    color: var(--text-primary);

    border-color: var(--border-accent);
}


/* =========================
   HOVER
========================= */

button.btn-grd:hover {
    transform: translateY(var(--hover-lift));
}


button.btn-grd-p:hover {
    border-color: var(--border-primary-hover);
    box-shadow: var(--glow-primary);
}


button.btn-grd-s:hover {
    border-color: var(--border-secondary-hover);
    box-shadow: var(--glow-secondary);
}


button.btn-grd-a:hover {
    border-color: var(--border-accent-hover);
    box-shadow: var(--glow-accent);
}


/* =========================
   ACTIVE / CLICK FEEDBACK
========================= */

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


/* =========================
   DISABLED
========================= */

button.btn-grd:disabled {
    cursor: not-allowed;

    opacity: .4;

    transform: none;
    box-shadow: none;
}