$breakpoint-xs: 320px;
$breakpoint-s: 576px;
$breakpoint-m: 768px;
$breakpoint-l: 992px;
$breakpoint-xl: 1248px;
$breakpoint-xxl: 1440px;
$container-width-xs: 288px;
$container-width-s: 544px;
$container-width-m: 720px;
$container-width-l: 944px;
$container-width-xl: 1200px;
$color-brick: #bd2719;
$color-brick-light: #ffeeed;
$color-brick-medium-light: #facbc8;
$color-brick-dark: #800e04;
$color-bus: #0000bf;
$color-bus-light: #f0f0ff;
$color-bus-medium-light: #ccccff;
$color-bus-dark: #00005e;
$color-coat-of-arms: #0072c6;
$color-coat-of-arms-light: #e6f4ff;
$color-coat-of-arms-medium-light: #b5daf7;
$color-coat-of-arms-dark: #005799;
$color-copper: #00d7a7;
$color-copper-light: #cffaf1;
$color-copper-medium-light: #9ef0de;
$color-copper-dark: #00a17d;
$color-engel: #ffe977;
$color-engel-light: #fff9db;
$color-engel-medium-light: #fff3b8;
$color-engel-dark: #dbc030;
$color-fog: #9fc9eb;
$color-fog-light: #e8f3fc;
$color-fog-medium-light: #d0e6f7;
$color-fog-dark: #72a5cf;
$color-gold: #c2a251;
$color-gold-light: #f7f2e4;
$color-gold-medium-light: #e8d7a7;
$color-gold-dark: #9e823c;
$color-metro: #fd4f00;
$color-metro-light: #ffeee6;
$color-metro-medium-light: #ffcab3;
$color-metro-dark: #bd2f00;
$color-silver: #dedfe1;
$color-silver-light: #f7f7f8;
$color-silver-medium-light: #efeff0;
$color-silver-dark: #b0b8bf;
$color-summer: #ffc61e;
$color-summer-light: #fff4d4;
$color-summer-medium-light: #ffe49c;
$color-summer-dark: #cc9200;
$color-suomenlinna: #f5a3c7;
$color-suomenlinna-light: #fff0f7;
$color-suomenlinna-medium-light: #ffdbeb;
$color-suomenlinna-dark: #e673a5;
$color-tram: #008741;
$color-tram-light: #dff7eb;
$color-tram-medium-light: #a3e3c2;
$color-tram-dark: #006631;
$color-focus-outline: #0072c6;
$color-black: #000000;
$color-white: #ffffff;
$color-black-5: #f2f2f2;
$color-black-10: #e6e6e6;
$color-black-20: #cccccc;
$color-black-30: #b3b3b3;
$color-black-40: #999999;
$color-black-50: #808080;
$color-black-60: #595959;
$color-black-70: #4d4d4d;
$color-black-80: #333333;
$color-black-90: #1a1a1a;
$color-error: #b01038;
$color-error-light: #f6e2e6;
$color-error-dark: #8d0d2d;
$color-success: #007a64;
$color-success-light: #e2f5f3;
$color-success-dark: #006250;
$color-alert: #ffda07;
$color-alert-light: #fff4b4;
$color-alert-dark: #c27900;
$color-info: #0062b9;
$color-info-light: #e5eff8;
$color-info-dark: #004f94;
$box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.07);
$box-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
$box-shadow-l: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
$spacing-layout-2-xs: 1rem; // 16px
$spacing-layout-xs: 1.5rem; // 24px
$spacing-layout-s: 2rem; // 32px
$spacing-layout-m: 3rem; // 48px
$spacing-layout-l: 4rem; // 64px
$spacing-layout-xl: 6rem; // 96px
$spacing-layout-2-xl: 8rem; // 128px
$spacing-4-xs: 0.125rem; // 2px
$spacing-3-xs: 0.25rem; // 4px
$spacing-2-xs: 0.5rem; // 8px
$spacing-xs: 0.75rem; // 12px
$spacing-s: 1rem; // 16px
$spacing-m: 1.5rem; // 24px
$spacing-l: 2rem; // 32px
$spacing-xl: 2.5rem; // 40px
$spacing-2-xl: 3.0rem; // 48px
$spacing-3-xl: 3.5rem; // 56px
$spacing-4-xl: 4rem; // 64px
$spacing-5-xl: 4.5rem; // 72px
$fontsize-heading-xxl: 4rem; // 64px
$fontsize-heading-xl: 3rem; // 48px
$fontsize-heading-xl-mobile: 2.5rem; // 40px
$fontsize-heading-l: 2rem; // 32px
$fontsize-heading-m: 1.5rem; // 24px
$fontsize-heading-s: 1.25rem; // 20px
$fontsize-heading-xs: 1.125rem; // 18px
$fontsize-heading-xxs: 1rem; // 16px
$fontsize-body-s: 0.875rem; // 14px
$fontsize-body-m: 1rem; // 16px
$fontsize-body-l: 1.125rem; // 18px
$fontsize-body-xl: 1.25rem; // 20px
$font-default: HelsinkiGroteskPro, Arial, sans-serif;
$lineheight-s: 1;
$lineheight-m: 1.2;
$lineheight-l: 1.5;
$lineheight-xl: 1.75;