.announcement-bar__link:focus-visible{

    outline:3px solid var(--brand-warning);

    outline-offset:2px;

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

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

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;

    min-height: 52px;
    padding-inline: 1.75rem;

    border: none;
    border-radius: 2rem;

    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
        color: var(--neutral-0);

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
    transition-duration: .3s;    
}


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

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

.btn:focus-visible{
    outline: 3px solid var(--brand-warning);
    outline-offset: 3px;
}
/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.btn--primary{
    background: var(--clr-secondary);
    box-shadow: var(--shadow-sm);
    color: var(--clr-white);
}

.btn--primary:hover{

    box-shadow: var(--shadow-md);
}
/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.btn--secondary{
    background: var(--brand-accent);

    color: var(--brand-primary);

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

.btn--secondary:hover{
    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}
/* ==========================================================
   OUTLINE BUTTON
========================================================== */

.btn--outline{
    background: transparent;

    color: var(--neutral-0);

    border: 2px solid rgba(255,255,255,.35);
}

.btn--outline:hover{
    background: rgba(255,255,255,.12);

    border-color: rgba(255,255,255,.8);
}
/* ==========================================================
   LIGHT BUTTON
========================================================== */

.btn--light{
    background: var(--neutral-0);

    color: var(--brand-primary);

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

.btn--light:hover{
    box-shadow: var(--shadow-md);
}
.btn--sm {
    min-height: 44px;
    padding-inline: 1.25rem;
    font-size: .875rem;
}

.btn--md {
    min-height: 52px;
    padding-inline: 1.75rem;
    font-size: .95rem;
}

.btn--lg {
    min-height: 60px;
    padding-inline: 2.25rem;
    font-size: 1rem;
}