/* ==================================
   Dark Theme Variable Overrides
   ================================== */

[data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-primary-rgb: 10, 10, 10;
    --bg-secondary: #171717;
    --bg-tertiary: #262626;
    --bg-hover: #2a2a2a;
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --border-color: #333333;
    --shadow: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.7);

    /* Brighter event colors for dark mode visibility */
    --color-hackathon: #34d399;
    --color-contest: #60a5fa;
    --color-ctf: #fbbf24;
    --color-others: #fb923c;
    --color-fest: #a78bfa;

    /* Dark theme event background colors */
    --bg-hackathon: #064e3b;
    --bg-contest: #1e3a8a;
    --bg-ctf: #78350f;
    --bg-others: #7c2d12;
    --bg-fest: #4c1d95;

    --accent: #16a34a;
}

/* Specific Dark Mode Tweaks */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 10px;
}

[data-theme="dark"] .event-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .modal-event {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}