/* CSS Custom Properties for Dynamic Theming */
/* This file contains all theme variables for light and dark modes */

:root {
    /* Light Theme Colors */
    --bg-primary: #f5f7fa;
    --bg-secondary: #c3cfe2;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;

    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
    --accent-hover: #5a6fd8;

    --border-color: #e0e0e0;
    --border-subtle: #f0f0f0;

    --shadow-light: rgba(0,0,0,0.15);
    --shadow-medium: rgba(0,0,0,0.25);
    --shadow-heavy: rgba(102, 126, 234, 0.3);

    --success-color: #28a745;
    --warning-color: #ffc107;
    --error-color: #dc3545;

    /* Theme transition */
    --theme-transition: all 0.3s ease;
}

/* Dark Theme Colors */
[data-theme="dark"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-surface: #2d2d2d;
    --bg-elevated: #3a3a3a;

    --text-primary: #e8e8e8;
    --text-secondary: #b8b8b8;
    --text-muted: #888888;
    --text-inverse: #1a1a1a;

    --accent-primary: #7c92ff;
    --accent-secondary: #9575cd;
    --accent-hover: #8fa4ff;

    --border-color: #404040;
    --border-subtle: #2a2a2a;

    --shadow-light: rgba(0,0,0,0.4);
    --shadow-medium: rgba(0,0,0,0.6);
    --shadow-heavy: rgba(124, 146, 255, 0.3);

    --success-color: #4caf50;
    --warning-color: #ff9800;
    --error-color: #f44336;
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0f0f0f;
        --bg-secondary: #1a1a1a;
        --bg-surface: #2d2d2d;
        --bg-elevated: #3a3a3a;

        --text-primary: #e8e8e8;
        --text-secondary: #b8b8b8;
        --text-muted: #888888;
        --text-inverse: #1a1a1a;

        --accent-primary: #7c92ff;
        --accent-secondary: #9575cd;
        --accent-hover: #8fa4ff;

        --border-color: #404040;
        --border-subtle: #2a2a2a;

        --shadow-light: rgba(0,0,0,0.4);
        --shadow-medium: rgba(0,0,0,0.6);
        --shadow-heavy: rgba(124, 146, 255, 0.3);
    }
}