:root {
    --color-indigo-primary: #52489C;
    --color-indigo-dark: #403A7C;
    --color-indigo-light: #6A60B0;
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark {
    background-color: #1a202c;
    color: #e2e8f0;
}
.dark .card {
    background-color: #2d3748;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
.dark .progress-bar-container {
    background-color: #4a5568;
}

.dark .text-gray-800,
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-500 {
    color: #e2e8f0;
}

.light {
    background-color: #f0f8ff;
    color: #2d3748;
}
.light .card {
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.light .progress-bar-container {
    background-color: #e2e8f0;
}

.light .text-gray-800,
.light .text-gray-600,
.light .text-gray-700,
.light .text-gray-500 {
    color: #1a202c;
}

.card {
    border-radius: 0.75rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--color-indigo-primary);
    border-radius: 9999px;
    transition: width 0.1s ease-out;
}
.animate-pulse-slow {
    animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.text-indigo-primary {
    color: var(--color-indigo-primary);
}
.dark .text-indigo-primary {
    color: var(--color-indigo-light);
}

.bg-indigo-primary {
    background-color: var(--color-indigo-primary);
}
.hover\:bg-indigo-dark:hover {
    background-color: var(--color-indigo-dark);
}

.border-indigo-light {
    border-color: var(--color-indigo-light);
}
.dark .border-indigo-light {
    border-color: var(--color-indigo-primary);
}