:root {
  color-scheme: light;

  --brand: hsl(var(--hue) var(--saturation) var(--lightness));

  --text1: hsl(var(--hue) var(--saturation) 10%);
  --text2: hsl(var(--hue) 30% 30%);

  --surface1: hsl(var(--hue) 25% 90%);
  --surface2: hsl(var(--hue) 20% 99%);
  --surface3: hsl(var(--hue) 20% 92%);
  --surface4: hsl(var(--hue) 20% 85%);

  --surface-shadow: var(--hue) 10% 20%;

  --disabled: var(--opacity1);
  --active: var(--blue-6);
  --hover: hsl(0deg 0% 0% / 12%);

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

  --brightness: 0%;

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

  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;

  --button: var(--blue-5);
  --button-hover: var(--blue-4);
  --button-active: var(--blue-5);
  --button-on-active: hsl(220deg 10% 8%);
  --button-text: hsl(220 10% 85%);
  --button-border: var(--blue-4);
  --on-button: var(--surface2);

  --background: hsl(var(--hue) 30% 90%);
  --on-background: #202124;

  --highlight-oncall: hsl(230deg 60% 65%);
  --highlight-oncall-text: hsl(0deg 9% 98%);

  --inactive-text: hsl(208deg 25% 75%);
  --inactive-surface: hsl(240deg 20% 99%);

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

  --heading-color: #127aca;
  --text-color: #416581;
  --highlight-blue: hsl(var(--hue) 45% 95%);
  --on-highlight-blue:#1d2225;

  --toolbar-surface: var(--surface2);
  --toolbar-shadow-color: #20212447;
  --highlight-selected-color: #2196f3;

  --shell-surface: #fff;
  --elevated-shell-surface: #fff;
  --shell-border-color: rgb(32 58 78 / 20%);

  --color-school: hsl(55deg 61% 93%);
  --color-hintergrund: hsl(150deg 27% 87%);


  --surface-input-color: #dcecfa;

  --surface-color-chip: #f7f7f7;
  --surface-color-chip--hover: #e8e8e8;
  --surface-color-chip--active: #cccccc;

  --primary-light: #212121;

  --on-face-color: #2196f3;
  --on-table-surface: #000;
  --on-surface: #000;

  --user-surface-color: #4d86b3;
  --on-user-surface: #fff;

  --on-form-chip: #fff;
  --form-chip-color: #2196f3;
  --on-form-surface: #000;
  --on-form-surface-hd: #0f66a9;
  --form-surface-color: #fff;

  --table-surface-color: #fff;
  --table-shadow: #080808 0px 0px 0px;
  --tag-surface-color: #2196f324;;
  --tag-shadow: #d2d2d2 1px 1px 2px;

  --card-background: #fff;
  --card-color: #000;
  --card-primary: #173b58;
  --card-primary-icon: #173b58;
  --card-important-background: #1a253d;
  --card-accent: #f2f9ff;
  --card-unselected-button: #313641;


  --shadowColor: rgba(0, 0, 0, 0.05) 1px 1px 15px;
}