:root {
  --primary-color: black;

  /* data portrait */
  --data-portrait-background: #f9f8f5;
  --data-portrait-highlighted-border: #000000;

  /* border radius */
  --border-radius-header: 0rem;
  --border-radius-progress-bar-outside: 0rem;
  --border-radius-progress-bar-inside: 0rem;
  --border-radius-modal: 0rem;
  --border-radius-container: 0rem;
  --border-radius-button: 0rem;
  --border-radius-link-button: 0rem;
  --border-radius-input-text: 0rem;
  --border-radius-data-portrait: 0rem;
  --border-radius-data-portrait-highlighted: 0rem;
  --border-radius-shape-selection: 0rem;

  /* text */
  --text-answer-font-size: 1.25rem;
  --text-answer-font-weight: 300;
  --text-answer-line-height: 1.5rem;
  --text-answer-letter-spacing: normal;

  --text-navlink-font-size: 0.875rem;
  --text-navlink-font-weight: 300;
  --text-navlink-line-height: 1.25rem;
  --text-navlink-letter-spacing: 0.35px;

  --text-button-font-size: 1rem;
  --text-button-font-weight: 300;
  --text-button-line-height: 1.25rem;
  --text-button-letter-spacing: 0.4px;

  --text-homepage-title-font-size: 2.5rem;
  --text-homepage-title-font-weight: 300;
  --text-homepage-title-line-height: 3rem;
  --text-homepage-title-letter-spacing: normal;

  --text-homepage-title-desktop-font-size: 3rem;
  --text-homepage-title-desktop-font-weight: 300;
  --text-homepage-title-desktop-line-height: 3.5rem;
  --text-homepage-title-desktop-letter-spacing: normal;

  --text-homepage-subtitle-font-size: 1.5rem;
  --text-homepage-subtitle-font-weight: 300;
  --text-homepage-subtitle-line-height: 140%;
  --text-homepage-subtitle-letter-spacing: normal;

  --text-homepage-subtitle-desktop-font-size: 1.5rem;
  --text-homepage-subtitle-desktop-font-weight: 300;
  --text-homepage-subtitle-desktop-line-height: 140%;
  --text-homepage-subtitle-desktop-letter-spacing: normal;

  --text-homepage-question-font-size: 1.5rem;
  --text-homepage-question-font-weight: 300;
  --text-homepage-question-line-height: 140%;
  --text-homepage-question-letter-spacing: normal;

  --text-homepage-question-desktop-font-size: 1.5rem;
  --text-homepage-question-desktop-font-weight: 300;
  --text-homepage-question-desktop-line-height: 140%;
  --text-homepage-question-desktop-letter-spacing: normal;

  --text-survey-question-id-font-size: 0.875rem;
  --text-survey-question-id-font-weight: 300;
  --text-survey-question-id-line-height: 1.25rem;
  --text-survey-question-id-letter-spacing: normal;

  /* TODO: cta is temporary, in the future should be title or something like this. At the moment cta matches the survey data field */
  --text-survey-question-cta-font-size: 2rem;
  --text-survey-question-cta-font-weight: 300;
  --text-survey-question-cta-line-height: 2.5rem;
  --text-survey-question-cta-letter-spacing: normal;

  --text-survey-question-cta-desktop-font-size: 2rem;
  --text-survey-question-cta-desktop-font-weight: 300;
  --text-survey-question-cta-desktop-line-height: 2.5rem;
  --text-survey-question-cta-desktop-letter-spacing: normal;

  --text-answer-font-size: 1.25rem;
  --text-answer-font-weight: 300;
  --text-answer-line-height: 1.5rem;
  --text-answer-letter-spacing: normal;

  --text-accordion-header-font-size: 1.25rem;
  --text-accordion-header-font-weight: 300;
  --text-accordion-header-line-height: 1.5rem;
  --text-accordion-header-letter-spacing: normal;

  --text-legend-font-size: 1.25rem;
  --text-legend-font-weight: 300;
  --text-legend-line-height: 1.5rem;
  --text-legend-letter-spacing: normal;

  /* progress bar */
  --progress-bar-foreground: #95c6b4;
  --progress-bar-background: #f0faf6;
  --progress-bar-border: transparent;
  --progress-bar-margin-top: 0px;
  --progress-bar-margin-top-desktop: 0px;
  --progress-bar-margin-bottom: 0px;
  --progress-bar-margin-bottom-desktop: 0px;

  /* page */
  --page-padding-top: 0px;
  --page-padding-top-desktop: 0px;
  --page-padding-horizontal: 0px;
  --page-padding-horizontal-desktop: 0px;
  --page-padding-bottom: 0px;
  --page-padding-bottom-desktop: 0px;

  --page-main-wrapper-padding-horizontal: 4px;
  --page-main-wrapper-padding-horizontal-desktop: 20px;
  --page-main-wrapper-padding-top: 8px;
  --page-main-wrapper-padding-top-desktop: 16px;
  --page-main-wrapper-padding-bottom: 8px;
  --page-main-wrapper-padding-bottom-desktop: 16px;
  --page-result-wrapper-padding-horizontal: 4px;
  --page-result-wrapper-padding-horizontal-desktop: 20px;
  --page-result-wrapper-padding-top: 8px;
  --page-result-wrapper-padding-top-desktop: 16px;
  --page-result-wrapper-padding-bottom: 8px;
  --page-result-wrapper-padding-bottom-desktop: 16px;

  --page-wall-padding-top: 12px;
  --page-wall-padding-top-desktop: 20px;
  --page-wall-padding-right: 8px;
  --page-wall-padding-right-desktop: 32px;
  --page-wall-padding-bottom: 60px;
  --page-wall-padding-bottom-desktop: 24px;
  --page-wall-padding-left: 0px;
  --page-wall-padding-left-desktop: 0px;

  --background-color: #ffffff;
  --background-main-color: #ffffff;
  --background-result-color: #ffffff;
  --homepage-media-content-background-color: #7eaf9c;

  --button-primary-background: DarkRed;
  --button-primary-color: gold;
  --button-secondary-background: LightCyan;
  --button-secondary-color: tomato;
  --button-primary-background: #264037;
  --button-primary-color: #ffffff;
  --button-secondary-background: #ffffff;
  --button-secondary-color: #264037;
}