@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600&family=Cinzel:wght@500;700&display=swap");

:root {
  --bg-deep: rgb(7, 9, 15);
  --bg-deep-alt: rgb(7, 9, 15);
  --bg-deep-trd: rgb(7, 9, 15);
  --bg-mid: rgb(14, 20, 32);
  --bg-mid-alt: rgb(14, 20, 32);
  --bg-mid-trd: rgb(14, 20, 32);
  --bg-warm: rgb(21, 27, 39);
  --glass: rgba(11, 16, 24, 0.7);
  --glass-strong: rgba(8, 12, 20, 0.86);
  --text: rgb(242, 238, 229);
  --text-alt: rgb(242, 238, 229);
  --text-trd: rgb(242, 238, 229);
  --text-inverse: rgb(242, 238, 229);
  --text-notification: rgb(242, 238, 229);
  --muted: rgb(168, 178, 196);
  --accent-left: rgb(57, 176, 255);
  --accent-right: rgb(255, 184, 92);
  --accent: var(--accent-left);
  --accent-alt: var(--accent-right);
  --accent-trd: var(--accent-left);
  --accent-glow: rgba(57, 176, 255, 0.32);
  --accent-left-glow: rgba(57, 176, 255, 0.12);
  --accent-right-glow: rgba(255, 184, 92, 0.12);
  --accent-left-fade: rgba(57, 176, 255, 0);
  --accent-right-fade: rgba(255, 184, 92, 0);
  --accent-soft: rgba(57, 176, 255, 0.22);
  --accent-strong: rgba(57, 176, 255, 0.5);
  --accent-right-soft: rgba(255, 184, 92, 0.25);
  --accent-right-strong: rgba(255, 184, 92, 0.4);
  --accent-left-35: rgba(57, 176, 255, 0.35);
  --accent-right-35: rgba(255, 184, 92, 0.35);
  --panel-soft: rgba(12, 18, 28, 0.55);
  --panel-strong: rgba(12, 18, 28, 0.7);
  --panel-card: rgba(6, 10, 18, 0.5);
  --panel-card-muted: rgba(9, 13, 22, 0.35);
  --panel-card-weak: rgba(7, 11, 18, 0.2);
  --panel-card-ghost: rgba(7, 11, 18, 0.12);
  --panel-card-strong: rgba(12, 18, 28, 0.8);
  --panel-shell-1: rgba(7, 12, 20, 0.4);
  --panel-shell-2: rgba(12, 18, 30, 0.25);
  --panel-alt: rgb(12, 18, 28);
  --border-weak: rgba(255, 255, 255, 0.06);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-stronger: rgba(255, 255, 255, 0.18);
  --border-bright: rgba(255, 255, 255, 0.2);
  --border-mid: rgba(255, 255, 255, 0.12);
  --border-faint: rgba(255, 255, 255, 0.05);
  --border-fainter: rgba(255, 255, 255, 0.04);
  --border-faintest: rgba(255, 255, 255, 0.03);
  --border-ultra-faint: rgba(255, 255, 255, 0.02);
  --border-alt: rgb(255, 255, 255);
  --border-trd: rgb(255, 255, 255);
  --neutral-alpha-0: rgba(255, 255, 255, 0);
  --neutral-alpha-55: rgba(255, 255, 255, 0.55);
  --neutral-alpha-70: rgba(255, 255, 255, 0.7);
  --neutral-alpha-75: rgba(255, 255, 255, 0.75);
  --ink-alpha-0: rgba(0, 0, 0, 0);
  --ink-alpha-15: rgba(0, 0, 0, 0.15);
  --ink-alpha-20: rgba(0, 0, 0, 0.2);
  --ink-alpha-24: rgba(0, 0, 0, 0.24);
  --ink-alpha-28: rgba(0, 0, 0, 0.28);
  --ink-alpha-30: rgba(0, 0, 0, 0.3);
  --ink-alpha-35: rgba(0, 0, 0, 0.35);
  --ink-alpha-40: rgba(0, 0, 0, 0.4);
  --ink-alpha-45: rgba(0, 0, 0, 0.45);
  --ink-alpha-50: rgba(0, 0, 0, 0.5);
  --ink-alpha-55: rgba(0, 0, 0, 0.55);
  --ink-alpha-65: rgba(0, 0, 0, 0.65);
  --ink-alpha-75: rgba(0, 0, 0, 0.75);
  --ink-alpha-95: rgba(0, 0, 0, 0.95);
  --ink-alpha-100: rgba(0, 0, 0, 1);
  --overlay-glass-20: rgba(8, 12, 20, 0.2);
  --overlay-glass-28: rgba(8, 12, 20, 0.28);
  --overlay-glass-35: rgba(8, 12, 20, 0.35);
  --overlay-glass-38: rgba(8, 12, 20, 0.38);
  --overlay-glass-40: rgba(8, 12, 20, 0.4);
  --overlay-glass-45: rgba(8, 12, 20, 0.45);
  --overlay-glass-50: rgba(8, 12, 20, 0.5);
  --overlay-glass-55: rgba(8, 12, 20, 0.55);
  --overlay-glass-70: rgba(8, 12, 20, 0.7);
  --overlay-glass-75: rgba(8, 12, 20, 0.75);
  --overlay-glass-78: rgba(8, 12, 20, 0.78);
  --overlay-glass-85: rgba(8, 12, 20, 0.85);
  --overlay-glass-95: rgba(8, 12, 20, 0.95);
  --overlay-mid-45: rgba(14, 20, 32, 0.45);
  --overlay-mid-50: rgba(14, 20, 32, 0.5);
  --overlay-mid-55: rgba(14, 20, 32, 0.55);
  --overlay-panel-35: rgba(12, 18, 28, 0.35);
  --overlay-panel-45: rgba(12, 18, 28, 0.45);
  --overlay-panel-55: rgba(12, 18, 28, 0.55);
  --overlay-panel-85: rgba(12, 18, 28, 0.85);
  --overlay-panel-90: rgba(12, 18, 28, 0.9);
  --overlay-panel-dark-12: rgba(6, 10, 18, 0.12);
  --overlay-panel-dark-20: rgba(6, 10, 18, 0.2);
  --overlay-panel-dark-35: rgba(6, 10, 18, 0.35);
  --overlay-panel-dark-45: rgba(6, 10, 18, 0.45);
  --overlay-panel-dark-60: rgba(6, 10, 18, 0.6);
  --overlay-panel-dark-65: rgba(6, 10, 18, 0.65);
  --shadow-elev-1: 0 18px 40px var(--ink-alpha-45);
  --shadow-elev-2: 0 22px 48px var(--ink-alpha-55);
  --shadow-elev-3: 0 18px 36px var(--ink-alpha-45);
  --shadow-elev-4: 0 24px 52px var(--ink-alpha-55);
  --shadow-elev-5: 0 14px 32px var(--ink-alpha-35);
  --shadow-elev-6: 0 16px 28px var(--ink-alpha-40);
  --shadow-elev-7: 0 10px 18px var(--ink-alpha-28);
  --shadow-elev-8: 0 8px 16px var(--ink-alpha-24);
  --shadow-elev-9: 0 6px 12px var(--ink-alpha-35);
  --shadow-elev-10: 0 0 8px var(--ink-alpha-30);
  --shadow-elev-11: 0 0 10px var(--ink-alpha-35);
  --shadow-elev-12: 0 12px 28px var(--ink-alpha-35);
  --shadow-elev-13: 0 22px 52px var(--ink-alpha-50);
  --sync-ok: #35c97a;
  --sync-warn: #f3c74c;
  --sync-issue: #f08a2b;
  --sync-critical: #e35050;
  --rarity-uncommon: #8e96a3;
  --rarity-rare: #f1c84c;
  --rarity-legendary: #f08a2b;
  --rarity-contraband: #8a52d8;
  --rarity-united: #e35050;
  --rarity-fallen: #3aa4ff;
  --ui-scale: 1;
  --ui-scale-inverse: 1;
  --top-bar-height-base: 86px;
  --top-bar-height: calc(var(--top-bar-height-base) * var(--ui-scale));
  --sidebar-width-base: 250px;
  --sidebar-width: calc(var(--sidebar-width-base) * var(--ui-scale));
  --sidebar-collapsed-base: 64px;
  --sidebar-collapsed: calc(var(--sidebar-collapsed-base) * var(--ui-scale));
  --window-spawn-sidebar-margin-base: 18px;
  --window-spawn-sidebar-margin: calc(var(--window-spawn-sidebar-margin-base) * var(--ui-scale));
  --window-spawn-top-margin-base: 16px;
  --window-spawn-top-margin: calc(var(--window-spawn-top-margin-base) * var(--ui-scale));
  --window-viewport-gutter-base: 16px;
  --window-viewport-gutter: calc(var(--window-viewport-gutter-base) * var(--ui-scale));
  --ui-hit-target-base: 44px;
  --ui-hit-target: calc(var(--ui-hit-target-base) * var(--ui-scale));
  --ui-icon-size-base: 18px;
  --ui-icon-size: calc(var(--ui-icon-size-base) * var(--ui-scale));
  --ui-icon-size-sm-base: 14px;
  --ui-icon-size-sm: calc(var(--ui-icon-size-sm-base) * var(--ui-scale));
  --ui-space-1-base: 4px;
  --ui-space-1: calc(var(--ui-space-1-base) * var(--ui-scale));
  --ui-space-2-base: 8px;
  --ui-space-2: calc(var(--ui-space-2-base) * var(--ui-scale));
  --ui-space-3-base: 12px;
  --ui-space-3: calc(var(--ui-space-3-base) * var(--ui-scale));
  --ui-space-4-base: 16px;
  --ui-space-4: calc(var(--ui-space-4-base) * var(--ui-scale));
  --flag-url: none;
  --font-heading: "Cinzel", "Times New Roman", serif;
  --font-body: "Chakra Petch", "Trebuchet MS", sans-serif;
}