/* Theme Variables */
:root {
    /* Light Theme Colors */
    --primary-color: #1976D2;
    --primary-hover: #1565C0;
    --secondary-color: #424242;
    --success-color: #388E3C;
    --warning-color: #F57C00;
    --error-color: #D32F2F;

    --background-color: #FFFFFF;
    --surface-color: #F5F5F5;
    --surface-elevated: #FFFFFF;
    --border-color: #E0E0E0;

    --text-primary: #212121;
    --text-secondary: #757575;
    --text-disabled: #BDBDBD;
    --text-on-primary: #FFFFFF;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #42A5F5;
    --primary-hover: #64B5F6;
    --secondary-color: #BDBDBD;
    --success-color: #66BB6A;
    --warning-color: #FFA726;
    --error-color: #EF5350;

    --background-color: #121212;
    --surface-color: #1E1E1E;
    --surface-elevated: #2C2C2C;
    --border-color: #424242;

    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-disabled: #757575;
    --text-on-primary: #000000;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Theme Transition */
* {
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal);
}