/* Light theme (default) */
:root, [data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f0f0f2;
    --bg-input: #ffffff;
    --border: #d1d1d6;
    --border-light: #e5e5ea;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted: #aeaeb2;
    --accent: #0071e3;
    --accent-hover: #0077ed;
    --danger: #ff3b30;
    --success: #34c759;
    --warning: #ff9f0a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
    --radius: 8px;
    --radius-sm: 4px;

    /* Scrollbar / minimap thumb */
    --minimap-thumb: rgba(0, 0, 0, 0.35);
    --minimap-thumb-hover: rgba(0, 0, 0, 0.5);
    --minimap-thumb-active: rgba(0, 0, 0, 0.6);

    /* Epic colors */
    --epic-red: #dc2626;
    --epic-orange: #ea580c;
    --epic-amber: #d97706;
    --epic-green: #16a34a;
    --epic-teal: #0d9488;
    --epic-blue: #2563eb;
    --epic-purple: #7c3aed;
    --epic-pink: #db2777;
}

/* Dark theme */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #1c1c1e;
    --bg-secondary: #2c2c2e;
    --bg-card: #2c2c2e;
    --bg-hover: #3a3a3c;
    --bg-input: #3a3a3c;
    --border: #48484a;
    --border-light: #3a3a3c;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted: #636366;
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --danger: #ff453a;
    --success: #30d158;
    --warning: #ff9f0a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Scrollbar / minimap thumb */
    --minimap-thumb: rgba(255, 255, 255, 0.3);
    --minimap-thumb-hover: rgba(255, 255, 255, 0.45);
    --minimap-thumb-active: rgba(255, 255, 255, 0.55);

    /* Epic colors */
    --epic-red: #f87171;
    --epic-orange: #fb923c;
    --epic-amber: #fbbf24;
    --epic-green: #4ade80;
    --epic-teal: #2dd4a1;
    --epic-blue: #60a5fa;
    --epic-purple: #a78bfa;
    --epic-pink: #f472b6;
}

/* Explicit scrollbar colors for all scrollable elements */
:root, [data-theme="light"] {
    scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}

[data-theme="dark"] {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* System preference when set to auto */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        color-scheme: dark;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
        --bg-primary: #1c1c1e;
        --bg-secondary: #2c2c2e;
        --bg-card: #2c2c2e;
        --bg-hover: #3a3a3c;
        --bg-input: #3a3a3c;
        --border: #48484a;
        --border-light: #3a3a3c;
        --text-primary: #f5f5f7;
        --text-secondary: #a1a1a6;
        --text-muted: #636366;
        --accent: #0a84ff;
        --accent-hover: #409cff;
        --danger: #ff453a;
        --success: #30d158;
        --warning: #ff9f0a;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

        /* Scrollbar / minimap thumb */
        --minimap-thumb: rgba(255, 255, 255, 0.3);
        --minimap-thumb-hover: rgba(255, 255, 255, 0.45);
        --minimap-thumb-active: rgba(255, 255, 255, 0.55);
    }
}

/* Webkit scrollbar styling for dark mode (Chrome, Safari, Edge) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    [data-theme="auto"] ::-webkit-scrollbar-track {
        background: transparent;
    }
    [data-theme="auto"] ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
    }
    [data-theme="auto"] ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.45);
    }
    [data-theme="auto"] ::-webkit-scrollbar-corner {
        background: transparent;
    }
}
