:root {
    --cidb-green: #1ba79d;
    --cidb-green-dark: #0e6f65;
    --cidb-amber: #fca11a;
    --cidb-amber-dark: #e68d00;
}

.bg-cidb-green {
    background-color: var(--cidb-green);
}

.bg-cidb-green-dark {
    background-color: var(--cidb-green-dark);
}

.text-cidb-green {
    color: var(--cidb-green);
}

.text-cidb-green-dark {
    color: var(--cidb-green-dark);
}

.text-cidb-amber {
    color: var(--cidb-amber);
}

.bg-cidb-amber {
    background-color: var(--cidb-amber);
}

.btn-cidb-amber {
    background-color: var(--cidb-amber);
    color: white;
    transition: all 0.2s;
}

.btn-cidb-amber:hover {
    background-color: var(--cidb-amber-dark);
}

.stats-card {
    transition: transform 0.2s;
}

.stats-card:hover {
    transform: translateY(-5px);
}

.course-card {
    transition: all 0.3s;
}

.course-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.progress-bar-container {
    background-color: #f3f4f6;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    background-color: #10b981;
    height: 100%;
    border-radius: 3px;
}

.pill-active-green {
    background-color: var(--cidb-green);
    color: white;
    box-shadow: 0 10px 15px -3px rgba(4, 108, 78, 0.4);
}

.pill-active-amber {
    background-color: var(--cidb-amber);
    color: white;
    box-shadow: 0 10px 15px -3px rgba(252, 161, 26, 0.4);
}