/* ==========================================================
   Base Button
========================================================== */

.btn {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    border-radius: var(--radius-full);
    align-items: center;
    border: none;
    transition: var(--transition-fast);
    padding: 12px 24px;
}

/* ==========================================================
   Primary Button
========================================================== */

.btn-primary {
    color: var(--color-text-primary-dark);
    border: 1px solid var(--color-accent);
}

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



/* ==========================================================
   Secondary Button
========================================================== */

.btn-secondary {
    color: var(--color-text-secondary-dark);
   
}

.btn-secondary:hover {
    background-color:var(--color-accent);
    color: var(--color-text-primary-dark);

}

/* ==========================================================
   Outline Button
========================================================== */


/* ==========================================================
   Sizes
========================================================== */


/* ==========================================================
   States
========================================================== */

.nav-link {
    color: var(--color-text-primary-dark);
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
}

.nav-link:hover {
    color: var(--color-primary-light);
    border-color: var(--color-primary);
}