:where(.ore-button, .ore-tab-button) {
  --ore-button-unit: var(--ore-size-unit);
  --ore-button-background-default: var(--ore-color-primary-background);
  --ore-button-background-hover: var(--ore-color-primary-background-hover);
  --ore-button-background-pressed: var(--ore-color-primary-background-pressed);
  --ore-button-highlight-default: var(--ore-color-primary-highlight);
  --ore-button-highlight-hover: var(--ore-color-primary-highlight-hover);
  --ore-button-highlight-pressed: var(--ore-color-primary-highlight-pressed);
  --ore-button-background: var(--ore-button-background-default);
  --ore-button-highlight: var(--ore-button-highlight-default);
  --ore-button-border: var(--ore-color-border);
  --ore-button-shadow: var(--ore-color-primary-shadow);
  --ore-button-foreground: var(--ore-color-foreground);
  --ore-button-font-family: var(--ore-font-body);
  --ore-button-font-size: calc(var(--ore-button-unit) * 7);
  --ore-button-text-shadow: none;
  --ore-button-face-offset: 0px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  min-width: calc(var(--ore-button-unit) * 64);
  min-height: calc(var(--ore-button-unit) * 22);
  padding: 0 calc(var(--ore-button-unit) * 8) calc(var(--ore-button-unit) * 2);
  color: var(--ore-button-foreground);
  background:
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) center
      var(--ore-button-face-offset) / 100% var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) center
      bottom / 100% var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) left
      var(--ore-button-face-offset) / var(--ore-button-unit)
      calc(100% - var(--ore-button-face-offset)) no-repeat,
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) right
      var(--ore-button-face-offset) / var(--ore-button-unit)
      calc(100% - var(--ore-button-face-offset)) no-repeat,
    linear-gradient(var(--ore-button-shadow), var(--ore-button-shadow)) center
      calc(100% - var(--ore-button-unit)) /
      calc(100% - var(--ore-button-unit) * 2) calc(var(--ore-button-unit) * 2)
      no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      center calc(var(--ore-button-unit) + var(--ore-button-face-offset)) /
      calc(100% - var(--ore-button-unit) * 2) var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      center
      calc(100% - var(--ore-button-unit) * 3 + var(--ore-button-face-offset)) /
      calc(100% - var(--ore-button-unit) * 2) var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      left calc(var(--ore-button-unit) + var(--ore-button-face-offset)) /
      calc(var(--ore-button-unit) * 2)
      calc(100% - var(--ore-button-unit) * 4 - 1px) no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      right calc(var(--ore-button-unit) + var(--ore-button-face-offset)) /
      calc(var(--ore-button-unit) * 2)
      calc(100% - var(--ore-button-unit) * 4 - 1px) no-repeat,
    linear-gradient(var(--ore-button-background), var(--ore-button-background))
      center var(--ore-button-face-offset) / 100%
      calc(100% - var(--ore-button-face-offset)) no-repeat;
  font-family: var(--ore-button-font-family);
  font-size: var(--ore-button-font-size);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: var(--ore-button-text-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:where(.ore-button, .ore-tab-button)::before {
  position: absolute;
  top: var(--ore-button-face-offset);
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 var(--ore-button-unit) var(--ore-button-border);
  content: "";
  pointer-events: none;
}

:where(.ore-button) {
  position: relative;
}

:where(.ore-button > .ore-button-link) {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

:where(.ore-button > .ore-button-prefix) {
  margin-inline-end: calc(var(--ore-button-unit) * 4);
}

:where(.ore-button > .ore-button-suffix) {
  margin-inline-start: calc(var(--ore-button-unit) * 4);
}

:where(.ore-button > .ore-button-spinner) {
  position: absolute;
  z-index: 2;
  width: calc(var(--ore-button-unit) * 8);
  height: calc(var(--ore-button-unit) * 8);
  color: var(--ore-button-foreground);
}

:where(.ore-button[data-loading]) {
  color: transparent;
  text-shadow: none;
  cursor: wait;
}

:where(.ore-button[data-loading])::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ore-button-unit) * 8);
  height: calc(var(--ore-button-unit) * 8);
  background-color: var(--ore-button-foreground);
  content: "";
  mask-image: url("../../assets/icons/spinner.svg");
  mask-position: 0% 50%;
  mask-repeat: no-repeat;
  mask-size: 3475% 100%;
  animation: ore-button-spinner 800ms steps(15, jump-end) infinite;
  transform: translate(-50%, -50%);
  -webkit-mask-image: url("../../assets/icons/spinner.svg");
  -webkit-mask-position: 0% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 3475% 100%;
}

