:root {
  color-scheme: light;

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

  --background1: var(--gray-0);
  --background2: var(--surface2);

  --text1: var(--gray-9);
  --text2: var(--gray-8);

  --surface1: var(--gray-2);
  --surface2: #fff;
  --surface3: var(--gray-1);
  --surface4: var(--gray-3);

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

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

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

  --panel-header-surface: hsl(220deg 50% 93%);
  --panel-header-text: var(--active);

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

  --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: #2196f3;

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