:root {
    /* Dark Theme (Default) */
    --color-bg-primary: #111827; /* gray-900 */
    --color-bg-secondary: #1f2937; /* gray-800 */
    --color-bg-tertiary: #374151; /* gray-700 */
    --color-bg-interactive: #4b5563; /* gray-600 */
    --color-bg-disabled: #374151; /* gray-700 */

    --color-border-primary: #374151; /* gray-700 */
    --color-border-secondary: #4b5563; /* gray-600 */
    --color-border-accent: #0ea5e9; /* cyan-500 */

    --color-text-primary: #d1d5db; /* gray-300 */
    --color-text-secondary: #9ca3af; /* gray-400 */
    --color-text-accent: #f59e0b; /* amber-500 */
    --color-text-disabled: #6b7280; /* gray-500 */

    --color-accent-primary: #0ea5e9; /* cyan-500 */
    --color-accent-primary-hover: #06b6d4; /* cyan-600 */
    --color-accent-secondary: #16a34a; /* green-600 */
    --color-accent-secondary-hover: #15803d; /* green-700 */

    --correct-highlight: #22c55e; /* green-500 */
    --incorrect-highlight: #e17100; /* orange-600 */ /* #ef4444; /* red-500 */
}

.light-theme {
    /* Light Theme */
    --color-bg-primary: #c4cacb;
    --color-bg-secondary: #f5f2eb;
    --color-bg-tertiary: #f3f4f6; /* gray-100 */
    --color-bg-interactive: #e5e7eb; /* gray-200 */
    --color-bg-disabled: #e5e7eb; /* gray-200 */

    --color-border-primary: #e5e7eb; /* gray-200 */
    --color-border-secondary: #d1d5db; /* gray-300 */
    --color-border-accent: #0e7490; /* cyan-700 */

    --color-text-primary: #1f2937; /* gray-800 */
    --color-text-secondary: #10393f;
    --color-text-accent: #b45309; /* amber-700 */
    --color-text-disabled: #9ca3af; /* gray-400 */

    --color-accent-primary: #0e7490; /* cyan-700 */
    --color-accent-primary-hover: #155e75; /* cyan-800 */
    --color-accent-secondary: #16a34a; /* green-600 */
    --color-accent-secondary-hover: #15803d; /* green-700 */

    --correct-highlight: #16a34a; /* green-600 */
    --incorrect-highlight: #e17100; /* orange-600 */ /* #ef4444; /* red-500 */
} 

.breadcrumb-link {
    color: var(--color-text-secondary);
}