:root {
  color-scheme: dark;

  --theme: hsl(210deg 6% 13%);
  --theme-text: var(--gray-6);
  --theme-hover-surface: var(--gray-9);
  --theme-hover-text: var(--gray-4);

  --background1: hsl(210deg 10% 10%);
  --background2: hsl(220deg 10% 8%);

  --text1: var(--gray-4);
  --text2: var(--gray-6);
  --OLDtext1: hsl(var(--hue) 15% 85%);
  --OLDtext2: hsl(var(--hue) 5% 65%);
  --text3: hsl(var(--hue) 10% 30%);

  --surface1: hsl(210deg 10% 10%);
  --surface2: hsl(210deg 10% 15%);
  --surface3: hsl(210deg 5% 20%);
  --surface4: hsl(210deg 5% 25%);

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

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

  --brightness: 100%;

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

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

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

  --panel-header-surface: hsl(220deg 20% 15%);
  --panel-header-text: var(--active);

  --tab-surface: var(--surface2);

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

  --on-face-color: #82b0fe;

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

  --OLDsurface-shadow: var(--hue) 50% 3%;
  --OLDshadow-strength: .8;
  --OLDshadowColor: hsl(0deg 0% 33%) 0px 5px 45px;
}