:root {
  /* Core palette */
  --body-bg: #f7f7f7;            /* Default background (light) */
  --color-text: #121212;         /* Default foreground text colour */

  /* Glassy surfaces */
  --color-glass-light: rgba(255, 255, 255, 0.65); /* Translucent white */
  --color-glass-dark: rgba(0, 0, 0, 0.45);        /* Translucent dark */

  /* Input bar */
  --bar-bg: linear-gradient(
      rgba(75, 60, 127, 0.63) 0%,
      rgba(27, 56, 141, 0.42) 4%,
      rgba(17, 9, 58, 0.63) 280%,
      rgba(129, 124, 190, 0.3) 90%,
      rgba(70, 80, 92, 0.19) 95%,
      rgba(24, 24, 47, 0.22) 100%
  );
  --bar-text-fill: #e4e4e4;
  --bar-box-shadow: rgba(20, 20, 20, 0.2) 0px 5px 10px, rgba(255, 255, 255, 0.2) 0px 0px 9px inset;
  --bar-box-shadow: rgba(20, 20, 20, 0.2) 0px 5px 10px, rgba(255, 255, 255, 0.2) 0px 0px 9px inset;

  /* Accent / interactive colours */
  --link-color: #009550;
  --prompt-link-hover: #dc5f00;

  /* Tool / button states */
  --button-hover-bg: rgba(4, 152, 53, 0.1);
  --button-hover-shadow: inset 0 0 20px rgba(4, 152, 53, 0.6);

  --button-listening-bg: rgba(4, 152, 53, 0.1);
  --button-listening-shadow: inset 0 0 20px rgba(50, 208, 40, 1);

  /* Misc */
  --credit-color: var(--color-text);
}

/*
  Theme specific overrides.  Each theme only *overrides* the variables that
  need to change.  Feel free to copy-paste this block into a new CSS file and
  tweak the values to create a brand-new theme – no additional markup or JS
  changes required.
*/

body.dark-theme {
  --body-bg: #0e0f09;
  --color-text: #cccccc;

  --color-glass-light: rgba(232, 244, 24, 0.37);
  --color-glass-dark: rgba(18, 18, 18, 0.7);

  --bar-bg: linear-gradient(
      rgba(232, 244, 24, 0.37) 0%,
      rgba(186, 196, 109, 0.1) 4%,
      rgba(241, 171, 8, 0.37) 280%,
      rgba(129, 124, 190, 0.3) 90%,
      rgba(70, 80, 92, 0.19) 95%,
      rgba(24, 24, 47, 0.22) 100%
  );
  --bar-text-fill: #cccccc;
  --bar-box-shadow: rgba(20, 20, 20, 0.3) 0px 5px 10px, rgba(255, 255, 255, 0.15) 0px 0px 9px inset;
  --bar-box-shadow: 0px 5px 10px rgba(200, 200, 200, 0.1), inset 0 0 9px rgba(255, 255, 255, 0.2);

  --button-hover-bg: rgba(242, 171, 5, 0.1);
  --button-hover-shadow: inset 0 0 20px rgba(242, 171, 5, 0.6);

  --link-color: #d3b33a;
  --prompt-link-hover: #f2ab05;
  --credit-color: #cccccc;
}

