:root {
    /* COLORS */
    /* Color names generated from https://ecd59ce3-fe1d-4422-9056-8656712aadb1.p.bardy.io/ */
    /* Black & White */
    --color-black: #201E1A;
    --color-white: #ffffff;
    /* Gray */
    --color-gray-200: #EDECE9;
    --color-gray-300: #CDCBC8;
    --color-gray-400: #8A8986;
    --color-gray-500: #74736F;
    --color-gray-circle: #D9D9D9;
    /* Bluish cyan */
    --color-bluishCyan-100: #4dafc3;
    --color-bluishCyan-200: #008da9;
    --color-bluishCyan-300: #006a7d;
    --color-bluishCyan-circle: #269EB6;
    /* Orange */
    --color-orange-100: #eb7a00;
    --color-orange-300: #8D4900;
    --color-orange-500: #DE6600;
    --color-orange-600: #CF5701;
    /* From black to color */
    --filter-white: invert(99%) sepia(1%) saturate(1251%) hue-rotate(208deg) brightness(114%) contrast(100%);
    --filter-orange: invert(41%) sepia(84%) saturate(3102%) hue-rotate(14deg) brightness(99%) contrast(101%);
    /* FONT SIZES */
    --font-size-base: 16;
    --font-size-xs: calc((16 / var(--font-size-base)) * 1rem);
    --font-size-s: calc((18 / var(--font-size-base)) * 1rem);
    --font-size-m: calc((20 / var(--font-size-base)) * 1rem);
    --font-size-l: calc((22 / var(--font-size-base)) * 1rem);
    --font-size-xl: calc((24 / var(--font-size-base)) * 1rem);
    --font-size-xxl: calc((34 / var(--font-size-base)) * 1rem);
    --font-size-xxxl: calc((40 / var(--font-size-base)) * 1rem);
    --font-size-xxxxl: calc((48 / var(--font-size-base)) * 1rem);
    /* BREAKPOINTS - MEDIA QUERIS */
    /* not possible to use with css but use as reference*/
    --breakpoint-large-mobile: 400px;
    --breakpoint-tablet: 700px;
    --breakpoint-small-desktop: 1200px;
    --breakpoint-large-desktop: 1600px;
    /* SPACING */
    --spacing-xxxs: 10px;
    --spacing-xxs: 18px;
    --spacing-xs: 24px;
    --spacing-s: 30px;
    --spacing-sm: 40px;
    --spacing-smm: 48px;
    --spacing-m: 54px;
    --spacing-l: 60px;
    --spacing-xl: 70px;
    --spacing-big-xl: 80px;
    --spacing-small-xxl: 88px;
    --spacing-xxl: 100px;
    --spacing-big-xxl: 110px;
    --spacing-xxxl: 120px;
}