/* CSS Variables - Color Palette from Logo */
:root {
    /* Brand Colors */
    --color-primary-yellow: #ffed99;
    --color-accent-green: #01a133;
    
    /* Background Colors */
    --color-dark-bg: #1a1a1a;
    --color-light-bg: #f5f5f5;
    --color-white: #ffffff;
    
    /* Text Colors */
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-light: #999999;
    
    /* Gradient Colors */
    --gradient-yellow: linear-gradient(135deg, #ffed99 0%, #ffd966 100%);
    --gradient-green: linear-gradient(135deg, #01a133 0%, #008028 100%);
    --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    
    /* Typography */
    --font-heading: 'Roboto Condensed', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    /* Font Sizes Desktop */
    --font-size-h1: 48px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-body: 16px;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 64px;
    --spacing-xxl: 96px;
    
    /* Transitions */
    --transition-default: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    
    /* Z-index */
    --z-header: 1000;
    --z-overlay: 100;
    --z-content: 10;
}

/* Responsive Font Sizes */
@media (max-width: 1365px) {
    :root {
        --font-size-h1: 40px;
        --font-size-h2: 28px;
        --font-size-h3: 22px;
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --font-size-body: 14px;
    }
}