body.cool-theme {
  --body-bg: radial-gradient(#cbebff 0%, #c4e2f6 25%, #b8d5ea 50%, #7cbeb3 75%, #1baab4 100%, #3f1546e0 111%);
  --color-text: #000000;

  --color-glass-light: rgba(2, 105, 181, 0.85);
  --color-glass-dark: rgba(2, 35, 181, 0.146);

  --bar-bg: linear-gradient(
      rgba(2, 105, 181, 0.85) 0%,
      rgba(27, 30, 141, 0.31) 5%,
      rgba(2, 35, 181, 0.34) 280%,
      rgba(129, 124, 190, 0.3) 90%,
      rgba(70, 80, 92, 0.19) 95%,
      rgba(24, 24, 47, 0.22) 100%
  );
  --bar-text-fill: #f7f7f7;
  --bar-box-shadow: rgba(20, 20, 20, 0.3) 0px 5px 10px, rgba(255, 255, 255, 0.15) 0px 0px 9px inset;

  --button-hover-bg: rgba(40, 128, 240, 0.1);
  --button-hover-shadow: inset 0 0 20px rgba(40, 188, 240, 0.6);

  --link-color: #f20000;
  --prompt-link-hover: #42e5ea;
  --credit-color: #ffffff;
}

body.minimal-theme {
  --body-bg: #b8c2bb;
  --color-text: #121212;

  --color-glass-light: rgba(255, 255, 255, 0.75);
  --color-glass-dark: rgba(0, 0, 0, 0.5);

  --bar-bg: linear-gradient(
      rgba(18, 18, 18, 0.7) 0%,
      rgba(49, 52, 54, 0.75) 4%,
      rgba(49, 124, 215, 0.29) 280%,
      rgba(129, 124, 190, 0.33) 90%,
      rgba(37, 53, 72, 0.62) 95%,
      rgba(24, 24, 47, 0.81) 100%
  );
  --bar-text-fill: #cccccc;

  --button-hover-bg: rgba(200, 200, 200, 0.1);
  --button-hover-shadow: inset 0 0 20px rgba(200, 200, 200, 0.6);

  --link-color: #121212;
  --prompt-link-hover: #121212;
  --credit-color: #121212;
}

body.dev-theme {
  --body-bg: #200e4b;
  --color-text: #e6e6e6;

  --color-glass-light: rgba(110, 32, 255, 0.4);
  --color-glass-dark: rgba(32, 14, 75, 0.3);

  --bar-bg: linear-gradient(
      rgba(110, 32, 255, 0.6) 0%,
      rgba(48, 17, 115, 0.65) 50%,
      rgba(32, 14, 75, 0.9) 100%
  );
  --bar-text-fill: #e26bfa;
  --bar-box-shadow: 0px 5px 10px rgba(102, 18, 150, 0.25), inset 0 0 9px rgba(255, 255, 255, 0.12);
  --bar-box-shadow: 0px 5px 10px rgba(102, 18, 150, 0.25), inset 0 0 9px rgba(255, 255, 255, 0.12);

  --button-hover-bg: rgba(226, 107, 250, 0.12);
  --button-hover-shadow: inset 0 0 20px rgba(226, 107, 250, 0.6);

  --link-color: #e26bfa;
  --prompt-link-hover: #e26bfa;
  --credit-color: #e6e6e6;
}

body.purple-theme {
  /* Alias for dev-theme for now */
  --body-bg: #200e4b;
  --color-text: #e6e6e6;
  --color-glass-light: rgba(110, 32, 255, 0.4);
  --color-glass-dark: rgba(32, 14, 75, 0.4);
  --bar-bg: linear-gradient(
      rgba(110, 32, 255, 0.6) 0%,
      rgba(48, 17, 115, 0.65) 50%,
      rgba(32, 14, 75, 0.9) 100%
  );
  --bar-text-fill: #e26bfa;
  --button-hover-bg: rgba(226, 107, 250, 0.12);
  --button-hover-shadow: inset 0 0 20px rgba(226, 107, 250, 0.6);
  --link-color: #e26bfa;
  --prompt-link-hover: #e26bfa;
  --credit-color: #e6e6e6;
}

body.light-theme {
  --body-bg: #debee0;
  --color-text: #121212;

  --color-glass-light: rgba(255, 255, 255, 0.75);
  --color-glass-dark: rgba(0, 0, 0, 0.25);

  --bar-bg: linear-gradient(
      rgba(75, 60, 127, 0.63) 0%,
      rgba(27, 56, 141, 0.42) 4%,
      rgba(17, 9, 58, 0.63) 280%,
      rgba(129, 124, 190, 0.3) 90%,
      rgba(70, 80, 92, 0.19) 95%,
      rgba(24, 24, 47, 0.22) 100%
  );
  --bar-text-fill: #e4e4e4;

  --button-hover-bg: rgba(4, 152, 53, 0.1);
  --button-hover-shadow: inset 0 0 20px rgba(4, 152, 53, 0.6);

  --link-color: #009550;
  --prompt-link-hover: #009550;
  --credit-color: #121212;
}

body.sunset-theme {
  --body-bg: linear-gradient(to bottom, #63c1ff 0%, #cbc5ff 25%, #c6b2da 50%, #817cbe 75%, #46505c 90%, #47474c 100%);
  --color-text: #ffffff;

  --color-glass-light: rgba(255, 208, 125, 0.25);
  --color-glass-dark: rgba(236, 67, 219, 0.25);

  --bar-bg: linear-gradient(
      rgba(255, 195, 91, 0.45) 0%,
      rgba(250, 101, 78, 0.35) 40%,
      rgba(129, 59, 190, 0.3) 80%
  );
  --bar-text-fill: #ffffff;
  --bar-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  --button-hover-bg: rgba(255, 140, 0, 0.15);
  --button-hover-shadow: inset 0 0 20px rgba(255, 140, 0, 0.6);

  --link-color: #ffb942;
  --prompt-link-hover: #ffb942;
  --credit-color: #ffffff;
}