@keyframes ore-button-spinner {
  to {
    mask-position: 100% 50%;
    -webkit-mask-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ore-button[data-loading])::after {
    animation: none;
  }
}

:where(
  .ore-button[data-loading] > :not(.ore-button-spinner, .ore-button-link)
) {
  visibility: hidden;
}

:where(.ore-button[data-loading] > .ore-button-spinner) {
  color: var(--ore-button-foreground);
}

:where(.ore-button[data-variant="hero"]) {
  --ore-button-font-family: var(--ore-font-display);
  --ore-button-font-size: calc(var(--ore-button-unit) * 9);
  --ore-button-text-shadow: var(--ore-button-unit) var(--ore-button-unit)
    var(--ore-color-text-shadow);
}

:where(.ore-button[data-color="secondary"]) {
  --ore-button-background-default: var(--ore-color-secondary-background);
  --ore-button-background-hover: var(--ore-color-secondary-background-hover);
  --ore-button-background-pressed: var(
    --ore-color-secondary-background-pressed
  );
  --ore-button-highlight-default: var(--ore-color-secondary-highlight);
  --ore-button-highlight-hover: var(--ore-color-secondary-highlight-hover);
  --ore-button-highlight-pressed: var(--ore-color-secondary-highlight-pressed);
  --ore-button-shadow: var(--ore-color-secondary-shadow);
  --ore-button-foreground: var(--ore-color-border);
}

:where(.ore-button[data-color="destructive"]) {
  --ore-button-background-default: var(--ore-color-destructive-background);
  --ore-button-background-hover: var(--ore-color-destructive-background-hover);
  --ore-button-background-pressed: var(
    --ore-color-destructive-background-pressed
  );
  --ore-button-highlight-default: var(--ore-color-destructive-highlight);
  --ore-button-highlight-hover: var(--ore-color-destructive-highlight-hover);
  --ore-button-highlight-pressed: var(
    --ore-color-destructive-highlight-pressed
  );
  --ore-button-shadow: var(--ore-color-destructive-shadow);
}

:where(
  .ore-button[data-color="dungeons"],
  .ore-button[data-color="legends"],
  .ore-button[data-color="gold"],
  .ore-button[data-color="realms"]
) {
  --ore-button-background-default: var(--ore-color-dungeons-background);
  --ore-button-background-hover: var(--ore-color-dungeons-background-hover);
  --ore-button-background-pressed: var(--ore-color-dungeons-background-pressed);
  --ore-button-highlight-default: var(--ore-color-dungeons-highlight);
  --ore-button-highlight-hover: var(--ore-color-dungeons-highlight);
  --ore-button-highlight-pressed: var(--ore-color-dungeons-highlight);
  --ore-button-shadow: var(--ore-color-dungeons-shadow);
  --ore-button-foreground: var(--ore-color-gray-100);
}

:where(.ore-button[data-color="legends"]) {
  --ore-button-background-default: var(--ore-color-legends-background);
  --ore-button-background-hover: var(--ore-color-legends-background-hover);
  --ore-button-background-pressed: var(--ore-color-legends-background-pressed);
  --ore-button-highlight-default: var(--ore-color-legends-highlight);
  --ore-button-highlight-hover: var(--ore-color-legends-highlight);
  --ore-button-highlight-pressed: var(--ore-color-legends-highlight);
  --ore-button-shadow: var(--ore-color-legends-shadow);
  --ore-button-foreground: var(--ore-color-gray-100);
}

