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

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:var(--button-height);

    padding:0 var(--button-padding-x);

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

    font-family:var(--font-heading);

    font-size:.9rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.12em;

    text-transform:uppercase;

    white-space:nowrap;

    cursor:pointer;

    transition:var(--transition-fast);

}

.button__arrow{

    display:inline-block;

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

}

.button:hover .button__arrow{

    transform:translateX(4px);

}

/* ==========================================================
   PRIMARY — gold
   ========================================================== */

.button--primary{

    background:var(--gradient-gold);

    color:#141008;

    border:1px solid rgba(230,203,145,.4);

}

.button--primary:hover{

    box-shadow:0 0 40px rgba(200,164,90,.35);

    transform:translateY(-1px);

}

/* ==========================================================
   SECONDARY — outline
   ========================================================== */

.button--secondary{

    background:rgba(255,255,255,.12);

    color:var(--color-text);

    border:1px solid rgba(255,255,255,.7);

    box-shadow:0 4px 20px rgba(0,0,0,.35);

}

.button--secondary:hover{

    background:rgba(255,255,255,.18);

    border-color:var(--color-gold);

    color:var(--color-gold);

    box-shadow:0 4px 24px rgba(0,0,0,.4);

}

/* ==========================================================
   GHOST — navbar
   ========================================================== */

.button--ghost{

    height:44px;

    padding:0 22px;

    background:rgba(255,255,255,.03);

    color:var(--color-text-secondary);

    border:1px solid var(--color-border);

}

.button--ghost:hover{

    color:var(--color-text);

    border-color:var(--color-border-light);

}

/* ==========================================================
   SMALL
   ========================================================== */

.button--sm{

    height:44px;

    padding:0 22px;

    font-size:.8rem;

}

/* ==========================================================
   FOCUS
   ========================================================== */

.button:focus-visible{

    outline:2px solid var(--color-gold);

    outline-offset:3px;

}