@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Root Variables for a Modern, Professional, Eco-Friendly Theme */
:root {
    --primary-color: #2E7D32; /* Deep green for eco theme */
    --secondary-color: #2196F3; /* Professional blue */
    --accent-color: #4CAF50; /* Lighter green accent */
    --background-color: #ffffff; /* Clean white background */
    --surface-color: #f8f9fa; /* Light gray for surfaces */
    --card-background: #ffffff; /* White cards */
    --text-primary: #212529; /* Dark text */
    --text-secondary: #6c757d; /* Gray text */
    --text-muted: #adb5bd; /* Muted text */
    --placeholder-color: #adb5bd; /* Placeholder color */
    --border-color: #e9ecef; /* Light border */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --transition: all 0.3s ease;
    --gradient-primary: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
    --gradient-secondary: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.2);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --primary-color: #4CAF50; /* Lighter green for dark mode */
    --secondary-color: #42A5F5; /* Lighter blue */
    --accent-color: #81C784; /* Even lighter green */
    --background-color: #121212; /* Dark background */
    --surface-color: #1e1e1e; /* Darker surface */
    --card-background: #1e1e1e; /* Dark cards */
    --text-primary: #ffffff; /* White text */
    --text-secondary: #cccccc; /* Light gray text */
    --text-muted: #888888; /* Muted text */
    --placeholder-color: #888888; /* Placeholder color */
    --border-color: #333333; /* Dark border */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(30, 30, 30, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
}