/* Light and Dark Mode Support with Solid Backgrounds */

:root {
    /* Light mode colors */
    --bg-color: #f0f2f5;
    --text-primary: #333;
    --text-secondary: #666;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-shadow-hover: rgba(0, 0, 0, 0.15);
    --link-color: #0066cc;
    --link-hover: #004499;
    --border-color: #ddd;
    --badge-bg: #d4f4dd;
    --badge-color: #2d7a3e;
    --map-entry-gradient-start: #ffffff;
    --map-entry-gradient-end: #f8f9fa;
    --map-entry-hover-start: #f8f9fa;
    --map-entry-hover-end: #e9ecef;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode colors */
        --bg-color: #18191a;
        --text-primary: #e4e6eb;
        --text-secondary: #b0b3b8;
        --card-bg: #242731;
        --card-shadow: rgba(0, 0, 0, 0.3);
        --card-shadow-hover: rgba(0, 0, 0, 0.5);
        --link-color: #4d9fff;
        --link-hover: #6db0ff;
        --border-color: #3a3d44;
        --badge-bg: #2d5a3e;
        --badge-color: #a8e6b8;
        --map-entry-gradient-start: #2a2d38;
        --map-entry-gradient-end: #242731;
        --map-entry-hover-start: #2f3340;
        --map-entry-hover-end: #2a2d38;
    }
}

body {
    background: var(--bg-color);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
}