:root {
    --color-primary: #22223B;
    --color-secondary: #4A4E69;
    --color-accent: #9A8C98;
    --color-light-accent: #C9ADA7;
    --color-light: #F2E9E4;
    --category-anxiety: #FFB74D;
    --category-depression: #7986CB;
    --category-therapy: #81C784;
    --category-wellness: #F48FB1;
    --category-other: #B0BEC5;
}

.article-list-section {
    background-color: var(--color-light);
    padding: 2rem 0;
}

.category-btn {
    transition: all 0.3s ease;
}

.category-btn {
    display: inline-block;
    padding: 0.7rem 1.2rem;
    border-radius: 25px;
    color: var(--color-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: white;
    box-shadow: 0 2px 4px rgba(34, 34, 59, 0.1);
}

.category-btn:hover,
.category-btn.active {
    background-color: var(--color-secondary);
    color: var(--color-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(74, 78, 105, 0.2);
}

.category-btn[data-category="anxiety"] .category-icon {
    color: var(--category-anxiety);
}

.category-btn[data-category="depression"] .category-icon {
    color: var(--category-depression);
}

.category-btn[data-category="therapy"] .category-icon {
    color: var(--category-therapy);
}

.category-btn[data-category="wellness"] .category-icon {
    color: var(--category-wellness);
}

.category-btn[data-category="other"] .category-icon {
    color: var(--category-other);
}

.category-btn:hover,
.category-btn.active {
    color: white;
}

.category-btn[data-category="anxiety"]:hover,
.category-btn[data-category="anxiety"].active {
    background-color: var(--category-anxiety);
}

.category-btn[data-category="depression"]:hover,
.category-btn[data-category="depression"].active {
    background-color: var(--category-depression);
}

.category-btn[data-category="therapy"]:hover,
.category-btn[data-category="therapy"].active {
    background-color: var(--category-therapy);
}

.category-btn[data-category="wellness"]:hover,
.category-btn[data-category="wellness"].active {
    background-color: var(--category-wellness);
}

.category-btn[data-category="other"]:hover,
.category-btn[data-category="other"].active {
    background-color: var(--category-other);
}

.category-btn:hover .category-icon,
.category-btn.active .category-icon {
    color: white;
}