/* ===========================================================
   BUTTONS
===========================================================*/

/* Base Button */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);

    padding:12px 24px;

    border-radius:var(--radius-md);

    font-size:var(--fs-small);
    font-weight:var(--fw-semibold);
    text-transform:uppercase;
    letter-spacing:0.03em;

    transition:all var(--transition-fast);
    white-space:nowrap;
}

/* Gold (primary) */

.btn-gold{
    background:var(--color-gold);
    color:#1A1305;
}

.btn-gold:hover{
    background:var(--color-gold-hover);
}

/* Gold Outline */

.btn-outline-gold{
    border:1.5px solid var(--color-gold);
    color:var(--color-gold);
    background:transparent;
}

.btn-outline-gold:hover{
    background:rgba(232, 170, 61, 0.1);
}

/* Extra outline colors — added for the Teams grid's per-team
   "View Squad" buttons, so each team's button can match its own crest
   color. Same pattern as .btn-outline-gold above, just different hues. */
.btn-outline-blue{
    border:1.5px solid var(--color-info);
    color:var(--color-info);
    background:transparent;
}
.btn-outline-blue:hover{ background:rgba(59, 130, 246, 0.1); }

.btn-outline-purple{
    border:1.5px solid var(--color-purple);
    color:var(--color-purple);
    background:transparent;
}
.btn-outline-purple:hover{ background:rgba(124, 92, 252, 0.1); }

.btn-outline-red{
    border:1.5px solid var(--color-danger);
    color:var(--color-danger);
    background:transparent;
}
.btn-outline-red:hover{ background:rgba(239, 68, 68, 0.1); }

.btn-outline-green{
    border:1.5px solid var(--color-success);
    color:var(--color-success);
    background:transparent;
}
.btn-outline-green:hover{ background:rgba(34, 197, 94, 0.1); }

/* Purple */

.btn-purple{
    background:var(--color-purple);
    color:#fff;
}

.btn-purple:hover{
    background:var(--color-purple-hover);
}

/* Neutral Outline */

.btn-outline{
    border:1.5px solid var(--color-border);
    color:var(--color-text);
    background:transparent;
}

.btn-outline:hover{
    background:var(--color-surface-alt);
}

/* Success (green) */

.btn-success{
    background:var(--color-success);
    color:#06301A;
}

.btn-success:hover{
    filter:brightness(1.1);
}

/* Sizes */

.btn-sm{
    padding:8px 16px;
    font-size:var(--fs-tiny);
}

.btn-block{
    width:100%;
}