html {
  --text-color-primary: #000000;
  --text-color-secondary: #3c3c4399;
  --text-color-tertiary: #3c3c434d;
  --text-color-quaternary: #3c3c432e;
  --text-color-inverse: #ffffff;

  --text-above-color-primary: #ffffff;
  --text-above-color-secondary: #ffffffa3;
  --text-above-color-tertiary: #ffffff70;
  --text-above-color-quaternary: #ffffff57;

  --fill-color-primary: #000000;
  --fill-color-secondary: #78788029;
  --fill-color-tertiary: #7676801f;
  --fill-color-quaternary: #74748014;
  --fill-color-inverse: #ffffff;

  --background-color-primary: #ffffff;
  --background-color-secondary: #f2f2f7;
  --background-color-tertiary: #ffffff;
  --background-color-dim: #00000066;

  --shadow-rgb: 0 0 0;
}

html.dark {
  --text-color-primary: #ffffff;
  --text-color-secondary: #ebebf599;
  --text-color-tertiary: #ebebf54d;
  --text-color-quaternary: #ebebf52e;
  --text-color-inverse: #000000;

  --text-above-color-primary: #ffffff;
  --text-above-color-secondary: #ffffffa3;
  --text-above-color-tertiary: #ffffff70;
  --text-above-color-quaternary: #ffffff57;

  --fill-color-primary: #ffffff;
  --fill-color-secondary: #78788052;
  --fill-color-tertiary: #7676803d;
  --fill-color-quaternary: #7474802e;
  --fill-color-inverse: #000000;

  --background-color-primary: #000000;
  --background-color-secondary: #18181a;
  --background-color-tertiary: #2a2a2c;
  --background-color-dim: #00000066;

  --shadow-rgb: 255 255 255;
}
