/* ========================================
   CSS VARIABLES - 8PX GRID DESIGN SYSTEM
   ======================================== */
:root {
    --green: #2D5016;
    --light-green: #4A7C59;
    --beige: #F5F1E8;
    --gray: #666;
    --white: #FFFFFF;
    --light-gray: #f8f9fa;
    
    /* 8px Grid System */
    --space-xs: 8px;    /* 1 unit */
    --space-sm: 16px;   /* 2 units */
    --space-md: 24px;   /* 3 units */
    --space-lg: 32px;   /* 4 units */
    --space-xl: 40px;   /* 5 units */
    --space-2xl: 48px;  /* 6 units */
    --space-3xl: 64px;  /* 8 units */
    --space-4xl: 80px;  /* 10 units */
    --space-5xl: 96px;  /* 12 units */
    
    /* Border Radius (8px grid) */
    --radius-sm: 8px;   /* 1 unit */
    --radius-md: 16px;  /* 2 units */
    --radius-lg: 24px;  /* 3 units */
    
    /* Shadows (8px grid) */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition: all 0.3s ease;
}