: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) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5%  20%);
  --surface4: hsl(var(--hue) 5% 25%);
  --surface-shadow: var(--hue) 50% 3%;

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

  --active: hsl(220deg 75% 70%);
  --button-active: hsl(220deg 75% 70%);
  --button-on-active: hsl(220deg 10% 8%);

  --background: var(--surface1);

  --shell-surface: hsl(var(--hue) 10% 7%);

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

  --blue: hsl(215deg 100% 75%);
  --red: hsl(0deg 100% 75%);
  --green: hsl(100deg 40% 60%);

  --button-brand: hsl(218deg 98% 75%);
  --button-surface1: hsl(218deg 15% 35%);
  --button-text1: #000;



  --background1: #1f1f20;
  --background-color: #1f1f20;

  --surface-input-color: #313235;

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

  --primary-light: #1f1f20;

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

  --on-form-chip: #000;
  --form-chip-color: #82b1ff;
  --form-surface-color: var(--elevate-1dp);

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


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

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

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

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

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