:where(.ore-button[data-color="gold"]) {
  --ore-button-background-default: var(--ore-color-gold-background);
  --ore-button-background-hover: var(--ore-color-gold-background-hover);
  --ore-button-background-pressed: var(--ore-color-gold-background-pressed);
  --ore-button-highlight-default: var(--ore-color-gold-highlight);
  --ore-button-highlight-hover: var(--ore-color-gold-highlight);
  --ore-button-highlight-pressed: var(--ore-color-gold-highlight);
  --ore-button-shadow: var(--ore-color-gold-shadow);
  --ore-button-foreground: var(--ore-color-gray-100);
}

:where(.ore-button[data-color="realms"]) {
  --ore-button-background-default: var(--ore-color-realms-background);
  --ore-button-background-hover: var(--ore-color-realms-background-hover);
  --ore-button-background-pressed: var(--ore-color-realms-background-pressed);
  --ore-button-highlight-default: var(--ore-color-realms-highlight);
  --ore-button-highlight-hover: var(--ore-color-realms-highlight);
  --ore-button-highlight-pressed: var(--ore-color-realms-highlight);
  --ore-button-shadow: var(--ore-color-realms-shadow);
  --ore-button-foreground: var(--ore-color-white);
}

@media (hover: hover) and (pointer: fine) {
  :where(.ore-button, .ore-tab-button):hover:not(
      [disabled],
      [form-disabled],
      [loading]
    ) {
    --ore-button-background: var(--ore-button-background-hover);
    --ore-button-highlight: var(--ore-button-highlight-hover);
  }
}

:where(.ore-button).preview-hover:not([disabled], [data-loading]) {
  --ore-button-background: var(--ore-button-background-hover);
  --ore-button-highlight: var(--ore-button-highlight-hover);
}

:where(
  :is(.ore-button, .ore-tab-button):active:not(
      [disabled],
      [form-disabled],
      [loading]
    ),
  :is(.ore-button, .ore-tab-button)[data-pressed]:not(
      [disabled],
      [form-disabled],
      [data-loading]
    ),
  :is(.ore-button, .ore-tab-button)[data-pressed]:not(
      [disabled],
      [form-disabled],
      [loading]
    )
) {
  --ore-button-background: var(--ore-button-background-pressed);
  --ore-button-highlight: var(--ore-button-highlight-pressed);
  --ore-button-shadow: transparent;
  --ore-button-face-offset: calc(var(--ore-button-unit) * 2);

  padding-top: var(--ore-button-face-offset);
  padding-bottom: 0;
}

:where(.ore-button).preview-pressed:not([disabled], [data-loading]) {
  --ore-button-background: var(--ore-button-background-pressed);
  --ore-button-highlight: var(--ore-button-highlight-pressed);
  --ore-button-shadow: transparent;
  --ore-button-face-offset: calc(var(--ore-button-unit) * 2);

  padding-top: var(--ore-button-face-offset);
  padding-bottom: 0;
}

:where(.ore-button, .ore-tab-button):focus-visible,
:where(.ore-button > .ore-button-link):focus-visible {
  outline: none;
}

:where(.ore-button, .ore-tab-button):focus-visible::before,
:where(.ore-button:has(> .ore-button-link:focus-visible))::before {
  box-shadow:
    0 0 0 var(--ore-button-unit) var(--ore-color-focus-ring),
    inset 0 0 0 var(--ore-button-unit) var(--ore-button-border);
}

:where(.ore-button).preview-focus::before {
  box-shadow:
    0 0 0 var(--ore-button-unit) var(--ore-color-focus-ring),
    inset 0 0 0 var(--ore-button-unit) var(--ore-button-border);
}

:where(
  .ore-button:disabled,
  .ore-button[data-disabled],
  .ore-tab-button[disabled]
) {
  --ore-button-background: var(--ore-color-disabled);
  --ore-button-highlight: var(--ore-color-disabled);
  --ore-button-border: var(--ore-color-disabled-border);
  --ore-button-shadow: var(--ore-color-secondary-background-pressed);

  color: var(--ore-color-disabled-foreground);
  --ore-button-text-shadow: none;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  :where(.ore-button[data-loading])::after {
    animation: none;
  }
}

