body {
  --darker-mix: black;
  --lighter-mix: white;
  --base-color: #742674;
  --base-color: #1861ac;

  /*surface 1*/
  --theme-1: color-mix(in srgb, var(--theme-5), var(--lighter-mix) 97%);
  /*surface 2*/
  --theme-2: color-mix(in srgb, var(--theme-5), var(--lighter-mix) 92%);
  /*surface 3 (on 1)*/
  --theme-3: color-mix(in srgb, var(--theme-5), var(--lighter-mix) 92%);
  /* border on (1,2,3)*/
  --theme-4: color-mix(in srgb, var(--theme-5), var(--lighter-mix) 80%);
  /* primary */
  --theme-5: var(--base-color);
  /*surface secondary */
  --theme-6: #54b7fd75;
  /*on surface secondary (on 6)*/
  --theme-7: color-mix(in srgb, var(--theme-5), var(--darker-mix) 33%);
  /*2nd variant*/
  /*surface 1*/
  --theme-2-1: color-mix(in srgb, var(--theme-2-5), var(--lighter-mix) 98%);
  /*surface 2*/
  --theme-2-2: color-mix(in srgb, var(--theme-2-5), var(--lighter-mix) 90%);
  /*surface 3 (on 1)*/
  --theme-2-3: color-mix(in srgb, var(--theme-2-5), var(--lighter-mix) 90%);
  /* border on (1,2,3)*/
  --theme-2-4: color-mix(in srgb, var(--theme-2-5), var(--lighter-mix) 80%);
  /* primary */
  --theme-2-5: #267473;
  /*surface secondary */
  --theme-2-6: #54b7fd75;
  /*on surface secondary (on 6)*/
  --theme-2-7: color-mix(in srgb, var(--theme-2-2), var(--darker-mix) 33%);
}

body.exflowweb-dark-mode,
body.dark-mode {
  --darker-mix: white;
  --lighter-mix: #272727;
  --theme-6: #ffffff1c;
  --theme-5: color-mix(in srgb, var(--base-color), var(--darker-mix) 70%);
  --theme-2-5: color-mix(in srgb, var(--base-color), var(--darker-mix) 70%);
  --theme-7:white;
}