/* Interface themes (#64): the in-game UI themes, chosen by app/web/theme.js on <html data-theme>.
   Without data-theme (the "console" theme) pages keep the Orokin console tokens of style.css.

   Each theme sets the page and raised-surface colours, text, its accent (the console's gold) and second accent
   (the console's teal); the surfaces in between are mixed from them below. Status colours (ok, warn, danger) and
   relic refinements keep their meaning in every theme. The companion overlay draws the same palettes
   (wfcli/apps/wfcompanion/src/overlay/palette.rs): change both together. */

:root[data-theme] {
  --lapis-900: color-mix(in srgb, var(--lapis-950), var(--lapis-700) 20%);
  --lapis-800: color-mix(in srgb, var(--lapis-950), var(--lapis-700) 55%);
  --surface-1: color-mix(in srgb, var(--lapis-950), var(--lapis-700) 25%);
  --surface-2: color-mix(in srgb, var(--lapis-950), var(--lapis-700) 55%);
  --surface-3: color-mix(in srgb, var(--lapis-700), var(--ivory) 4%);
  --line: color-mix(in srgb, var(--lapis-700), var(--ivory) 10%);
  --line-hover: color-mix(in srgb, var(--lapis-700), var(--ivory) 24%);
  --chart-sell: color-mix(in srgb, var(--gold), black 12%);
  --chart-buy: color-mix(in srgb, var(--void), black 18%);
}

:root[data-theme="lotus"] { --lapis-950: #0a1622; --lapis-700: #1d3a52; --ivory: #e8f4fb; --muted: #9db4c4; --gold: #8fd8f2; --gold-hi: #d2f1fc; --void: #f0c75e; }
:root[data-theme="legacy"] { --lapis-950: #141618; --lapis-700: #3a3f45; --ivory: #f1f1ef; --muted: #a9adb2; --gold: #c9d3dc; --gold-hi: #ffffff; --void: #79b7e0; }
:root[data-theme="baruuk"] { --lapis-950: #1a120c; --lapis-700: #4a3426; --ivory: #f3e6d3; --muted: #bba791; --gold: #e2a35b; --gold-hi: #f6d3a1; --void: #d86d4b; }
:root[data-theme="conquera"] { --lapis-950: #120f1c; --lapis-700: #352c52; --ivory: #f4f0fa; --muted: #b2a9c6; --gold: #f5a742; --gold-hi: #ffd88f; --void: #6fa8ff; }
:root[data-theme="contrast"] { --lapis-950: #000000; --lapis-700: #2a2a2a; --ivory: #ffffff; --muted: #d0d0d0; --gold: #ffe14d; --gold-hi: #fff3a6; --void: #4dd9ff; }
:root[data-theme="corpus"] { --lapis-950: #08131f; --lapis-700: #173a55; --ivory: #e7f3fb; --muted: #93adc0; --gold: #f2c14e; --gold-hi: #ffe39a; --void: #3fc4ef; }
:root[data-theme="dark-lotus"] { --lapis-950: #0f0a14; --lapis-700: #2f1f3b; --ivory: #f2e9f4; --muted: #ad9eb5; --gold: #e04a6a; --gold-hi: #f7a3b6; --void: #a979e6; }
:root[data-theme="deadlock"] { --lapis-950: #0d1312; --lapis-700: #24403b; --ivory: #e3f1e8; --muted: #98b1a6; --gold: #a7e05a; --gold-hi: #d6f5a8; --void: #e0605a; }
:root[data-theme="drippy"] { --lapis-950: #170d18; --lapis-700: #43213f; --ivory: #fbeaf6; --muted: #c4a4bd; --gold: #ff5fae; --gold-hi: #ffb3d9; --void: #c8f04e; }
:root[data-theme="equinox"] { --lapis-950: #140d1e; --lapis-700: #3c2756; --ivory: #f6ecfb; --muted: #b9a6c8; --gold: #c48ef0; --gold-hi: #e8cdfc; --void: #f08ac0; }
:root[data-theme="fortuna"] { --lapis-950: #0a0f26; --lapis-700: #22306a; --ivory: #e9eeff; --muted: #9ba7d0; --gold: #5b8bf0; --gold-hi: #b3cbff; --void: #ff73e6; }
:root[data-theme="grineer"] { --lapis-950: #15130d; --lapis-700: #3e3a26; --ivory: #ece7d4; --muted: #b1aa8f; --gold: #e8894a; --gold-hi: #f6c18e; --void: #c9b458; }
:root[data-theme="lunar-renewal"] { --lapis-950: #1c0a0a; --lapis-700: #4f1a17; --ivory: #fbeedd; --muted: #c9a998; --gold: #f2c14e; --gold-hi: #ffe3a0; --void: #e8513f; }
:root[data-theme="nidus"] { --lapis-950: #140f0c; --lapis-700: #3b2b22; --ivory: #f1ead9; --muted: #b4a68e; --gold: #e8d44e; --gold-hi: #f6ea9e; --void: #b48ef0; }
:root[data-theme="orokin"] { --lapis-950: #16130d; --lapis-700: #45392a; --ivory: #fbf6e9; --muted: #c4b9a0; --gold: #e8c46a; --gold-hi: #fbe7ae; --void: #9fd8e0; }
:root[data-theme="pom-2"] { --lapis-950: #120c22; --lapis-700: #2e2457; --ivory: #f2edff; --muted: #aaa3c8; --gold: #ff71ce; --gold-hi: #ffb8e6; --void: #01cdfe; }
:root[data-theme="stalker"] { --lapis-950: #0e0b0b; --lapis-700: #3a2222; --ivory: #f2e6e2; --muted: #b39e9a; --gold: #e33a3a; --gold-hi: #f59a8f; --void: #d0a35a; }
:root[data-theme="tenno"] { --lapis-950: #0f1214; --lapis-700: #2f373d; --ivory: #f4f6f6; --muted: #a6b0b5; --gold: #e7edf0; --gold-hi: #ffffff; --void: #5ed0d6; }
:root[data-theme="vitruvian"] { --lapis-950: #1a0d0f; --lapis-700: #4b2228; --ivory: #f5e5df; --muted: #c3a39d; --gold: #e0605a; --gold-hi: #f6aca6; --void: #e8bc4e; }
:root[data-theme="zephyr-harrier"] { --lapis-950: #0b1420; --lapis-700: #24425e; --ivory: #eef6fc; --muted: #9fb5c6; --gold: #8fd3f4; --gold-hi: #d3effc; --void: #f2c14e; }

/* Browsers without view transitions fade the colours instead (theme.js) */
:root.theme-fade, :root.theme-fade *, :root.theme-fade *::before, :root.theme-fade *::after {
  transition: color 400ms var(--ease), background-color 400ms var(--ease), border-color 400ms var(--ease), fill 400ms var(--ease), stroke 400ms var(--ease) !important;
}