:root {
    /* Fonts */
    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'Outfit', sans-serif;
    
    /* Primary Colors */
    --color-primary: #85a838;    /* Green */
    --color-secondary: #e12c27;  /* Red */
    --color-navy: #123f54;      /* Navy */
    --color-white: #b3c936;     /* White == changed to green*/
    
    /* Extended Color Palette */
    --color-green-dark: #6b8a2d;   /* Darker green */
    --color-green-light: #9fbc52;  /* Lighter green */
    --color-red-dark: #b82320;     /* Darker red */
    --color-red-light: #e54f4b;    /* Lighter red */
    --color-navy-dark: #0d2d3d;    /* Darker navy */
    --color-navy-light: #1a5470;   /* Lighter navy */
    
    /* Gradient Combinations */
    --gradient-green: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-green-light) 100%);
    --gradient-red: linear-gradient(135deg, var(--color-red-dark) 0%, var(--color-red-light) 100%);
    --gradient-navy: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy-light) 100%);
    
    /* UI Colors */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --accent-color: var(--color-navy);
    --background-color: var(--color-white);
    
    /* Text Colors */
    --text-dark: var(--color-secondary);
    --text-medium: var(--color-navy-light);
    --text-light: var(--color-white);
    
    /* Background Colors */
    --bg-light: var(--color-white);
    --bg-off-white: #f0f5f5;
    --bg-dark: var(--color-navy);
    
    /* Overlays */
    --overlay-dark: linear-gradient(rgba(18, 63, 84, 0.7), rgba(18, 63, 84, 0.3));
    --overlay-light: linear-gradient(rgba(249, 255, 255, 0.9), rgba(249, 255, 255, 0.7));
    --overlay-primary: linear-gradient(rgba(133, 168, 56, 0.8), rgba(133, 168, 56, 0.4));
    
    /* Spacing System */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 4rem;     /* 64px */
    --spacing-xxl: 6rem;    /* 96px */
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    
    /* Animation Timing */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;
    --transition-very-slow: 1000ms;
    
    /* Z-index Scale */
    --z-negative: -1;
    --z-elevate: 1;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-modal: 300;
    --z-popup: 400;
    --z-maximum: 999;
    
    /* Shadows */
    --shadow-soft: 0 2px 4px rgba(47, 60, 126, 0.1);
    --shadow-medium: 0 4px 6px rgba(47, 60, 126, 0.1);
    --shadow-strong: 0 8px 16px rgba(47, 60, 126, 0.1);
    
    /* Card Gradients */
    --card-gradient-1: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    --card-gradient-2: linear-gradient(45deg, var(--color-navy), var(--color-primary));
    --card-gradient-3: linear-gradient(45deg, var(--color-navy), var(--color-secondary));
    
    /* Radial Gradients */
    --radial-forest: radial-gradient(circle at center, var(--color-secondary) 0%, var(--color-primary) 100%);
    --radial-ocean: radial-gradient(circle at center, var(--color-navy) 0%, var(--color-primary) 100%);
    
    /* Glowing Effects */
    --glow-leaf: 0 0 20px rgba(76, 175, 80, 0.4);
    --glow-water: 0 0 20px rgba(79, 195, 247, 0.4);
    --glow-sun: 0 0 20px rgba(253, 216, 53, 0.4);
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

@keyframes leaf-fall {
    0% { transform: translateY(-100%) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(360deg); }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media Queries */
:root {
    --container-max-width: 1200px;
    --container-padding: var(--spacing-md);
    
    @media (min-width: 640px) {
        --container-padding: var(--spacing-lg);
    }
    
    @media (min-width: 1024px) {
        --container-padding: var(--spacing-xl);
    }
}