:root {
    color-scheme: light dark;
    --nav-bar-height: 55px;
    --darkmode-info-background: #22222;
    --darkmode-info-header-background: #44444;

    --primary-color: #2563eb;
    --border-radius-card: 12px;
    --border-radius-btn: 20px;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --transition-speed: 0.3s;

    /* Spacing Scale */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --spacing-card: 20px;
    --spacing-grid-gap: 30px;

    --bg-card: #ffffff;
    --bg-card-header: #f8f9fa;
    --bg-action-btn: #eaecef;
    --bg-action-btn-hover: #dee2e6;
    --border-color: rgba(0, 0, 0, 0.08);
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --accent-purple: #6f42c1;
    --accent-purple-light: rgba(111, 66, 193, 0.08);
    --accent-blue: #007bff;
    --accent-blue-light: rgba(0, 123, 255, 0.08);
    --text-on-accent: #ffffff;

    --bg-main: #ffffff;
    --text-main: #212529;
    --dropdown-bg: #ffffff;
    --dropdown-text: #212529;
    --dropdown-hover-text: #ffffff;
    --jumbotron-bg: #e9ecef;
    --card-bg: #ffffff;
    --card-header-bg: #f8f9fa;
    --modal-bg: #ffffff;
    --calendar-indicator-invert: 0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #3b82f6;
        --bg-card: #222222;
        --bg-card-header: #333333;
        --bg-action-btn: #2d3139;
        --bg-action-btn-hover: #3e4451;
        --border-color: rgba(255, 255, 255, 0.1);
        --text-primary: #f8f9fa;
        --text-secondary: #a8b2bd;
        --accent-purple: #9f7aea;
        --accent-purple-light: rgba(159, 122, 234, 0.15);
        --accent-blue: #3b82f6;
        --accent-blue-light: rgba(59, 130, 246, 0.15);
        --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.6);
        --text-on-accent: #121212;

        --bg-main: dimgray;
        --text-main: white;
        --dropdown-bg: gray;
        --dropdown-text: white;
        --dropdown-hover-text: black;
        --jumbotron-bg: #222;
        --card-bg: #222;
        --card-header-bg: #444;
        --modal-bg: dimgray;
        --calendar-indicator-invert: 1;
    }
}