/* Theme System - Light and Dark Mode */

/* Light Theme (Default) */
:root[data-theme="light"] {
    color-scheme: light;
    /* Primary Colors */
    --primary-color: #006400; /* darkgreen */
    --primary-hover: #004d00;
    --primary-light: rgba(0, 100, 0, 0.1);

    /* Background Colors */
    --bg-body: #ffffff;
    --bg-container: #ffffff;
    --bg-elevated: #fafafa;
    --bg-navbar: #006400; /* darkgreen */

    /* Text Colors */
    --text-primary: rgba(0, 0, 0, 0.88);
    --text-secondary: rgba(0, 0, 0, 0.65);
    --text-tertiary: rgba(0, 0, 0, 0.45);
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-color: #d9d9d9;
    --border-light: #f0f0f0;

    /* Component Colors */
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #d9d9d9;
    --input-hover: #52c41a; /* Green for hover */
    --input-focus: #52c41a; /* Green for focus */

    /* Link Colors */
    --link-color: rgb(82, 196, 26); /* #52c41a */
    --link-hover: #73d13d;

    /* Alert Colors - Simplified to blue theme */
    --alert-info-bg: #e6f4ff;
    --alert-info-border: #91caff;
    --alert-info-text: #1677ff;
    --alert-success-bg: #e6f4ff;
    --alert-success-border: #91caff;
    --alert-success-text: #1677ff;
    --alert-warning-bg: #e6f4ff;
    --alert-warning-border: #91caff;
    --alert-warning-text: #1677ff;
    --alert-danger-bg: #fff2f0;
    --alert-danger-border: #ffccc7;
    --alert-danger-text: #cf1322;

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
    --shadow-md: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

    /* Menu */
    --menu-hover-bg: rgba(255, 255, 255, 0.1);
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f5f5f5;

    /* Footer */
    --footer-bg: #fafafa;
    --footer-border: #e8e8e8;
    --footer-text: #8A8A8A;
}

/* Dark Theme */
:root[data-theme="dark"] {
    color-scheme: dark;
    /* Primary Colors */
    --primary-color: #006400; /* Keep darkgreen in dark mode */
    --primary-hover: #004d00;
    --primary-light: rgba(0, 100, 0, 0.15);

    /* Background Colors */
    --bg-body: #141414;
    --bg-container: #1f1f1f;
    --bg-elevated: #2a2a2a;
    --bg-navbar: #006400; /* Keep darkgreen navbar */

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.85);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-tertiary: rgba(255, 255, 255, 0.45);
    --text-inverse: #000000;

    /* Border Colors */
    --border-color: #424242;
    --border-light: #303030;

    /* Component Colors */
    --card-bg: #1f1f1f;
    --input-bg: #1f1f1f;
    --input-border: #424242;
    --input-hover: #52c41a; /* Bright green for hover */
    --input-focus: #52c41a;

    /* Link Colors */
    --link-color: #52c41a;
    --link-hover: #73d13d;

    /* Alert Colors - Simplified to blue theme */
    --alert-info-bg: rgba(22, 119, 255, 0.1);
    --alert-info-border: rgba(22, 119, 255, 0.3);
    --alert-info-text: #1677ff;
    --alert-success-bg: rgba(22, 119, 255, 0.1);
    --alert-success-border: rgba(22, 119, 255, 0.3);
    --alert-success-text: #1677ff;
    --alert-warning-bg: rgba(22, 119, 255, 0.1);
    --alert-warning-border: rgba(22, 119, 255, 0.3);
    --alert-warning-text: #1677ff;
    --alert-danger-bg: rgba(255, 77, 79, 0.1);
    --alert-danger-border: rgba(255, 77, 79, 0.3);
    --alert-danger-text: #ff4d4f;

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);

    /* Menu */
    --menu-hover-bg: rgba(255, 255, 255, 0.08);
    --dropdown-bg: #2a2a2a;
    --dropdown-hover: #383838;

    /* Footer */
    --footer-bg: #1f1f1f;
    --footer-border: #303030;
    --footer-text: #8A8A8A;
}

