/* variables */
:root {
    /* colors */
    --white: #ffffff;
    --red: rgb(176, 29, 66); 
    --redlight: rgb(176, 29, 66, .1); 
    --black: #000000;
    --color-gray-50: rgb(251 249 250);
    --color-gray-100: rgb(246 243 244);
    --color-gray-300: rgb(209 213 220);    
    --color-gray-400: rgb(153 161 175);
    --color-gray-500: rgb(106, 114, 130);
    --color-gray-600: rgb(74, 85, 101);
    --color-gray-700: rgb(54,65,83); /* text */
    --color-gray-800: rgb(30 41 57);
    --color-gray-900: rgb(16 24 40); /* headlines, footer */

    /* font sizes */
    --text-size-m: 1.6rem;
    --text-size-l: 1.8rem;

    /* layout width */
    --site-max-width-xl: 1440px;
    --site-max-width-l: 1280px;
    --site-max-width-s: 896px;

    /* styles */
    --radius: 1rem;
    
    /* spacings */
    --spacing-xs: 16px;
    --spacing-s: 24px;
    --spacing-m: 48px;
    --spacing-l: 64px;

    --spacing-border: 32px;
  
  }