:root {
  /* Color Palette */
  --color-warning: #FFCD00;
  --color-pedestrian: #C4D600;
  --color-construction: #E87B00;
  --color-detour: #DB4D69;
  --color-danger: #A6192E;
  --color-navigation: #006747;
  --color-information: #002F6C;
  --color-landmark: #693F23;
  --color-guide: #ffffff;
  --color-other: #6D2077;

  /* Fonts */
  --font-overpass: "Overpass", sans-serif;
  --font-headers: normal 500 1rem/1.25rem "Overpass", sans-serif;
  --font-text: normal 400 1rem/1.25rem "IBM Plex Sans", sans-serif;
  
  /* Element Colors */
  --color-link: var(--color-information);
  --color-breadcrumb-link: #000000;
  --color-text: #000000;
  --color-h1: #ffffff;
  --color-header-text: #ffffff;
  --color-header-border: #ffffff;
  --color-footer: #000000;

  /* Background Colors */
  --color-background-page: #F1EDE7;
  --color-background-header: var(--color-navigation);
  --color-background-breadcrumb: var(--color-warning);

  /* Border Constants */
  --border-header: 1px var(--color-header-border) solid;
  --border-radius-header: 5px;

  /* Shadows */
  --shadow-header: 3px 3px 3px rgb(0 0 0 / 0.2);
  --shadow-breadcrumb: var(--shadow-header);

  /* "Sign" Styling */
  --color-background-sign: #ffffff;
  --border-sign: var(--border-header);
  --border-white-sign: 1px #000000 solid;
  --border-radius-sign: var(--border-radius-header);
  --shadow-sign: var(--shadow-header);
  --padding-sign: 1em;
  --color-sign: #000000;
  --color-nonwhite-sign: #ffffff;
  --color-sign-link: #000000;
  --margin-sign-header: 1em;

  /* Grid */
  --grid-gap: 1em;

  /* Destinations Sign Styling */
  --font-size-navigational-icons: 0.75em;
  --color-navigational-icons: var(--color-danger);

  /* Interchange Graphics */
  --size-interchange-graphic: 5em;
  --color-interchange-graphic: black;
}

body.dark-mode {
  --color-background-page: #2b2a27;
  --color-background-sign: #383733;
  --color-sign: white;
  --color-sign-link: white;
  --color-link: white;
  --color-footer: white;
  --border-white-sign: 1px #ffffff solid;
  --shadow-header: 3px 3px 3px rgb(255 255 255 / 0.2);
  --shadow-sign: var(--shadow-header);
  --color-navigational-icons: red;
  --color-interchange-graphic: var(--color-warning);
}