/*
  Базовий CSS
  - Дизайн-токени (кольори, радіуси, відступи)
  - Базове «полотно» (розмір) і змінна масштабу для адаптивності
  - Глобальні правила для вікна перегляду (без горизонтальної прокрутки)
  - Спільні типографічні утиліти, які використовуються в HTML
*/

:root {
  --dl-color-red-0: rgba(255, 245, 247, 1);
  --dl-color-grey-0: rgba(255, 255, 255, 1);
  --dl-color-brown-0: rgba(255, 250, 245, 1);
  --dl-color-green-0: rgba(247, 255, 245, 1);
  --dl-color-red-100: rgba(253, 192, 204, 1);
  --dl-color-red-200: rgba(249, 141, 163, 1);
  --dl-color-red-300: rgba(242, 98, 127, 1);
  --dl-color-red-400: rgba(233, 64, 98, 1);
  --dl-color-red-500: rgba(221, 38, 75, 1);
  --dl-color-red-600: rgba(205, 21, 57, 1);
  --dl-color-red-700: rgba(184, 9, 44, 1);
  --dl-color-red-800: rgba(160, 3, 34, 1);
  --dl-color-red-900: rgba(135, 0, 27, 1);
  --dl-color-grey-100: rgba(253, 253, 253, 1);
  --dl-color-grey-200: rgba(249, 249, 249, 1);
  --dl-color-grey-300: rgba(242, 242, 242, 1);
  --dl-color-grey-400: rgba(233, 233, 233, 1);
  --dl-color-grey-500: rgba(221, 221, 221, 1);
  --dl-color-grey-600: rgba(205, 205, 205, 1);
  --dl-color-grey-700: rgba(184, 184, 184, 1);
  --dl-color-grey-800: rgba(160, 160, 160, 1);
  --dl-color-grey-900: rgba(135, 135, 135, 1);
  --dl-color-main-red: rgba(220, 20, 60, 1);
  --dl-color-brown-100: rgba(253, 229, 206, 1);
  --dl-color-brown-200: rgba(249, 207, 168, 1);
  --dl-color-brown-300: rgba(242, 187, 134, 1);
  --dl-color-brown-400: rgba(233, 168, 107, 1);
  --dl-color-brown-500: rgba(221, 151, 85, 1);
  --dl-color-brown-600: rgba(205, 134, 68, 1);
  --dl-color-brown-700: rgba(184, 117, 55, 1);
  --dl-color-brown-800: rgba(160, 100, 44, 1);
  --dl-color-brown-900: rgba(135, 83, 35, 1);
  --dl-color-green-100: rgba(233, 253, 226, 1);
  --dl-color-green-200: rgba(217, 249, 207, 1);
  --dl-color-green-300: rgba(202, 242, 189, 1);
  --dl-color-green-400: rgba(186, 233, 172, 1);
  --dl-color-green-500: rgba(171, 221, 156, 1);
  --dl-color-green-600: rgba(155, 205, 140, 1);
  --dl-color-green-700: rgba(137, 184, 123, 1);
  --dl-color-green-800: rgba(118, 160, 105, 1);
  --dl-color-green-900: rgba(99, 135, 88, 1);
  --dl-color-sec-brown: rgba(139, 90, 43, 1);
  --dl-color-sec-green: rgba(79, 121, 66, 1);
  --dl-color-sec-greyd: rgba(76, 76, 76, 1);
  --dl-color-sec-greyl: rgba(165, 165, 165, 1);
  --dl-color-base-black: rgba(0, 0, 0, 1);
  --dl-color-main-black: rgba(26, 26, 26, 1);
  --dl-color-main-white: rgba(248, 248, 248, 1);
  --dl-color-colors-text: rgba(21, 20, 56, 0.4000000059604645);
  --dl-layout-size-large: 144px;
  --dl-layout-size-small: 48px;
  --dl-layout-space-unit: 16px;
  --dl-layout-size-medium: 96px;
  --dl-layout-size-xlarge: 192px;
  --dl-layout-size-xsmall: 16px;
  --dl-color-theme-accent1: #FFFFFF;
  --dl-color-theme-accent2: #F5D1B0;
  --dl-layout-radius-round: 50%;
  --dl-layout-size-xxlarge: 288px;
  --dl-color-theme-primary1: #BF4408;
  --dl-color-theme-primary2: #E65103;
  --dl-layout-size-maxwidth: 1400px;
  --dl-layout-radius-radius2: 2px;
  --dl-layout-radius-radius4: 4px;
  --dl-layout-radius-radius8: 8px;
  --dl-layout-space-halfunit: 8px;
  --dl-layout-space-sixunits: 96px;
  --dl-layout-space-twounits: 32px;
  --dl-color-theme-secondary1: #FFFFFF;
  --dl-color-theme-secondary2: #FBF1EB;
  --dl-layout-space-fiveunits: 80px;
  --dl-layout-space-fourunits: 64px;
  --dl-layout-space-threeunits: 48px;
  --dl-color-theme-neutral-dark: #191818;
  --dl-layout-radius-cardradius: 8px;
  --dl-color-theme-neutral-light: #FBFAF9;
  --dl-layout-radius-imageradius: 8px;
  --dl-layout-radius-inputradius: 24px;
  --dl-layout-radius-buttonradius: 24px;
  --dl-layout-space-oneandhalfunits: 24px;
  --base-width: 375;
  --base-height: 5129;
  --scale: calc(100vw / (var(--base-width) * 1px));
}

/* Prevent horizontal scroll on viewport */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/*
  Правила для вікна перегляду
  - Заборона горизонтальної прокрутки через масштабоване «полотно»
*/
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/*
  Типографічні утиліти
  - Узгоджені текстові стилі, що перевикористовуються у компонентах
*/
.mobilefootnote { font-size: 14px; font-style: normal; font-family: Roboto; font-weight: 400px; font-stretch: normal; letter-spacing: 0em; }
.mobilecaption { font-size: 12px; font-style: normal; font-family: Roboto; font-weight: 400px; font-stretch: normal; letter-spacing: 0em; }

.LandingMobh1 { font-size: 34px; font-style: normal; font-family: Roboto; font-weight: 500px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobh1Mak { font-size: 36px; font-style: normal; font-family: Mak; font-weight: 700px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobh2 { font-size: 28px; font-style: normal; font-family: Roboto; font-weight: 500px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobh2Mak { font-size: 28px; font-style: normal; font-family: Mak; font-weight: 700px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobh3 { font-size: 24px; font-style: normal; font-family: Roboto; font-weight: 400px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobh4 { font-size: 20px; font-style: normal; font-family: Roboto; font-weight: 400px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobbody { font-size: 16px; font-style: normal; font-family: Roboto; font-weight: 300px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobButton { font-size: 16px; font-style: normal; font-family: Roboto; font-weight: 500px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobfootnote { font-size: 14px; font-style: normal; font-family: Roboto; font-weight: 500px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobCaption2 { font-size: 12px; font-style: normal; font-family: Roboto; font-weight: 300px; font-stretch: normal; letter-spacing: 0em; }
.LandingMobcaption1 { font-size: 10px; font-style: normal; font-family: Roboto; font-weight: 400px; font-stretch: normal; letter-spacing: 0em; }