:root {
  // NOTE -- Colors - site
  --primary-color: var(--color-1);
  --secondary-color: var(--color-2);
  --primary-hover-color: var(--color-7);
  --secondary-hover-color: var(--color-8);
  --tertiary-hover-color: var(--color-9);
  --primary-text-color: var(--color-52);
  --secondary-text-color: var(--color-4);
  --heading-base-color: var(--color-12);
  --text-link-color: var(--color-13);
  --full-star-fill-color: #fba62f;
  --full-star-border-color: #fba62f;
  --halfFull-star-fill-color: #fba62f;
  --halfEmpty-star-fill-color: #fff;
  --half-star-border-color: #fba62f;
  --empty-star-fill-color: #fff;
  --empty-star-border-color: #808080;
  --main-star-wrapper-color: #a5bcf0;
  --content-list-number-color: #3c3c40;
  --paragraph-color: var(--color-52);

  // NOTE -- Font
  --main-font: nunito;

  // NOTE --Body Background Color
  --body-background-color: var(--color-5);

  // NOTE -- Spacing and sizes - site
  --nav-height: 8rem;
  --nav-height-mobile: 8rem;
  --nav-height-desktop: 8rem;
  --nav-anchor-height: 5.3rem;
  --module-spacing: 2rem;
  --side-container: 30rem;
  --main-container-max: 110rem;
  --max-width-content: 110rem;
  --border-radius: 0.6rem;
  --h1-size: 4rem;
  --h2-size: 3.2rem;
  --h3-size: 2.8rem;
  --h4-size: 2.4rem;
  --h5-size: 2rem;
  --h6-size: 1.6rem;
  --text-size: 1.6rem;
  --text-line-height: 2.7rem;
  --h1-mobile-size: 4rem;
  --h2-mobile-size: 2.4rem;
  --h3-mobile-size: 2rem;
  --h4-mobile-size: 1.8rem;
  --h5-mobile-size: 1.6rem;
  --h6-mobile-size: 1.4rem;

  // NOTE -- Line heights - site
  --h1-line-height: 4.8rem;
  --h2-line-height: 4rem;
  --h3-line-height: 3.6rem;
  --h4-line-height: 3.2rem;
  --h5-line-height: 2.8rem;
  --h6-line-height: 2.4rem;
  --h1-mobile-line-height: 4.8rem;
  --h2-mobile-line-height: 3.2rem;
  --h3-mobile-line-height: 2.8rem;
  --h4-mobile-line-height: 2.6rem;
  --h5-mobile-line-height: 2.4rem;
  --h6-mobile-line-height: 2.2rem;

  // NOTE -- font-weights
  --h1-font-weight: 700;
  --h2-font-weight: 700;
  --h3-font-weight: 700;
  --h4-font-weight: 700;
  --h5-font-weight: 700;
  --h6-font-weight: 700;
  --h1-mobile-font-weight: 700;
  --h2-mobile-font-weight: 700;
  --h3-mobile-font-weight: 700;
  --h4-mobile-font-weight: 700;
  --h5-mobile-font-weight: 700;
  --h6-mobile-font-weight: 700;

  // NOTE -- Z-index
  --modal-index: 30;
  --navigation-index: 20;
  --scroll-to-top-index: 10;
  --cookie-consent-index: 30;
  --search-form-index: 15;
  --above-search-form-index: 16;

  // NOTE -- Components
  --nav-background-color: var(--color-4);
  --nav-spacing: 0 120px;
  --nav-image-width: 20rem;
  --nav-icon-color: var(--color-19);
  --search-icon-color: var(--color-43);

  // NOTE -- Main menu
  --menu-text-color: var(--color-49);
  --menu-border-color: var(--color-50);

  // NOTE -- menu levels
  --levelOne-bg-color: var(--color-4);
  --levelOne-text-color: var(--color-49);
  --levelOne-hover-bg-color: #eee;
  --levelOne-hover-text-color: var(--color-49);
  --levelTwo-bg-color: #ECECEC;
  --levelTwo-text-color: var(--color-49);
  --levelTwo-hover-bg-color: #ECECEC;
  --levelTwo-hover-text-color: var(--color-49);
  --levelThree-bg-color: var(--color-4);
  --levelThree-text-color: var(--color-49);
  --levelThree-hover-bg-color: #eee;
  --levelThree-hover-text-color: var(--color-49);

  // NOTE -- optional menu styles
  --levelOne-btn-bg-color: var(--color-4);
  --levelOne-desktop-bg-color: var(--color-4);
  --levelTwo-btn-bg-color: #ECECEC;
  --levelTwo-desktop-bg-color: #ECECEC;
  --levelThree-btn-bg-color: #fbfbfb;
  --levelThree-desktop-bg-color: var(--color-4);
  --modal-overlay-color: rgb(0 0 0 / 60%);
  --modal-background-color: #fff;
  --star-rating-color: #ffa500;
  --selling-point-icon-color: #00889e;
  --scroll-to-top-background-color: var(--color-1);
  --footer-background-color: #fafafa;
  --link-menu-background-color: var(--color-9);
  --cookie-consent-background-color: var(--color-4);
  --cookie-consent-text-color: var(--color-18);
  --cookie-consent-text-size: 1.4rem;
  --toplist-ranking-first-color: var(--color-14);
  --toplist-ranking-second-color: var(--color-8);
  --toplist-ranking-third-color: var(--color-15);
  --toplist-ranking-base-color: var(--color-2);
  --table-background: var(--color-53);
  --table-highlight: var(--color-4);
  --table-border-radius: 1.6rem;
  --table-head-background: var(--color-51);
  --table-head-text: var(--color-4);
  --second-table-background: var(--color-17);
  --secondary-module-background: var(--color-42);
  --stack-table-background-color: var(--body-background-color);
  // NOTE -- pagination with mid points
  --pagination-gap: 0.8rem;
  --pagination-midpoints-gap: 0;
  --pagination-width: 4rem;
  --pagination-height: 4rem;
  --pagination-font-size: 1.6rem;
  --pagination-font-weight: 500;
  --pagination-line-height: 4.8rem;
  --pagination-current-page-background-color: #2e3337;
  --pagination-current-page-color: #fff;
  --pagination-current-page-border: none;
  --pagination-border-radius: 100px;
  --pagination-midpoints-border-radius: 100px;
  --pagination-background-color: #eeebe5;
  --pagination-midpoints-background-color: #eeebe5;
  --pagination-border: none;
  --pagination-active-color: #2e3337;
  --pagination-inactive-color: #fff;
  --pagination-active-font-weight: 700;

  // NOTE -- HTML Sitemap
  --template-name-icon-color: #fff;
  --template-name-icon-background: #ff893f;
  --page-number-background: #393939;
  --page-number-color: #fff;
  --page-number-border: 0.2rem solid #fff;
  --sitemap-background-color: #fafafa;
  --sitemap-connector-border: dashed 1px #e3e6ef;
  --container-border: none;
  --container-background-color: transparent;
  --container-padding-mobile: 0 2.4rem 2rem 2.4rem;
  --container-padding-desktop: 0 1.6rem 2rem 1.6rem;
  --container-margin-mobile: 0;
  --container-margin-desktop: 0;
  --template-name-color: #000;
  --template-name-font-size: 2rem;
  --icon-color: #fff;
  --icon-background-color: #6e6e84;
  --sitemap-link-text-decoration: none;
  --sitemap-link-text-font-weight: normal;
  --storybook-soccer: var(--color-45);
  --storybook-tennis: var(--color-46);
  --storybook-handball: var(--color-47);

  // NOTE -- Content module
  --content-width: 0 auto;
  --margin-content: 0 auto;
  --margin-content-min-tablet: 0 auto;
  --padding-content-min-tablet: 0 2.4rem;
  --padding-conent: 0 1.6rem;
  --paragraph-content-last-margin-bottom: 2.4rem;
  --content-list-padding: 0 1.6rem 1.6rem 5.2rem;
  --content-list-last-padding: 0;
  --show-more-button-padding-mobile: 0 1.6rem;
  --show-more-button-padding-tablet: 0 2.4rem;
  --contentCollapsible-button-bg: #fff;
  --contentCollapsibleBox-bg: #fff;

  // NOTE -- anchor
  --anchor-max-width: var(--main-container-max, 96rem);

  // NOTE -- Footer
  --footer-helpline-background-color: #ffcdcb;
  --footer-security-background-color: #9DEFB4;

  // NOTE -- Rating 
  --dir: right;
  --stars: 5;
  --value: 1;
}