.ore-button, .ore-checkbox, .ore-textfield {
  --ore-color-green-10: #a0e081;
  --ore-color-green-20: #86d562;
  --ore-color-green-30: #6cc349;
  --ore-color-green-40: #52a535;
  --ore-color-green-50: #3c8527;
  --ore-color-green-60: #2a641c;
  --ore-color-green-70: #1d4d13;
  --ore-color-green-80: #153a0e;
  --ore-color-green-90: #112f0b;
  --ore-color-green-100: #0f2b0a;
  --ore-color-red-10: #f46d6d;
  --ore-color-red-20: #ea5e5e;
  --ore-color-red-30: #df5050;
  --ore-color-red-40: #d54242;
  --ore-color-red-50: #ca3636;
  --ore-color-red-60: #c02d2d;
  --ore-color-red-70: #b62525;
  --ore-color-red-80: #ad1d1d;
  --ore-color-red-90: #a31616;
  --ore-color-red-100: #990f0f;
  --ore-color-blue-10: #8cb3ff;
  --ore-color-blue-20: #2e6be5;
  --ore-color-blue-30: #1452cc;
  --ore-color-yellow-10: #ffe866;
  --ore-color-yellow-20: #e5c317;
  --ore-color-yellow-30: #8a7500;
  --ore-color-orange-10: #ffb366;
  --ore-color-orange-20: #d3791f;
  --ore-color-orange-30: #a65b11;
  --ore-color-purple-10: #ac90f3;
  --ore-color-purple-20: #9471e0;
  --ore-color-purple-40: #8557f8;
  --ore-color-purple-50: #7345e5;
  --ore-color-purple-60: #5d2cc6;
  --ore-color-purple-70: #4a1cac;
  --ore-color-purple-100: #050029;
  --ore-color-legends-10: #c4f5fe;
  --ore-color-legends-20: #bdf5ff;
  --ore-color-legends-30: #acf2ff;
  --ore-color-legends-40: #70dfff;
  --ore-color-legends-50: #339bd6;
  --ore-color-gold-10: #ffe175;
  --ore-color-gold-20: #ffd953;
  --ore-color-gold-30: #ffc42b;
  --ore-color-gold-40: #db9f21;
  --ore-color-gold-50: #a47b2a;
  --ore-color-white: #ffffff;
  --ore-color-gray-10: #f4f6f9;
  --ore-color-gray-20: #e6e8eb;
  --ore-color-gray-30: #d0d1d4;
  --ore-color-gray-40: #b1b2b5;
  --ore-color-gray-50: #8c8d90;
  --ore-color-gray-60: #58585a;
  --ore-color-gray-70: #48494a;
  --ore-color-gray-80: #313233;
  --ore-color-gray-90: #242425;
  --ore-color-gray-100: #1e1e1f;
  --ore-color-black: #000000;
  --ore-color-black-opacity-10: #0000001a;
  --ore-color-black-opacity-20: #00000033;
  --ore-color-black-opacity-30: #0000004d;
  --ore-color-black-opacity-40: #00000066;
  --ore-color-black-opacity-50: #00000080;
  --ore-color-black-opacity-60: #00000099;
  --ore-color-black-opacity-70: #000000b3;
  --ore-color-black-opacity-80: #000000cc;
  --ore-color-black-opacity-90: #000000e6;
  --ore-color-white-opacity-10: #ffffff1a;
  --ore-color-white-opacity-20: #ffffff33;
  --ore-color-white-opacity-30: #ffffff4d;
  --ore-color-white-opacity-40: #ffffff66;
  --ore-color-white-opacity-50: #ffffff80;
  --ore-color-white-opacity-60: #ffffff99;
  --ore-color-white-opacity-70: #ffffffb3;
  --ore-color-white-opacity-80: #ffffffcc;
  --ore-color-white-opacity-90: #ffffffe6;
  --ore-color-dungeons-10: #ffd953;
  --ore-color-dungeons-20: #ffb64c;
  --ore-color-dungeons-30: #ffa41f;
  --ore-color-dungeons-40: #ff791a;
  --ore-color-dungeons-50: #de7523;
  --ore-color-foreground: var(--ore-color-white);
  --ore-color-border: var(--ore-color-gray-100);
  --ore-color-focus-ring: var(--ore-color-white);
  --ore-color-disabled: var(--ore-color-gray-30);
  --ore-color-disabled-shadow: var(--ore-color-gray-40);
  --ore-color-disabled-foreground: var(--ore-color-gray-70);
  --ore-color-disabled-foreground-dim: var(--ore-color-gray-50);
  --ore-color-disabled-border: var(--ore-color-gray-50);
  --ore-color-primary-background: var(--ore-color-green-50);
  --ore-color-primary-background-hover: var(--ore-color-green-40);
  --ore-color-primary-background-pressed: var(--ore-color-green-60);
  --ore-color-primary-highlight: color-mix(
    in srgb,
    var(--ore-color-primary-background),
    var(--ore-color-white) 20%
  );
  --ore-color-primary-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-primary-background-hover),
    var(--ore-color-white) 20%
  );
  --ore-color-primary-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-primary-background-pressed),
    var(--ore-color-white) 10%
  );
  --ore-color-primary-shadow: var(--ore-color-green-70);
  --ore-color-secondary-background: var(--ore-color-gray-30);
  --ore-color-secondary-background-hover: var(--ore-color-gray-10);
  --ore-color-secondary-background-pressed: var(--ore-color-gray-40);
  --ore-color-secondary-highlight: color-mix(
    in srgb,
    var(--ore-color-secondary-background),
    var(--ore-color-white) 40%
  );
  --ore-color-secondary-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-secondary-background-hover),
    var(--ore-color-white) 80%
  );
  --ore-color-secondary-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-secondary-background-pressed),
    var(--ore-color-white) 20%
  );
  --ore-color-secondary-shadow: var(--ore-color-gray-60);
  --ore-color-dungeons-background: var(--ore-color-dungeons-30);
  --ore-color-dungeons-background-hover: var(--ore-color-dungeons-20);
  --ore-color-dungeons-background-pressed: var(--ore-color-dungeons-40);
  --ore-color-dungeons-highlight: var(--ore-color-dungeons-10);
  --ore-color-dungeons-shadow: var(--ore-color-dungeons-50);
  --ore-color-legends-background: var(--ore-color-legends-30);
  --ore-color-legends-background-hover: var(--ore-color-legends-20);
  --ore-color-legends-background-pressed: var(--ore-color-legends-40);
  --ore-color-legends-highlight: var(--ore-color-legends-10);
  --ore-color-legends-shadow: var(--ore-color-legends-50);
  --ore-color-gold-background: var(--ore-color-gold-30);
  --ore-color-gold-background-hover: var(--ore-color-gold-10);
  --ore-color-gold-background-pressed: var(--ore-color-gold-40);
  --ore-color-gold-highlight: var(--ore-color-gold-20);
  --ore-color-gold-shadow: var(--ore-color-gold-50);
  --ore-color-realms-background: var(--ore-color-purple-50);
  --ore-color-realms-background-hover: var(--ore-color-purple-40);
  --ore-color-realms-background-pressed: var(--ore-color-purple-60);
  --ore-color-realms-highlight: var(--ore-color-purple-40);
  --ore-color-realms-shadow: var(--ore-color-purple-70);
  --ore-color-neutral-background: var(--ore-color-gray-70);
  --ore-color-neutral-background-hover: var(--ore-color-gray-60);
  --ore-color-neutral-background-pressed: var(--ore-color-gray-80);
  --ore-color-neutral-highlight: color-mix(
    in srgb,
    var(--ore-color-neutral-background),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-neutral-background-hover),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-neutral-background-pressed),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-shadow: var(--ore-color-gray-80);
  --ore-color-neutral-text: var(--ore-color-white);
  --ore-color-neutral-text-dim: var(--ore-color-gray-30);
  --ore-color-neutral-text-dimmer: var(--ore-color-gray-40);
  --ore-color-neutral-border: var(--ore-color-gray-100);
  --ore-color-neutral-surface: var(--ore-color-gray-70);
  --ore-color-neutral-surface-raised: var(--ore-color-gray-80);
  --ore-color-neutral-surface-sunken: var(--ore-color-gray-90);
  --ore-color-neutral-surface-deep: var(--ore-color-gray-100);
  --ore-color-neutral-specular: color-mix(
    in srgb,
    var(--ore-color-neutral-surface),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-bevel-shadow: color-mix(
    in srgb,
    var(--ore-color-neutral-surface),
    var(--ore-color-black) 30%
  );
  --ore-color-neutral-corner: #49494b;
  --ore-color-neutral-divider: color-mix(
    in srgb,
    var(--ore-color-neutral-surface),
    var(--ore-color-black) 5%
  );
  --ore-color-neutral-50-background: var(--ore-color-gray-50);
  --ore-color-neutral-50-background-hover: var(--ore-color-gray-40);
  --ore-color-neutral-50-background-pressed: var(--ore-color-gray-60);
  --ore-color-neutral-50-highlight: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background),
    var(--ore-color-white) 10%
  );
  --ore-color-neutral-50-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background-hover),
    var(--ore-color-white) 10%
  );
  --ore-color-neutral-50-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background-pressed),
    var(--ore-color-white) 10%
  );
  --ore-color-neutral-50-highlight-focus: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background),
    var(--ore-color-white) 20%
  );
  --ore-color-destructive-background: var(--ore-color-red-50);
  --ore-color-destructive-background-hover: var(--ore-color-red-30);
  --ore-color-destructive-background-pressed: var(--ore-color-red-60);
  --ore-color-destructive-highlight: color-mix(
    in srgb,
    var(--ore-color-destructive-background),
    var(--ore-color-white) 10%
  );
  --ore-color-destructive-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-destructive-background-hover),
    var(--ore-color-white) 10%
  );
  --ore-color-destructive-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-destructive-background-pressed),
    var(--ore-color-white) 10%
  );
  --ore-color-destructive-shadow: var(--ore-color-red-80);
  --ore-color-primary-tint-background: var(--ore-color-green-30);
  --ore-color-primary-tint-foreground: var(--ore-color-gray-100);
  --ore-color-success-background: var(--ore-color-green-50);
  --ore-color-success-foreground: var(--ore-color-white);
  --ore-color-success-tint-background: var(--ore-color-green-10);
  --ore-color-success-tint-foreground: var(--ore-color-gray-100);
  --ore-color-informative-background: var(--ore-color-blue-20);
  --ore-color-informative-foreground: var(--ore-color-white);
  --ore-color-informative-tint-background: var(--ore-color-blue-10);
  --ore-color-informative-tint-foreground: var(--ore-color-gray-100);
  --ore-color-notice-background: var(--ore-color-orange-20);
  --ore-color-notice-tint-background: var(--ore-color-yellow-10);
  --ore-color-notice-tint-foreground: var(--ore-color-gray-100);
  --ore-color-destructive-tint-background: var(--ore-color-red-10);
  --ore-color-destructive-tint-foreground: var(--ore-color-gray-100);
  --ore-color-realms-tint-background: var(--ore-color-purple-10);
  --ore-color-realms-informative-background: var(--ore-color-purple-100);
  --ore-color-realms-informative-tint-background: var(--ore-color-purple-10);
  --ore-color-overlay: color-mix(
    in srgb,
    var(--ore-color-black) 65%,
    transparent
  );
  --ore-color-text-shadow: var(--ore-color-black-opacity-30);
  --ore-color-nav-background: #e7e8ec;
  --ore-color-nav-shadow: #b1b2b6;
  --ore-color-nav-drop-shadow: color-mix(
    in srgb,
    var(--ore-color-gray-100) 65%,
    transparent
  );
  --ore-color-nav-action-highlight: var(--ore-color-white);
  --ore-color-nav-action-shadow: #a1a2a4;
}