:root {
    /* Color Palette - Light Theme */
    --color-primary: #2d6a4f;
    --color-primary-light: #40916c;
    --color-primary-dark: #1b4332;
    --color-secondary: #d8f3dc;
    
    --color-accent: #e76f51;
    --color-accent-light: #f4a261;
    
    --color-background: #f8f9fa;
    --color-surface: #ffffff;
    --color-surface-hover: #f1f3f5;
    
    --color-text-main: #212529;
    --color-text-muted: #6c757d;
    --color-border: #dee2e6;
    
    --color-success: #2a9d8f;
    --color-warning: #e9c46a;
    --color-danger: #e63946;

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
}

[data-theme="dark"] {
    /* Color Palette - Dark Theme */
    --color-primary: #52b788;
    --color-primary-light: #74c69d;
    --color-primary-dark: #40916c;
    --color-secondary: #081c15;
    
    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-surface-hover: #2c2c2c;
    
    --color-text-main: #e0e0e0;
    --color-text-muted: #9e9e9e;
    --color-border: #333333;
    
    /* Shadows for Dark Mode */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
}