:root {
  // Colors - site
  --primary-color: #5545a9;
  --color-27: #5545a9;
  --color-28: #5545a9;
  --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-66);
  --secondary-text-color: var(--color-4);
  --heading-base-color: var(--color-12);
  --text-link-color: var(--color-13);
  --full-star-fill-color: #ffdb20;
  --full-star-border-color: #ffdb20;
  --halfFull-star-fill-color: #ffdb20;
  --halfEmpty-star-fill-color: #e9e9e9;
  --half-star-border-color: #ffdb20;
  --empty-star-fill-color: #e9e9e9;
  --empty-star-border-color: #e9e9e9;
  --main-star-wrapper-color: #a5bcf0;

  --nav-background-color: #efefef;
  --nav-icon-color: black;
  --nav-height: 8rem;

  // Main menu
  --menu-text-color: var(--color-49);
  --menu-border-color: var(--color-52);
  
  // menu levels
  --levelOne-bg-color: var(--color-4);
  --levelOne-text-color: var(--color-49);
  --levelOne-hover-bg-color: var(--color-56);

  --levelTwo-bg-color: var(--color-56);
  --levelTwo-text-color: var(--color-49);
  --levelTwo-hover-bg-color: var(--color-56);

  --levelThree-bg-color: var(--color-56);
  --levelThree-text-color: var(--color-49);
  --levelThree-hover-bg-color: var(--color-56);

  // author
  --author-link-text-color: #165AF8;
  --author-fontweight:700;
  --author-primary-text-color: #3e3c47;

  // Font
  --main-font: 'Plus Jakarta Sans';

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

  // Spacing and sizes - site
  --module-bottom-spacing: 2rem;
  --side-container: 30rem;
  --main-container-max: 96rem;
  --border-radius: 0.6rem;
  --h1-size: 3.2rem;
  --h2-size: 2.4rem;
  --h3-size: 2rem;
  --h4-size: 1.8rem;
  --h5-size: 1.6rem;
  --h6-size: 1.5rem;
  --text-size: 1.6rem;
  --h1-mobile-size: 3.2rem;
  --h2-mobile-size: 2.4rem;
  --h3-mobile-size: 2rem;
  --h4-mobile-size: 1.8rem;
  --h5-mobile-size: 1.6rem;
  --h6-mobile-size: 1.5rem;

  // Line heights - site
  --h1-line-height: 4.2rem;
  --h2-line-height: 3.4rem;
  --h3-line-height: 3.2rem;
  --h4-line-height: 3rem;
  --h5-line-height: 2.8rem;
  --h6-line-height: 2.7rem;

  --h1-mobile-line-height: 3.5rem;
  --h2-mobile-line-height: 3.1rem;
  --h3-mobile-line-height: 3rem;
  --h4-mobile-line-height: 2.8rem;
  --h5-mobile-line-height: 2.4rem;
  --h6-mobile-line-height: 1.8rem;

  //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;

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

  // Components
  --nav-background-color: var(--color-4);
  --nav-icon-color: var(--color-19);

  --modal-overlay-color: rgba(0, 0, 0, 0.6);
  --modal-background-color: white;

  --star-rating-color: orange;
  --selling-point-icon-color: #00889e;

  --scroll-to-top-background-color: var(--color-1);

  --footer-background-color: var(--secondary-text-color);
  --footer-text-color: var(--color-50);
  --footer-socials-background-color: var(--color-49);
  --footer-security-background-color: #9defb4;
  --footer-security-text-color: var(--color-49);
  --footer-links-heading-color: var(--color-49);
  --footer-helpline-background-color: var(--color-51);
  --footer-helpline-text-color: var(--color-49);
  --footer-helpline-icon-color: var(--color-32);
  --footer-asSeenOn-background-color: var(--color-4);
  --footer-asSeenOn-text-color: var(--color-49);
  --footer-asSeenOn-border: 1.5px solid var(--color-52);

  --link-menu-background-color: var(--color-9);

  --cookie-consent-background-color: var(--color-4);
  --cookie-consent-text-color: #515156;
  --cookie-consent-text-size: 1.4rem;

  --scroll-to-top-bottom-offset: 2rem;

  --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: #F4F4F4;
  --table-highlight: #fff;
  --table-border-radius: 1.6rem;
  --table-head-background: #262629;
  --table-head-text: #fff;
  --second-table-background: #ffefe6;
  --secondary-module-background: #f7f5fc;

  // HTML Sitemap
  --template-name-icon-color: #ffffff;
  --template-name-icon-background: #ff893f;
  --page-number-background: #393939;
  --page-number-color: #fff;
  --page-number-border: 0.2rem solid white;
  --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: #000000;
  --template-name-font-size: 2rem;
  --icon-color: #ffffff;
  --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);

  // cards
  --cards-border-radius: 1.6rem;
  --cards-border: 1.5px solid var(--color-52);
  --cards-background-color: var(--color-4);

  // feedbacl module
  --feedbackModule-main-border-radius: 8px;
  --feedbackModule-background-color: white;
  --feedbackModule-container-radius: 8px;
  --feedbackModule-container-border: 1.5px solid #EAEAEA;
  --feedbackModule-firstText-font-size: 20px;
  --feedbackModule-firstText-line-height: 20px;
  --feedbackModule-secondText-line-height: 26px;
  --feedbackModule-secondText-anchor-line-height: 26px;
  --feedbackModule-buttons-border-style: 2.2px solid #2e3337;
  --feedbackModule-buttons-border-radius: 8px;
  --feedbackModule-buttons-font-size: 18px;
  --feedbackModule-buttons-line-height: 20px;
  --feedbackModule-buttons-width: 167.5px;
  --feedbackModule-first-button-border: 2.2px solid var(--color-75);
  --feedbackModule-second-button-border: 2.2px solid var(--color-76);
  --feedbackModule-container-gap: 4rem;
  --feedbackModule-buttons-height: 6rem;
  --feedbackModule-buttons-background: none;
  --feedbackModule-here-underline: none;

  //Feedback module mobile
  --feedbackModule-firstText-font-size-mobile: 18px;
  --feedbackModule-firstText-line-height-mobile: 28px;
  --feedbackModule-container-gap-mobile: 2.2rem;
  --feedbackModule-buttons-height-mobile: 4.8rem;
  --feedbackModule-buttons-width-mobile: 151.5px;  
  
  // Info grid
  --info-grid-border-left-color: var(--color-61);
  --info-grid-background-color: var(--color-4);
  --info-grid-button-color: var(--color-62);
  --info-grid-title-color: var(--color-49);
  --info-grid-text-color: var(--color-50);
  --info-grid-desktop-border-color: var(--color-52);
  --info-grid-mobile-border-color: var(--color-57);
  --info-grid-column-border: 1px solid #a5bcf0;
  --info-grid-column-background-color: var(--color-4);
  --paragraph-color: var(--color-6);

  // Tooltip
  --tooltip-background-color: #6e33e5;
  --tooltip-text-color: var(--color-4);
  --tooltip-arrow-size: 6px;
  --tooltip-margin: 4px;
}