:root {
  /* Functions */
  --default-transition: 420ms ease;
  /* Layout / Spacings */
  --max-content-width: 1200px;
  --toolbar-height: 64px;
  --navbar-top-height: 64px;
  --navbar-bottom-height: 56px;
}

html.light-mode {
  --backdrop-color: 255, 255, 255, 0.42;
  --background-content-accent: 251, 251, 251, 1;
  --background-content: 255, 255, 255, 1;
  --background-main: 250, 250, 250, 1;
  --color-error: 199, 66, 66, 1;
  --color-info: 82, 191, 233, 1;
  --color-success: 96, 211, 148, 1;
  --color-warn: 251, 192, 45, 1;
  --color-neutral: 117, 117, 117, 1;
  --color-neutral-dark: 73, 73, 73, 1;
  --color-neutral-light: 164, 164, 164, 1;
  --conference-background: 21, 21, 21, 1;
  --font-color-disabled: 96, 96, 96, 1;
  --font-color: 42, 42, 42, 1;
  --navbar-bottom-background: 255, 255, 255, 1;
  --navbar-bottom-icon-color: 42, 42, 42, 1;
  --navbar-top-background: 255, 255, 255, 1;
  --navbar-top-icon-color: 82, 191, 233, 1;
  --on-error-color: 255, 255, 255, 1;
  --on-info-color: 255, 255, 255, 1;
  --on-primary-color: 255, 255, 255, 1;
  --on-success-color: 255, 255, 255, 1;
  --on-toolbar-color: 244, 244, 244, 1;
  --on-warn-color: 255, 255, 255, 1;
  --on-neutral-color: 255, 255, 255, 1;
  --on-background-color: 42, 42, 42, 1;
  --primary-color-dark: 34, 156, 212, 1;
  --primary-color-light: 184, 235, 255, 1;
  --primary-color: 82, 191, 233, 1;
  --shadow-color: 0, 0, 0, 0.1;
  --title-font-color: 90, 90, 90, 1;
  --toolbar-color: 82, 191, 233, 1;
  --vuzix-focus-color: 255, 140, 66, 1;

  --default-radius: 12px;
}

html.dark-mode {
  --backdrop-color: 255, 255, 255, 0.42;
  --background-content-accent: 64, 64, 64, 1;
  --background-content: 42, 42, 42, 1;
  --background-main: 21, 21, 21, 1;
  --color-error: 199, 66, 66, 1;
  --color-info: 82, 191, 233, 1;
  --color-success: 96, 211, 148, 1;
  --color-warn: 251, 192, 45, 1;
  --color-neutral: 117, 117, 117, 1;
  --color-neutral-dark: 73, 73, 73, 1;
  --color-neutral-light: 164, 164, 164, 1;
  --conference-background: 21, 21, 21, 1;
  --font-color-disabled: 96, 96, 96, 1;
  --font-color: 255, 255, 255, 1;
  --navbar-bottom-background: 42, 42, 42, 1;
  --navbar-bottom-icon-color: 255, 255, 255, 1;
  --navbar-top-background: 42, 42, 42, 1;
  --navbar-top-icon-color: 82, 191, 233, 1;
  --on-error-color: 255, 255, 255, 1;
  --on-info-color: 255, 255, 255, 1;
  --on-primary-color: 255, 255, 255, 1;
  --on-success-color: 255, 255, 255, 1;
  --on-toolbar-color: 244, 244, 244, 1;
  --on-warn-color: 255, 255, 255, 1;
  --on-neutral-color: 255, 255, 255, 1;
  --on-background-color: 255, 255, 255, 1;
  --primary-color-dark: 34, 156, 212, 1;
  --primary-color-light: 184, 235, 255, 1;
  --primary-color: 82, 191, 233, 1;
  --shadow-color: 0, 0, 0, 0.1;
  --title-font-color: 200, 200, 200, 1;
  --toolbar-color: 21, 21, 21, 1;
  --vuzix-focus-color: 255, 140, 66, 1;

  --default-radius: 12px;
}