html {
  --content-wrap: 1280px;
  --content-margin: 24px;
  --content-margin-half: 12px;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-brand-primary: #ea5b0c;
  --color-brand-secondary: #666666;
  --color-main-background: #ffffff;
  --color-main-text: #333333;

  --color-grey-1: #eeeeee;
  --color-grey-2: #dddddd;
  --color-grey-3: #cccccc;

  --color-status-positive: #3f784c;
  --color-status-negative: #540b0e;

  --height-streetmap: calc(var(--content-wrap) / 2);
  --max-height-streetmap: calc(100vw / 2);

  --breakpoint-small: 480px;
  --breakpoint-medium: 768px;
  --breakpoint-medium-large: 1024px;
  --breakpoint-large: 1280px;

  --golden-ratio-major: 62.8%;
  --golden-ratio-minor: 38.2%;
}

@media (min-width: 768px) {
  html {
    --content-margin: 30px;
    --content-margin-half: 15px;

    --height-streetmap: calc(var(--content-wrap) / 3);
    --max-height-streetmap: calc(100vw / 3);
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --color-main-background: #222222;
    --color-main-text: #f6f6f6;

    --color-grey-1: #333333;
    --color-grey-2: #444444;
    --color-grey-3: #555555;
  }
}