/* ============================================
   CSS VARIABLES - Easy to customize colors
   ============================================ */
:root {
  /* Primary Colors */
  --orange: #F5841F;
  --orange-dark: #D46B0A;
  
  /* Secondary Colors */
  --sky-blue: #87CEEB;
  --sky-blue-dark: #6BB8D9;
  --yellow: #FFD93D;
  --yellow-dark: #E6C235;
  --coral: #FF6B9D;
  --coral-dark: #E65580;
  --teal: #4ECDC4;
  --teal-dark: #3BB8B0;
  
  /* Neutrals */
  --dark-blue: #2D5B7B;
  --white: #FFFFFF;
  --off-white: #FFFAF5;
  
  /* Typography */
  --font-display: 'Fredoka One', cursive;
  --font-body: 'Nunito', 'Comic Sans MS', sans-serif;
  
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 15px;
  --spacing-md: 25px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
  
  /* Border Radius */
  --radius-sm: 15px;
  --radius-md: 20px;
  --radius-lg: 25px;
  --radius-xl: 30px;
  --radius-round: 50px;
  --radius-circle: 50%;
  
  /* Shadows */
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
  --shadow-orange: 0 8px 25px rgba(245, 132, 31, 0.4);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}