/* ============================================
   Components - Reusable UI patterns
   ============================================ */

/* Buttons */
.btn-primary,
.btn {
    font-family: var(--default-font);
    border-radius: var(--border-radius-pill);
    transition: var(--transition-normal);
}

/* Cards */
.card {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* Section styling helpers */
.bg-section {
    background-color: var(--bg-color);
}

.dark-section {
    background-color: var(--section-dark-bg);
    color: var(--white-color);
}

.light-section {
    background-color: var(--section-light-bg);
}