/* CSS Variables for Theme Switching */
:root[data-theme="light"] {
    /* Background Colors */
    --background-primary: #f8f9fa;
    --background-secondary: #ffffff;
    --card-background: rgba(255, 255, 255, 0.9);
    --hover-background: rgba(59, 142, 229, 0.08);
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f2f5;
    --bg-card: rgba(255, 255, 255, 0.9);

    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6c757d;

    /* Accent Colors */
    --accent-primary: #3b8ee5;
    --accent-primary-rgb: 59, 142, 229;
    --accent-secondary: #2a7bd4;
    --accent-hover: #2a7bd4;

    /* Status Colors */
    --success: #28a745;
    --success-hover: #218838;
    --success-rgb: 40, 167, 69;
    --danger: #dc3545;
    --danger-hover: #bb2d3b;
    --danger-rgb: 220, 53, 69;
    --warning: #ffc107;
    --info: #17a2b8;
    --info-rgb: 23, 162, 184;

    /* Border Colors */
    --border-color: #dee2e6;
    --border-primary: #dee2e6;
    --border-secondary: #e9ecef;

    /* Input Colors */
    --input-background: #ffffff;
    --input-border: #ced4da;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"],
:root {
    /* Background Colors */
    --background-primary: #0d1117;
    --background-secondary: #161b22;
    --card-background: rgba(22, 27, 34, 0.8);
    --hover-background: rgba(74, 158, 255, 0.08);
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-card: rgba(22, 27, 34, 0.9);

    /* Text Colors */
    --text-primary: #f0f6fc;
    --text-secondary: #b0bec5;
    --text-muted: #8b949e;

    /* Accent Colors */
    --accent-primary: #4a9eff;
    --accent-primary-rgb: 74, 158, 255;
    --accent-secondary: #3b8ee5;
    --accent-hover: #6bb4ff;

    /* Status Colors */
    --success: #3fb07f;
    --success-hover: #2d9467;
    --success-rgb: 63, 176, 127;
    --danger: #e05252;
    --danger-hover: #c04040;
    --danger-rgb: 224, 82, 82;
    --warning: #dba24a;
    --info: #4a9eff;
    --info-rgb: 74, 158, 255;

    /* Border Colors */
    --border-color: #30363d;
    --border-primary: #30363d;
    --border-secondary: #21262d;

    /* Input Colors */
    --input-background: #161b22;
    --input-border: #30363d;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Global Styles */
body {
    background: var(--background-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}