// New Colors
$color__primary: #1765d8;
$color__text_one: #111111;
$color__text_two: #222222;
$color__border: #cacaca;
$color__background: #f7f7ff;
$color__success: #408321;
$color__notification: #1765D8;
$color__error: #e52424;
$color__code_one: #b2cacd;
$color__code_two: #062e32;
$color__black: #000000;
$color__white: #ffffff;
$color__white_hover: rgba(255, 255, 255, 0.6);

// New Typography
$font__heading: "Roboto", sans-serif;
$font__body: "Roboto", sans-serif;
$font__code : "Monaco", "Courier 10 Pitch", Courier, monospace;

// Spacing
$spacing-none        : 0;
$spacing-1           : 0.5rem; // 8px
$spacing-2           : 1rem;// 16px
$spacing-3           : 1.5rem; // 24px
$spacing-mobile-4    : 1.5rem; // 24px
$spacing-desktop-4   : 2rem; // 32px
$spacing-mobile-5    : 2rem; // 32px
$spacing-desktop-5   : 2.5rem; // 40px
$spacing-mobile-6    : 2rem; // 32px
$spacing-desktop-6   : 3rem; // 48px
$spacing-mobile-7    : 2.5rem; // 40px
$spacing-desktop-7   : 3.5rem; // 56px
$spacing-mobile-8    : 2.5rem; // 40px
$spacing-desktop-8   : 4.5rem; // 72px
$spacing-mobile-9    : 3rem; // 48px
$spacing-desktop-9   : 6rem; // 96px
$spacing-mobile-10   : 3rem; // 48px
$spacing-desktop-10  : 9rem; // 144px
$spacing-mobile-11   : 3.5rem; // 56px
$spacing-desktop-11  : 12rem; // 192px

$spacing-xxs         : 0.25rem; // 4px
$spacing-xs          : 0.5rem; // 8px
$spacing-s           : 0.75rem; // 12px

// Spacing Headerbar
$stickyheader-mobile : 3.438rem; // 55px
$stickyheader-desktop: 5.5rem; // 88px

// Grid Columns
$col1                : 7.5rem; // 1 grid column
$col2                : 15rem; // 2 grid column
$col3                : 22.5rem; // 3 grid column
$col4                : 30rem; // 4 grid column
$col5                : 37.5rem; // 5 grid column
$col6                : 45rem; // 6 grid column
$col7                : 52.5rem; // 7 grid column
$col8                : 60rem; // 8 grid column
$col9                : 67.5rem; // 9 grid column
$col10               : 75rem; // 10 grid column
$col11               : 82.5rem; // 11 grid column
$col12               : 90rem; // 12 grid column, 1440px
$col6-no-margin      : 42rem; // 6 grid columns, no outer margins, default block width, 672px
$col12-no-margin     : 87rem; // 12 grid column, no outer margins

// Grid Margins
$grid-margins-xs     : 1rem; // 16px
$grid-margins-s      : 1.5rem; // 24px
$grid-margins-m      : 2rem; // 32px
$grid-margins-l      : 3rem; // 48px

// Border Radius
$border-radius-xs    : 0.5rem; // 8px
$border-radius-s     : 0.75rem; // 12px
$border-radius-m     : 1.5rem; // 24px
$border-radius-l     : 2.25rem; // 36px
$border-radius-circle: 6.25rem; // 100px