/* System Theme - follows OS preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        /* Primary Colors */
        --primary-color: #006400; /* Keep darkgreen in dark mode */
        --primary-hover: #004d00;
        --primary-light: rgba(0, 100, 0, 0.15);

        /* Background Colors */
        --bg-body: #141414;
        --bg-container: #1f1f1f;
        --bg-elevated: #2a2a2a;
        --bg-navbar: #006400; /* Keep darkgreen navbar */

        /* Text Colors */
        --text-primary: rgba(255, 255, 255, 0.85);
        --text-secondary: rgba(255, 255, 255, 0.65);
        --text-tertiary: rgba(255, 255, 255, 0.45);
        --text-inverse: #000000;

        /* Border Colors */
        --border-color: #424242;
        --border-light: #303030;

        /* Component Colors */
        --card-bg: #1f1f1f;
        --input-bg: #1f1f1f;
        --input-border: #424242;
        --input-hover: #52c41a;
        --input-focus: #52c41a;

        /* Link Colors */
        --link-color: #52c41a;
        --link-hover: #73d13d;

        /* Alert Colors - Simplified to blue theme */
        --alert-info-bg: rgba(22, 119, 255, 0.1);
        --alert-info-border: rgba(22, 119, 255, 0.3);
        --alert-info-text: #1677ff;
        --alert-success-bg: rgba(22, 119, 255, 0.1);
        --alert-success-border: rgba(22, 119, 255, 0.3);
        --alert-success-text: #1677ff;
        --alert-warning-bg: rgba(22, 119, 255, 0.1);
        --alert-warning-border: rgba(22, 119, 255, 0.3);
        --alert-warning-text: #1677ff;
        --alert-danger-bg: rgba(255, 77, 79, 0.1);
        --alert-danger-border: rgba(255, 77, 79, 0.3);
        --alert-danger-text: #ff4d4f;

        /* Shadow */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        --shadow-md: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);

        /* Menu */
        --menu-hover-bg: rgba(255, 255, 255, 0.08);
        --dropdown-bg: #2a2a2a;
        --dropdown-hover: #383838;

        /* Footer */
        --footer-bg: #1f1f1f;
        --footer-border: #303030;
        --footer-text: #8A8A8A;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: light;
        /* Primary Colors */
        --primary-color: #006400;
        --primary-hover: #004d00;
        --primary-light: rgba(0, 100, 0, 0.1);

        /* Background Colors */
        --bg-body: #ffffff;
        --bg-container: #ffffff;
        --bg-elevated: #fafafa;
        --bg-navbar: #006400;

        /* Text Colors */
        --text-primary: rgba(0, 0, 0, 0.88);
        --text-secondary: rgba(0, 0, 0, 0.65);
        --text-tertiary: rgba(0, 0, 0, 0.45);
        --text-inverse: #ffffff;

        /* Border Colors */
        --border-color: #d9d9d9;
        --border-light: #f0f0f0;

        /* Component Colors */
        --card-bg: #ffffff;
        --input-bg: #ffffff;
        --input-border: #d9d9d9;
        --input-hover: #52c41a;
        --input-focus: #52c41a;

        /* Link Colors */
        --link-color: rgb(82, 196, 26); /* #52c41a */
        --link-hover: #73d13d;

        /* Alert Colors - Simplified to blue theme */
        --alert-info-bg: #e6f4ff;
        --alert-info-border: #91caff;
        --alert-info-text: #1677ff;
        --alert-success-bg: #e6f4ff;
        --alert-success-border: #91caff;
        --alert-success-text: #1677ff;
        --alert-warning-bg: #e6f4ff;
        --alert-warning-border: #91caff;
        --alert-warning-text: #1677ff;
        --alert-danger-bg: #fff2f0;
        --alert-danger-border: #ffccc7;
        --alert-danger-text: #cf1322;

        /* Shadow */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
        --shadow-md: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

        /* Menu */
        --menu-hover-bg: rgba(255, 255, 255, 0.1);
        --dropdown-bg: #ffffff;
        --dropdown-hover: #f5f5f5;

        /* Footer */
        --footer-bg: #fafafa;
        --footer-border: #e8e8e8;
        --footer-text: #8A8A8A;
    }
}

/* Code block text selection colors - match link color */
code::selection,
pre::selection,
code *::selection,
pre *::selection {
    background-color: #52c41a;
    color: white;
}

code::-moz-selection,
pre::-moz-selection,
code *::-moz-selection,
pre *::-moz-selection {
    background-color: #52c41a;
    color: white;
}

/* Smooth theme transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Apply theme to body */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* Global link styles */
a {
    color: var(--link-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--link-hover);
}

/* Theme Toggle Button Styles */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(20deg);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle i {
    font-size: 16px;
    transition: transform 0.3s ease;
}