:root {
  --black: #000;

  --lg-text: #f7f7f7;
  --lg-text-disabled: #b6b6b6;
  --lg-primary: #070f13;
  --lg-primary-static: #070f13;
  --lg-panel: #030608;
  --lg-accent: #1f3642;
  --lg-logo: #354852;
  --lg-input: #0f191f;
  --lg-input-focus: #15242c;
  --lg-overlay: #2f373e44;
  --lg-border-disabled: #242424;

  --lg-contrast-light: #0b201f;
  --lg-contrast-medium: #143f3b;
  --lg-contrast: #427773;
  --lg-contrast-focus: #64a19c;

  --lg-button: #314d58;
  --lg-button-hover: #274350;
  --lg-button-active: var(--lg-accent);
  --lg-button-disabled: #535353;
  --lg-button-menu-expanded: var(--lg-contrast);
  --lg-button-menu-expanded-hover: #336662;
  --lg-button-menu-expanded-active: #295753;

  --lg-link: var(--lg-contrast-focus);
  --lg-link-visited: var(--lg-contrast-focus);
  --lg-link-error: #ffd7c4;

  --lg-text-starred: #ffbb00b4;

  --lg-success: #0b6449;
  --lg-success-hover: #06533c;
  --lg-success-active: #043d2c;
  --lg-success-panel: #0b644944;
  --lg-info: #10388d;
  --lg-info-hover: #092e7e;
  --lg-info-active: #072568;
  --lg-info-panel: #11349444;
  --lg-warn: #b63f1a;
  --lg-warn-hover: #a53614;
  --lg-warn-active: #912a0b;
  --lg-warn-panel: #2e0f06;

  --lg-hue-background: linear-gradient(
    to right,
    #00ffff 0%,
    #00ff00 17%,
    #ffff00 33%,
    #ff0000 50%,
    #ff00ff 67%,
    #0000ff 83%,
    #00ffff 100%
  );
  --lg-logo-update: #453264;
  --lg-update-05-background: linear-gradient(90deg, #453264 0%, #251642 100%);
}
:root[data-theme='supernova'] {
  --lg-primary: linear-gradient(to bottom, #110a20 0%, #06030c 100%);
  --lg-primary-static: #110a20;
  --lg-panel: #040107;
  --lg-accent: #2d1b42;
  --lg-logo: #412c5a;
  --lg-input: #1d1027;
  --lg-input-focus: #311e42;
  --lg-overlay: #2f333e44;

  --lg-contrast-light: #0b140f;
  --lg-contrast-medium: #214232;
  --lg-contrast: #2f7253;
  --lg-contrast-focus: #3c8f65;

  --lg-button: #3f2757;
  --lg-button-hover: #3b2453;
  --lg-button-active: var(--lg-accent);
  --lg-button-disabled: #3b3b3b;
  --lg-button-menu-expanded: var(--lg-contrast);
  --lg-button-menu-expanded-hover: #2f724b;
  --lg-button-menu-expanded-active: #215a39;

  --lg-link: var(--lg-contrast-focus);
  --lg-link-visited: var(--lg-contrast-focus);

  --lg-success: #0b6449;
  --lg-success-hover: #06533c;
  --lg-success-active: #043d2c;
  --lg-success-panel: #0b644944;
  --lg-info: #0b5a64;
  --lg-info-hover: #064e53;
  --lg-info-active: #04393d;
  --lg-info-panel: #0b576444;
  --lg-warn: #b61a4e;
  --lg-warn-hover: #a5144c;
  --lg-warn-active: #910b43;
  --lg-warn-panel: #2e0606;
}
:root[data-theme='voyager'] {
  --lg-primary: repeating-linear-gradient(to bottom, #0c0903, #0c0903 0.375rem, #1a1102 0.5rem);
  --lg-primary-static: #0c0903;
  --lg-panel: #070502;
  --lg-accent: #412c08;
  --lg-logo: #573a0b;
  --lg-input: #181108;
  --lg-input-focus: #2c2415;
  --lg-overlay: #3e392f44;

  --lg-contrast-light: #201900;
  --lg-contrast-medium: #493800;
  --lg-contrast: #7e6100;
  --lg-contrast-focus: #b68c00;

  --lg-button: #573d12;
  --lg-button-hover: #4e3609;
  --lg-button-active: var(--lg-accent);
  --lg-button-disabled: #313131;
  --lg-button-menu-expanded: var(--lg-contrast);
  --lg-button-menu-expanded-hover: #6d5300;
  --lg-button-menu-expanded-active: #5e4800;

  --lg-link: var(--lg-contrast-focus);
  --lg-link-visited: var(--lg-contrast-focus);

  --lg-success: #295336;
  --lg-success-hover: #1f4227;
  --lg-success-active: #18311d;
  --lg-success-panel: #22492d44;
  --lg-info: #384a64;
  --lg-info-hover: #26344e;
  --lg-info-active: #1c2636;
  --lg-info-panel: #30456144;
  --lg-warn: #a81f1f;
  --lg-warn-hover: #911111;
  --lg-warn-active: #7e0a0a;
  --lg-warn-panel: #2e0606;
}
:root[data-font='monospace'] {
  body * {
    font-family:
      Jetbrains Mono,
      monospace;
  }
}
:root[data-font='lowvision'] {
  body * {
    font-family: Atkinson Hyperlegible;
  }
}
:root[data-font='dyslexia'] {
  body * {
    font-family: 'Open-Dyslexic';
  }
}

.lg.success {
  background: var(--lg-success);
  background: var(--lg-success);
}
.lg.success:not(:disabled):hover {
  background: var(--lg-success-hover);
  background: var(--lg-success-hover);
}
.lg.success:not(:disabled):active {
  background: var(--lg-success-active);
  background: var(--lg-success-active);
}

.lg.warn {
  background: var(--lg-warn);
  background: var(--lg-warn);
}
.lg.warn:not(:disabled):hover {
  background: var(--lg-warn-hover);
  background: var(--lg-warn-hover);
}
.lg.warn:not(:disabled):active {
  background: var(--lg-warn-active);
  background: var(--lg-warn-active);
}

.lg.contrast {
  background: var(--lg-contrast);
  background: var(--lg-contrast);
}
.lg.contrast:not(:disabled):hover {
  background: var(--lg-contrast-focus);
  background: var(--lg-contrast-focus);
}
.lg.contrast:not(:disabled):active {
  background: var(--lg-contrast-medium);
  background: var(--lg-contrast-medium);
}
