/* 
 * New.hulp.nl - Color Variables
 * Extracted from original Hulp.nl
 */

:root {
  /* Grey colors */
  --color-grey-5: #FDFCFC;
  --color-grey-10: #F9F8F7;
  --color-grey-15: #F3F1EE;
  --color-grey-20: #E9E7E4;
  --color-grey-30: #D2D2D2;
  --color-grey-40: #CBC9C5;
  --color-grey-50: #999693;
  --color-grey-70: #7D7B77;
  --color-grey-100: #535353;
  --color-grey-105: #301A16;
  --color-grey-110: #212121;
  
  /* Orange colors */
  --color-orange-40: #F58E5A;
  --color-orange-80: #F8C351;
  --color-orange-100: #FFB20B;
  
  /* Red colors */
  --color-red-10: #FFCDCD;
  --color-red-30: #FF4F1D;
  --color-red-50: #FF0000;
  --color-red-100: #610B0B;
  
  /* Teal colors */
  --color-teal-20: #ECF8FA;
  --color-teal-60: #D2E7EA;
  --color-teal-65: #629DA7;
  --color-teal-70: #455D61;
  --color-teal-80: #0CAEC7;
  --color-teal-100: #058CA1;
  --color-teal-105: #076776;
  --color-teal-110: #005866;
  
  /* Yellow colors */
  --color-yellow-30: #F9C351;
  --color-yellow-50: #FFB20B;
  --color-yellow-70: #FFE9BA;
  
  /* Green colors */
  --color-green-40: #FDFFEF;
  --color-green-80: #B5CC33;
  --color-green-90: #52C777;
  --color-green-100: #1DCA54;
  
  /* Purple colors */
  --color-purple-50: #E44A97;
  
  /* Font colors */
  --font-color-dark: #000;
  --font-color-light: #FFF;
  
  /* Font families */
  --font-family-sans-serif: 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-family-serif: Changa, 'Noto Sans', sans-serif;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Breakpoints */
  --breakpoint-sm: 48em; /* 768px */
  --breakpoint-md: 55em; /* 880px */
  --breakpoint-lg: 62.5em; /* 1000px */
}