: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%;

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

  --active: var(--blue-6);
  --buton-active: var(--blue-6);
  --button-on-active: hsl(220deg 10% 8%);

  --background: hsl(var(--hue) 25% 93%);

  --shell-surface: hsl(205deg 15% 10%);

  --toggle-surface: hsl(var(--hue) 15% 20%);
  --switch-surface: hsl(var(--hue) 15% 15%);

  --blue: hsl(205deg 100% 40%);
  --red: hsl(0deg 100% 40%);
  --green: hsl(100deg 70% 35%);

  --button-brand: hsl(207deg 90% 54%);
  --button-surface1: hsl(218deg 100% 80%);
  --button-text1: #fff;



  --card-icon-background: hsl(205deg 25% 30%);
  --card-icon-color: hsl(205deg 5% 95%);


  --background1: #edf0f2;
  --background-color: #edf0f2;

  --surface-input-color: #dcecfa;

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

  --primary-light: #212121;

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

  --on-form-chip: #fff;
  --form-chip-color: #2196f3;
  --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;

  --elevate-1dp: rgba(0, 0, 0, 0.05);
  --elevate-8dp: rgba(0, 0, 0, 0.12);

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

  --select-arrow: url(/img/arrow_down_black.png);
}