/* Theme Variables - Light Mode (Default) */
:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #e8ecf1;

    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-color: #e0e0e0;
    --border-hover: #d0d0d0;

    /* Accent Colors */
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
    --accent-hover: #5568d3;
    --accent-light: #e8eaf6;

    /* Status Colors */
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* Card */
    --card-bg: #ffffff;
    --card-border: #e0e0e0;

    /* Header */
    --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --header-text: #ffffff;
}

/* Dark Mode */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    --text-inverse: #1a1a1a;

    /* Border Colors */
    --border-color: #404040;
    --border-hover: #505050;

    /* Accent Colors */
    --accent-primary: #7c8ef5;
    --accent-secondary: #9aa5f7;
    --accent-hover: #6b7de3;
    --accent-light: #2d2d3a;

    /* Status Colors */
    --success: #34d399;
    --error: #f87171;
    --warning: #fbbf24;
    --info: #60a5fa;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);

    /* Card */
    --card-bg: #2d2d2d;
    --card-border: #404040;

    /* Header */
    --header-bg: linear-gradient(135deg, #4c5fd5 0%, #6b2d8f 100%);
    --header-text: #ffffff;
}

/* Auto Mode - Follows System Preference */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        /* Background Colors */
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #3a3a3a;

        /* Text Colors */
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --text-tertiary: #808080;
        --text-inverse: #1a1a1a;

        /* Border Colors */
        --border-color: #404040;
        --border-hover: #505050;

        /* Accent Colors */
        --accent-primary: #7c8ef5;
        --accent-secondary: #9aa5f7;
        --accent-hover: #6b7de3;
        --accent-light: #2d2d3a;

        /* Status Colors */
        --success: #34d399;
        --error: #f87171;
        --warning: #fbbf24;
        --info: #60a5fa;

        /* Shadow */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);

        /* Card */
        --card-bg: #2d2d2d;
        --card-border: #404040;

        /* Header */
        --header-bg: linear-gradient(135deg, #4c5fd5 0%, #6b2d8f 100%);
        --header-text: #ffffff;
    }
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
}