:root {
  color-scheme: dark;

  --brand: hsl(var(--hue) calc(var(--saturation) / 2) calc(var(--lightness) / 1.5));

  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 5% 65%);

  --surface1: hsl(var(--hue) 40% 8%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5%  20%);
  --surface4: hsl(var(--hue) 5% 25%);

  --surface-shadow: var(--hue) 50% 3%;
  --surface-inactive:

  --disabled: var(--opacity1);
  --active: hsl(220deg 75% 70%);
  --hover: var(--surface3);

  --opacity1: 0.3;
  --opacity2: 0.5;
  --opacity3: 0.7;

  --brightness: 100%;

  --font-weight1: 300;
  --font-weight2: 400;
  --font-weight3: 500;
  --font-weight4: 700;

  --shadow-color: 220 40% 2%;
  --shadow-strength: 25%;

  --button: hsl(220 50% 60%);
  --button-hover: hsl(220 50% 65%);
  --button-active: hsl(220 75% 70%);
  --button-on-active: hsl(220deg 10% 8%);
  --button-text: hsl(220 10% 85%);
  --button-border: hsl(220 20% 70%);
  --on-button: hsl(220 90% 5%);


  --background: hsl(var(--hue) 41% 8%);
  --on-background: #cecfc9;

  --highlight-oncall: hsl(210deg 45% 60%);
  --highlight-oncall-text: hsl(210deg 10% 10%);

  --inactive-text: hsl(208deg 15% 30%);
  --inactive-surface: hsl(240deg 20% 3%);

  --blocked-surface: hsl(204deg 15% 14%);

  --heading-color: #4d86b3;
  --text-color: #9cb6c9;
  --highlight-blue: #111e27;
  --on-highlight-blue:#ff8f00;

  --toolbar-surface: var(--surface1);
  --toolbar-shadow-color: var(--surface1);
  --highlight-selected-color: #4d86b3;

  --shell-surface: #1f1f20;
  --elevated-shell-surface: #2a2a2a;
  --shell-border-color: #203a4e;

  --color-school: hsl(55deg 10% 21%);
  --color-hintergrund: hsl(150deg 21% 22%);

  --surface-input-color: #313235;

  --surface-color-chip: #434343;
  --surface-color-chip--hover: #333333;
  --surface-color-chip--active: #292929;

  --primary-light: #1f1f20;

  --on-face-color: #82b0fe;
  --on-table-surface: #dcdcdc;
  --on-tag-surface: #121212;

  --user-surface-color: #82b1ff;
  --on-user-surface: #000;

  --on-form-chip: #000;
  --form-chip-color: #82b1ff;
  --on-form-surface: #7d9db5;
  --on-form-surface-hd: #4d86b3;
  --form-surface-color: #000c14;

  --table-surface-color: #313235;
  --table-shadow: #080808 0px 5px 80px;
  --tag-surface-color: #82b1ff;
  --tag-shadow: 1px 1px 2px #212121;


  --card-background: #000c14;
  --card-color: #eaeaea;
  --card-primary: #2196F3;
  --card-primary-icon: transparent;
  --card-important-background: #1b1b1b;
  --card-accent: #323233;
  --card-unselected-button: #2b2b2c;


  --shadowColor: #545454 0px 5px 45px;

  --image-filter: grayscale(50%);
}