/* CSS Variables and Theme Configuration */
:root {
    --primary-color: #2ecc71;
    --primary-dark: #27ae60;
    --secondary-color: #3498db;
    --primary-rgb: 46, 204, 113;
    --bg-light: #ffffff;
    --bg-dark: #1a1a1a;
    --bg-secondary-light: #f8f9fa;
    --bg-secondary-dark: #2d2d2d;
    --text-light: #333333;
    --text-dark: #ffffff;
    --text-secondary-light: #6c757d;
    --text-secondary-dark: #adb5bd;
    --card-light: #f8f9fa;
    --card-dark: #2d2d2d;
    --border-light: #e9ecef;
    --border-dark: #404040;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="light"] {
    --bg-color: var(--bg-light);
    --bg-secondary: var(--bg-secondary-light);
    --text-color: var(--text-light);
    --text-secondary: var(--text-secondary-light);
    --card-color: var(--card-light);
    --border-color: var(--border-light);
    --shadow-color: var(--shadow-light);
}

[data-theme="dark"] {
    --bg-color: var(--bg-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --text-color: var(--text-dark);
    --text-secondary: var(--text-secondary-dark);
    --card-color: var(--card-dark);
    --border-color: var(--border-dark);
    --shadow-color: var(--shadow-dark);
}