diff --git a/src/app.scss b/src/app.scss
new file mode 100644
index 00000000..9443f42e
--- /dev/null
+++ b/src/app.scss
@@ -0,0 +1,60 @@
+// Import themes
+@use 'themes/themes';
+@use 'themes/spacing';
+
+html {
+	background-color: var(--background);
+	font-size: 62.5%;
+	// height: 100%;
+}
+
+body {
+	-webkit-font-smoothing: antialiased;
+	box-sizing: border-box;
+	font-family: var(--font-family);
+	font-size: 1.4rem;
+	height: 100%;
+	padding: spacing.$unit-2x !important;
+
+	&.no-scroll {
+		overflow: hidden;
+	}
+}
+
+main {
+	max-width: 820px;
+	margin: 0 auto;
+	padding: 0 spacing.$unit-2x;
+	width: 100%;
+
+	// Responsive padding for smaller screens
+	@media (max-width: 768px) {
+		padding: 0 spacing.$unit;
+	}
+}
+
+// Utility classes for different container widths
+.content--wide {
+	max-width: 1200px;
+}
+
+.content--narrow {
+	max-width: 600px;
+}
+
+.content--full {
+	max-width: none;
+	padding: 0;
+}
+
+// Global variables
+$primary-color: #007bff;
+$font-size-base: 16px;
+
+// Global mixins
+@mixin button-reset {
+	border: none;
+	background: none;
+	padding: 0;
+	cursor: pointer;
+}
diff --git a/src/themes/_colors.scss b/src/themes/_colors.scss
new file mode 100644
index 00000000..2644b0f0
--- /dev/null
+++ b/src/themes/_colors.scss
@@ -0,0 +1,618 @@
+@use 'sass:color';
+
+// Colors
+$grey-00: #000;
+$grey-05: #0a0a0a;
+$grey-10: #111;
+$grey-15: #191919;
+$grey-20: #212121;
+$grey-25: #232323;
+$grey-30: #2f2f2f;
+$grey-40: #444;
+$grey-45: #515151;
+$grey-50: #777;
+$grey-55: #888;
+$grey-60: #a9a9a9;
+$grey-70: #c6c6c6;
+$grey-75: #dcdcdc;
+$grey-80: #e9e9e9;
+$grey-85: #efefef;
+$grey-90: #f5f5f5;
+$grey-95: #fafafa;
+$grey-100: white;
+
+// Purple -- Additional Weapons
+$purple-00: #25224e;
+$purple-05: #373278;
+$purple-10: #4f3c79;
+$purple-20: #635fb7;
+$purple-30: #8c86ff;
+$purple-40: #a49ffe;
+$purple-50: #b6b2fc;
+$purple-80: #d5d3f6;
+$purple-90: #ecebff;
+
+// Orange -- Subaura Summons
+$orange-00: #201710;
+$orange-10: #6b401b;
+$orange-30: #825b39;
+$orange-35: #885243;
+$orange-40: #925a2a;
+$orange-50: #a8703f;
+$orange-70: #d08f57;
+$orange-75: #ffb461;
+$orange-80: #facea7;
+$orange-90: #ffebd9;
+
+// Yellow -- Highlights
+$yellow-10: #4d3703;
+$yellow-30: #956d11;
+$yellow-50: #c8a657;
+$yellow-70: #fedc8d;
+$yellow-90: #ffed4c;
+
+// Colors -- Interface
+$blue: #275dc5;
+$red: #ff6161;
+$yellow: #c89d39;
+$error: #d13a3a;
+
+$save-red: #ff4d4d;
+
+$accent--blue--light: #275dc5;
+$accent--blue--light--focus: #0c398d;
+$accent--blue--dark: #6195f4;
+$accent--blue--dark--focus: #275dc5;
+
+$accent--yellow--light: #c89d39;
+$accent--yellow--dark: #f9cc64;
+$yellow-text-10: #a39200;
+$yellow-text-20: #ffed4c;
+$highlight-yellow: #ffed4c55;
+
+$accent--yellow--00: #463805;
+$accent--yellow--10: #6c5a01;
+$accent--yellow--20: #776300;
+$accent--yellow--40: #a39200;
+$accent--yellow--60: #c89d39;
+$accent--yellow--70: #d1aa4f;
+$accent--yellow--80: #deb351;
+$accent--yellow--90: #e6bd5e;
+$accent--yellow--100: #f9cc64;
+
+$selected--item--bg--dark: #f9cc645d;
+$selected--item--bg--dark--hover: #fcc33f81;
+$selected--item--bg--light: #f9cc645d;
+$selected--item--bg--light--hover: #ecbc4c6f;
+
+// Colors -- Elements
+$wind-text-00: #023e28;
+$wind-text-10: #00492f;
+$wind-text-20: #006a45;
+$wind-text-30: #1dc688;
+$wind-bg-00: #30c372;
+$wind-bg-10: #3ee489;
+$wind-bg-20: #cdffed;
+
+$fire-text-00: #3f0202;
+$fire-text-10: #3e0000;
+$fire-text-20: #700101;
+$fire-text-30: #ec5c5c;
+$fire-bg-00: #e05555;
+$fire-bg-10: #fa6d6d;
+$fire-bg-20: #ffcdcd;
+
+$water-text-00: #03263b;
+$water-text-10: #004b77;
+$water-text-20: #00639c;
+$water-text-30: #5cb7ec;
+$water-bg-00: #4aabe3;
+$water-bg-10: #6cc9ff;
+$water-bg-20: #cdedff;
+
+$earth-text-00: #321602;
+$earth-text-10: #662a00;
+$earth-text-20: #913d01;
+$earth-text-30: #ec985c;
+$earth-bg-00: #df8849;
+$earth-bg-10: #fd9f5b;
+$earth-bg-20: #ffe2cd;
+
+$light-text-00: #3d3700;
+$light-text-10: #4b4300;
+$light-text-20: #706500;
+$light-text-30: #c5b20c;
+$light-bg-00: #cab91c;
+$light-bg-10: #e8d633;
+$light-bg-20: #fffacd;
+
+$dark-text-00: #23002f;
+$dark-text-10: #3e0054;
+$dark-text-20: #5b017b;
+$dark-text-30: #c65cec;
+$dark-bg-00: #ba63d8;
+$dark-bg-10: #de7bff;
+$dark-bg-20: #f2cdff;
+
+$transparent--stroke--light: rgba(0, 0, 0, 0.9);
+$transparent--stroke--dark: rgba(255, 255, 255, 0.35);
+
+$page--bg--light: $grey-90;
+$page--bg--dark: $grey-15;
+
+$page--hover--light: $grey-90;
+$page--hover--dark: $grey-30;
+
+$page--element--bg--light: $grey-70;
+$page--element--bg--dark: $grey-40;
+
+$separator--bg--light: $grey-90;
+$separator--bg--dark: $grey-15;
+
+$anonymous--bg--light: $grey-80;
+$anonymous--bg--dark: $grey-40;
+
+// Color Definitions: Unit
+$unit--bg--light: $grey-100;
+$unit--bg--dark: $grey-20;
+
+$unit--bg--light--hover: $grey-90;
+$unit--bg--dark--hover: $grey-30;
+
+// Color Definitions: Dialog
+$dialog--bg--light: $grey-100;
+$dialog--bg--dark: $grey-25;
+
+// Color Definitions: Menu
+$menu--bg--light: $grey-100;
+$menu--bg--dark: $grey-10;
+$menu--text--light: $grey-50;
+$menu--text--dark: $grey-60;
+$menu--separator--light: $grey-90;
+$menu--separator--dark: $grey-05;
+$menu--item--bg--light--hover: $grey-85;
+$menu--item--bg--dark--hover: $grey-00;
+$menu--text--light--hover: $grey-100;
+$menu--text--dark--hover: $grey-15;
+
+// Color Definitions: Placeholders
+$placeholder--bound--bg--light: $grey-80;
+$placeholder--bound--bg--dark: $grey-30;
+
+$placeholder--bound--bg--light--hover: $grey-75;
+$placeholder--bound--bg--dark--hover: $grey-20;
+
+// Color Definitions: Notices
+$notice--bg--light: $accent--yellow--100;
+$notice--bg--dark: $accent--yellow--00;
+
+$notice--text--light: $accent--yellow--20;
+$notice--text--dark: $accent--yellow--100;
+
+$notice--button--bg--light: $accent--yellow--80;
+$notice--button--bg--dark: $accent--yellow--20;
+
+$notice--button--bg--light--hover: $accent--yellow--70;
+$notice--button--bg--dark--hover: $accent--yellow--10;
+
+$notice--button--text--light: $accent--yellow--10;
+$notice--button--text--dark: $accent--yellow--90;
+
+$notice--button--text--light--hover: $accent--yellow--00;
+$notice--button--text--dark--hover: $accent--yellow--100;
+
+// Color Definitions: Button
+$button--bg--light: $grey-80;
+$button--bg--light--hover: $grey-100;
+$button--bg--light--disabled: $grey-80;
+$button--contained--bg--light: $grey-85;
+$button--contained--bg--light--hover: $grey-80;
+
+$button--bg--dark: $grey-00;
+$button--bg--dark--hover: $grey-05;
+$button--bg--dark--disabled: $grey-30;
+$button--contained--bg--dark: $grey-15;
+$button--contained--bg--dark--hover: $grey-05;
+
+$button--text--light: $grey-55;
+$button--text--light--hover: $grey-40;
+$button--text--light--disabled: $grey-70;
+$button--text--dark: $grey-70;
+$button--text--dark--hover: $grey-100;
+$button--text--dark--disabled: $grey-50;
+
+// Color Definitions: Input
+$input--bg--light: $grey-100;
+$input--bg--light--hover: $grey-95;
+$input--bg--dark: $grey-40;
+$input--bg--dark--hover: $grey-30;
+
+$input--bound--bg--light: $grey-85;
+$input--bound--bg--light--hover: $grey-80;
+$input--bound--bg--dark: $grey-15;
+$input--bound--bg--dark--hover: $grey-10;
+
+// Color Definitions: Select
+$select--trigger--bg--light: $grey-100;
+$select--trigger--bg--dark: $grey-10;
+
+$select--trigger--contained--bg--light: $grey-85;
+$select--trigger--contained--bg--light--hover: $grey-80;
+$select--trigger--contained--bg--dark: $grey-15;
+$select--trigger--contained--bg--dark--hover: $grey-10;
+
+$select--content--contained--bg--light: $grey-100;
+$select--content--contained--bg--dark: $grey-15;
+
+$select--separator--light: $grey-90;
+$select--separator--dark: $grey-05;
+
+$option--bg--light--hover: $grey-75;
+$option--bg--dark--hover: $grey-00;
+
+$grid--rep--hover--light: $grey-100;
+$grid--rep--hover--dark: $grey-10;
+
+$grid--border--color--light: $grey-85;
+$grid--border--color--dark: $grey-40;
+
+// Color Definitions: Slider
+$slider--thumb--bg--light: $grey-100;
+$slider--thumb--bg--dark: $grey-100;
+$slider--thumb--bg--light--hover: $grey-95;
+$slider--thumb--bg--dark--hover: $grey-95;
+$slider--thumb--shadow--light: $grey-70;
+$slider--thumb--shadow--dark: $grey-05;
+$slider--thumb--shadow--light--hover: $grey-50;
+$slider--thumb--shadow--dark--hover: $grey-00;
+
+// Color Definitions: Switch
+$switch--nub--bg--light: $grey-80;
+$switch--nub--bg--dark: $grey-30;
+
+// Color Definitions: Link Items
+$link--item--bg--light: $grey-80;
+$link--item--bg--dark: $grey-30;
+$link--item--bg--image--light: $grey-60;
+$link--item--bg--image--dark: $grey-60;
+$link--item--bg--image--light--hover: $grey-40;
+$link--item--bg--image--dark--hover: $grey-80;
+
+// Color Definitions: Additional Weapons
+$extra--purple--bg--light: $purple-90;
+$extra--purple--card--bg--light: $purple-80;
+$extra--purple--primary--light: $purple-30;
+$extra--purple--secondary--light: $purple-40;
+$extra--purple--light--text--light: $purple-40;
+$extra--purple--text--light: $purple-20;
+$extra--purple--dark--text--light: $purple-10;
+
+$extra--purple--bg--dark: $purple-20;
+$extra--purple--card--bg--dark: $purple-40;
+$extra--purple--primary--dark: $purple-05;
+$extra--purple--secondary--dark: $purple-10;
+$extra--purple--light--text--dark: $purple-30;
+$extra--purple--text--dark: $purple-80;
+$extra--purple--dark--text--dark: $purple-00;
+
+// Color Definitions: Subaura
+$subaura--orange--bg--light: $orange-90;
+$subaura--orange--card--bg--light: $orange-80;
+$subaura--orange--primary--light: $orange-30;
+$subaura--orange--secondary--light: $orange-50;
+$subaura--orange--text--light: $orange-30;
+$subaura--orange--bg--dark: $orange-10;
+$subaura--orange--card--bg--dark: $orange-30;
+$subaura--orange--primary--dark: $orange-00;
+$subaura--orange--secondary--dark: $orange-10;
+$subaura--orange--text--dark: $orange-70;
+
+// Color Definitions: Tokens
+$charge--attack--bg: $orange-75;
+$charge--attack--text: $orange-35;
+
+$full--auto--bg: $yellow-text-20;
+
+$auto--guard--bg: $purple-50;
+$auto--guard--text: $purple-10;
+
+// Color Definitions: Pills
+$pill--bg--light: $grey-90;
+$pill--bg--light--hover: $grey-50;
+$pill--text--light: $grey-30;
+$pill--text--light--hover: $grey-100;
+
+$pill--bg--dark: $grey-00;
+$pill--bg--dark--hover: $grey-50;
+$pill--text--dark: $grey-100;
+$pill--text--dark--hover: $grey-00;
+
+// Color Definitions: Formatting menu
+$formatting--menu--bg--light: $grey-30;
+$formatting--menu--bg--dark: $grey-10;
+
+$formatting--menu--item--bg--light: $grey-30;
+$formatting--menu--item--bg--dark: $grey-20;
+
+$formatting--menu--item--bg--light--hover: $grey-40;
+$formatting--menu--item--bg--dark--hover: $grey-30;
+
+$formatting--menu--item--bg--light--active: $grey-50;
+$formatting--menu--item--bg--dark--active: $grey-40;
+
+$formatting--menu--item--text--light: $grey-100;
+$formatting--menu--item--text--dark: $grey-00;
+
+$formatting--menu--item--text--light--hover: $grey-100;
+$formatting--menu--item--text--dark--hover: $grey-00;
+
+$formatting--menu--item--text--light--active: $grey-100;
+$formatting--menu--item--text--dark--active: $grey-00;
+
+// Color Definitions: Toolbar
+$toolbar--bg--light: $grey-75;
+$toolbar--bg--dark: $grey-10;
+
+$toolbar--divider--bg--light: $grey-70;
+$toolbar--divider--bg--dark: $grey-20;
+
+$toolbar--item--bg--light: $grey-75;
+$toolbar--item--bg--dark: $grey-20;
+
+$toolbar--item--bg--light--hover: $grey-70;
+$toolbar--item--bg--dark--hover: $grey-30;
+
+$toolbar--item--bg--light--active: $accent--blue--light;
+$toolbar--item--bg--dark--active: $accent--blue--dark;
+
+$toolbar--item--text--light: $grey-40;
+$toolbar--item--text--dark: $grey-80;
+
+$toolbar--item--text--light--hover: $grey-30;
+$toolbar--item--text--dark--hover: $grey-90;
+
+$toolbar--item--text--light--active: $grey-100;
+$toolbar--item--text--dark--active: $grey-00;
+
+// Color Definitions: Highlights
+$highlight--bg--light: $yellow-70;
+$highlight--bg--dark: $yellow-50;
+
+$highlight--bg--light--hover: $yellow-50;
+$highlight--bg--dark--hover: $yellow-70;
+
+$highlight--text--light: $yellow-30;
+$highlight--text--dark: $yellow-10;
+
+$highlight--text--light--hover: $yellow-10;
+$highlight--text--dark--hover: $yellow-30;
+
+// Color Definitions: Element Toggle
+$toggle--bg--light: $grey-90;
+$toggle--bg--dark: $grey-15;
+
+$toggle--stroke--light: rgba(0, 0, 0, 0.14);
+$toggle--stroke--dark: rgba(0, 0, 0, 0.8);
+
+// Color Definitions: Text
+$text--primary--color--light: $grey-40;
+$text--primary--color--dark: $grey-90;
+
+$text--secondary--color--light: $grey-60;
+$text--secondary--color--dark: $grey-70;
+
+$text--tertiary--color--light: $grey-50;
+$text--tertiary--color--dark: $grey-50;
+
+$text--tertiary--hover--light: $grey-40;
+$text--tertiary--hover--dark: $grey-70;
+
+$text--link--hover--light: $grey-40;
+$text--link--hover--dark: $grey-100;
+
+$text--full--auto--light: $yellow-text-10;
+$text--full--auto--dark: $yellow-text-20;
+
+// Color Definitions: Icon
+$icon--secondary--color--light: $grey-70;
+$icon--secondary--color--dark: $grey-50;
+$icon--secondary--hover--light: $grey-50;
+$icon--secondary--hover--dark: $grey-70;
+
+// Color Definitions: Radio Buttons
+$radio--bg--light: $grey-75;
+$radio--bg--dark: $grey-10;
+
+$radio--bg--light--hover: $grey-70;
+$radio--bg--dark--hover: $grey-00;
+
+$radio--active--bg--light: $accent--blue--light;
+$radio--active--bg--dark: $accent--blue--dark;
+
+$radio--active--bg--light--hover: $accent--blue--light--focus;
+$radio--active--bg--dark--hover: $accent--blue--dark--focus;
+
+// Color Definitions: Tag
+$tag--bg--light: $grey-60;
+$tag--bg--dark: $grey-00;
+$tag--text--light: $grey-100;
+$tag--text--dark: $grey-50;
+
+// Color Definitions: Element / Wind
+$wind--bg--light: $wind-bg-10;
+$wind--bg--dark: $wind-bg-10;
+
+$wind--portrait--bg--light: $wind-bg-20;
+$wind--portrait--bg--dark: $wind-bg-20;
+
+$wind--bg--hover--light: $wind-bg-00;
+$wind--bg--hover--dark: $wind-bg-00;
+
+$wind--text--light: $wind-text-20;
+$wind--text--dark: $wind-text-30;
+$wind--text--contrast: $wind-text-10;
+
+$wind--text--raid--light: $wind-text-20;
+$wind--text--raid--dark: $wind-bg-10;
+
+$wind--text--hover--light: $wind-text-00;
+$wind--text--hover--dark: $wind-text-00;
+
+$wind--shadow--light: color.adjust($wind-text-20, $alpha: -0.3);
+$wind--shadow--dark: color.adjust($wind-text-20, $alpha: -0.3);
+
+$wind--shadow--light--hover: color.adjust($wind-text-00, $alpha: -0.3);
+$wind--shadow--dark--hover: color.adjust($wind-text-00, $alpha: -0.3);
+
+// Color Definitions: Element / Null
+$null--bg--light: $grey-75;
+$null--bg--dark: $grey-40;
+
+$null--bg--hover--light: $grey-70;
+$null--bg--hover--dark: $grey-30;
+
+$null--text--light: $grey-40;
+$null--text--dark: $grey-90;
+$null--text--contrast: $grey-90;
+
+$null--text--raid--light: $grey-40;
+$null--text--raid--dark: $grey-90;
+
+$null--text--hover--light: $grey-20;
+$null--text--hover--dark: $grey-90;
+
+$null--shadow--light: color.adjust($grey-60, $alpha: -0.3);
+$null--shadow--dark: color.adjust($grey-25, $alpha: -0.3);
+
+$null--shadow--light--hover: color.adjust($grey-50, $alpha: -0.3);
+$null--shadow--dark--hover: color.adjust($grey-10, $alpha: -0.3);
+
+// Color Definitions: Element / Fire
+$fire--bg--light: $fire-bg-10;
+$fire--bg--dark: $fire-bg-10;
+
+$fire--portrait--bg--light: $fire-bg-20;
+$fire--portrait--bg--dark: $fire-bg-20;
+
+$fire--bg--hover--light: $fire-bg-00;
+$fire--bg--hover--dark: $fire-bg-00;
+
+$fire--text--light: $fire-text-20;
+$fire--text--dark: $fire-text-30;
+$fire--text--contrast: $fire-text-10;
+
+$fire--text--raid--light: $fire-text-20;
+$fire--text--raid--dark: $fire-bg-10;
+
+$fire--text--hover--light: $fire-text-00;
+$fire--text--hover--dark: $fire-text-00;
+
+$fire--shadow--light: color.adjust($fire-text-20, $alpha: -0.3);
+$fire--shadow--dark: color.adjust($fire-text-20, $alpha: -0.3);
+
+$fire--shadow--light--hover: color.adjust($fire-text-00, $alpha: -0.3);
+$fire--shadow--dark--hover: color.adjust($fire-text-00, $alpha: -0.3);
+
+// Color Definitions: Element / Water
+$water--bg--light: $water-bg-10;
+$water--bg--dark: $water-bg-10;
+
+$water--portrait--bg--light: $water-bg-20;
+$water--portrait--bg--dark: $water-bg-20;
+
+$water--bg--hover--light: $water-bg-00;
+$water--bg--hover--dark: $water-bg-00;
+
+$water--text--light: $water-text-20;
+$water--text--dark: $water-text-30;
+$water--text--contrast: $water-text-10;
+
+$water--text--raid--light: $water-text-20;
+$water--text--raid--dark: $water-bg-10;
+
+$water--text--hover--light: $water-text-00;
+$water--text--hover--dark: $water-text-00;
+
+$water--shadow--light: color.adjust($water-text-20, $alpha: -0.3);
+$water--shadow--dark: color.adjust($water-text-20, $alpha: -0.3);
+
+$water--shadow--light--hover: color.adjust($water-text-00, $alpha: -0.3);
+$water--shadow--dark--hover: color.adjust($water-text-00, $alpha: -0.3);
+
+// Color Definitions: Element / Earth
+$earth--bg--light: $earth-bg-10;
+$earth--bg--dark: $earth-bg-10;
+
+$earth--portrait--bg--light: $earth-bg-20;
+$earth--portrait--bg--dark: $earth-bg-20;
+
+$earth--bg--hover--light: $earth-bg-00;
+$earth--bg--hover--dark: $earth-bg-00;
+
+$earth--text--light: $earth-text-20;
+$earth--text--dark: $earth-text-30;
+$earth--text--contrast: $earth-text-10;
+
+$earth--text--raid--light: $earth-text-20;
+$earth--text--raid--dark: $earth-bg-10;
+
+$earth--text--hover--light: $earth-text-00;
+$earth--text--hover--dark: $earth-text-00;
+
+$earth--shadow--light: color.adjust($earth-text-20, $alpha: -0.3);
+$earth--shadow--dark: color.adjust($earth-text-20, $alpha: -0.3);
+
+$earth--shadow--light--hover: color.adjust($earth-text-00, $alpha: -0.3);
+$earth--shadow--dark--hover: color.adjust($earth-text-00, $alpha: -0.3);
+
+// Color Definitions: Element / Dark
+$dark--bg--light: $dark-bg-10;
+$dark--bg--dark: $dark-bg-10;
+
+$dark--portrait--bg--light: $dark-bg-20;
+$dark--portrait--bg--dark: $dark-bg-20;
+
+$dark--bg--hover--light: $dark-bg-00;
+$dark--bg--hover--dark: $dark-bg-00;
+
+$dark--text--light: $dark-text-20;
+$dark--text--dark: $dark-text-30;
+$dark--text--contrast: $dark-text-10;
+
+$dark--text--raid--light: $dark-text-20;
+$dark--text--raid--dark: $dark-bg-10;
+
+$dark--text--hover--light: $dark-text-00;
+$dark--text--hover--dark: $dark-text-00;
+
+$dark--shadow--light: color.adjust($dark-text-20, $alpha: -0.3);
+$dark--shadow--dark: color.adjust($dark-text-20, $alpha: -0.3);
+
+$dark--shadow--light--hover: color.adjust($dark-text-00, $alpha: -0.3);
+$dark--shadow--dark--hover: color.adjust($dark-text-00, $alpha: -0.3);
+
+// Color Definitions: Element / Light
+$light--bg--light: $light-bg-10;
+$light--bg--dark: $light-bg-10;
+
+$light--portrait--bg--light: $light-bg-20;
+$light--portrait--bg--dark: $light-bg-20;
+
+$light--bg--hover--light: $light-bg-00;
+$light--bg--hover--dark: $light-bg-00;
+
+$light--text--light: $light-text-20;
+$light--text--dark: $light-text-30;
+$light--text--contrast: $light-text-10;
+
+$light--text--raid--light: $light-text-20;
+$light--text--raid--dark: $light-bg-10;
+
+$light--text--hover--light: $light-text-00;
+$light--text--hover--dark: $light-text-00;
+
+$light--shadow--light: color.adjust($light-text-20, $alpha: -0.3);
+$light--shadow--dark: color.adjust($light-text-20, $alpha: -0.3);
+
+$light--shadow--light--hover: color.adjust($light-text-00, $alpha: -0.3);
+$light--shadow--dark--hover: color.adjust($light-text-00, $alpha: -0.3);
diff --git a/src/themes/_effects.scss b/src/themes/_effects.scss
new file mode 100644
index 00000000..8fa3e1fd
--- /dev/null
+++ b/src/themes/_effects.scss
@@ -0,0 +1,69 @@
+// Shadows
+$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
+$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
+
+// Durations
+$duration-modal-open: 0.48s;
+$duration-color-fade: 0.24s;
+$duration-zoom: 0.18s;
+$duration-opacity-fade: 0.12s;
+
+// Gradients
+$hero--gradient--light:
+	linear-gradient(
+		90deg,
+		rgba(245, 245, 245, 1) 5%,
+		rgba(245, 245, 245, 0.2) 50%,
+		rgba(245, 245, 245, 0.2) 70%,
+		rgba(245, 245, 245, 1) 95%
+	),
+	linear-gradient(
+		rgba(245, 245, 245, 1) 5%,
+		rgba(245, 245, 245, 0.4) 40%,
+		rgba(245, 245, 245, 0.4) 78%,
+		rgba(245, 245, 245, 1) 95%
+	);
+$hero--gradient--light--overlay:
+	linear-gradient(
+		90deg,
+		rgba(245, 245, 245, 1) 0%,
+		rgba(245, 245, 245, 0) 50%,
+		rgba(245, 245, 245, 0) 70%,
+		rgba(245, 245, 245, 1) 95%
+	),
+	linear-gradient(
+		rgba(245, 245, 245, 1) 0%,
+		rgba(245, 245, 245, 0) 40%,
+		rgba(245, 245, 245, 0) 78%,
+		rgba(245, 245, 245, 1) 95%
+	);
+
+$hero--gradient--dark:
+	linear-gradient(
+		90deg,
+		rgba(25, 25, 25, 1) 5%,
+		rgba(25, 25, 25, 0.2) 50%,
+		rgba(25, 25, 25, 0.2) 70%,
+		rgba(25, 25, 25, 1) 95%
+	),
+	linear-gradient(
+		rgba(25, 25, 25, 1) 5%,
+		rgba(25, 25, 25, 0.4) 40%,
+		rgba(25, 25, 25, 0.4) 78%,
+		rgba(25, 25, 25, 1) 95%
+	);
+
+$hero--gradient--dark--overlay:
+	linear-gradient(
+		90deg,
+		rgba(25, 25, 25, 1) 0%,
+		rgba(25, 25, 25, 0) 50%,
+		rgba(25, 25, 25, 0) 70%,
+		rgba(25, 25, 25, 1) 95%
+	),
+	linear-gradient(
+		rgba(25, 25, 25, 1) 0%,
+		rgba(25, 25, 25, 0) 40%,
+		rgba(25, 25, 25, 0) 78%,
+		rgba(25, 25, 25, 1) 95%
+	);
diff --git a/src/themes/_layout.scss b/src/themes/_layout.scss
new file mode 100644
index 00000000..112fbbba
--- /dev/null
+++ b/src/themes/_layout.scss
@@ -0,0 +1,15 @@
+@use 'spacing';
+
+// Scale factors
+$scale-wide: scale(1.05, 1.05);
+$scale-tall: scale(1.012, 1.012);
+
+// Border radius
+$full-corner: 500px;
+$card-corner: spacing.$unit * 1.5;
+$input-corner: spacing.$unit;
+$item-corner: spacing.$unit;
+$item-corner-small: spacing.$unit-half;
+
+$bubble-menu-corner: spacing.$unit;
+$bubble-menu-item-corner: spacing.$unit-half * 1.5;
diff --git a/src/themes/_mixins.scss b/src/themes/_mixins.scss
new file mode 100644
index 00000000..ab857381
--- /dev/null
+++ b/src/themes/_mixins.scss
@@ -0,0 +1,68 @@
+// use with @include
+@mixin breakpoint($breakpoint) {
+	$phone-width: 450px;
+	$phone-height: 1280px;
+
+	$small-tablet-width: 750px;
+	$small-tablet-height: 1024px;
+
+	$tablet-width: 1024px;
+	$tablet-height: 1024px;
+
+	@if $breakpoint == tablet {
+		// prettier-ignore
+		@media only screen 
+      and (max-width: $tablet-width)
+      and (max-height: $tablet-height)
+      and (-webkit-min-device-pixel-ratio: 2) {
+        @content;
+      }
+	}
+
+	@if $breakpoint == small-tablet {
+		// prettier-ignore
+		@media only screen 
+      and (max-width: $small-tablet-width)
+      and (max-height: $small-tablet-height)
+      and (-webkit-min-device-pixel-ratio: 2) {
+        @content;
+      }
+	}
+
+	@if $breakpoint == phone {
+		// prettier-ignore
+		@media only screen 
+       and (max-width: $phone-width) 
+       and (max-height: $phone-height) 
+       and (-webkit-min-device-pixel-ratio: 2) {
+        @content;
+       }
+	}
+}
+
+@mixin hidpiImage($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
+	background: url($image + '.' + $extension) $repeat $position;
+	background-size: $width $height;
+
+	@media screen and (-webkit-min-device-pixel-ratio: 2),
+		screen and (min--moz-device-pixel-ratio: 2),
+		screen and (-moz-min-device-pixel-ratio: 2),
+		screen and (-o-min-device-pixel-ratio: 2/1),
+		screen and (min-device-pixel-ratio: 2),
+		screen and (min-resolution: 192dpi),
+		screen and (min-resolution: 2dppx) {
+		background: url($image + '@2x' + '.' + $extension) $repeat $position;
+		background-size: $width $height;
+	}
+
+	@media screen and (-webkit-min-device-pixel-ratio: 3),
+		screen and (min--moz-device-pixel-ratio: 3),
+		screen and (-moz-min-device-pixel-ratio: 3),
+		screen and (-o-min-device-pixel-ratio: 3/1),
+		screen and (min-device-pixel-ratio: 3),
+		screen and (min-resolution: 216dpi),
+		screen and (min-resolution: 3dppx) {
+		background: url($image + '@3x' + '.' + $extension) $repeat $position;
+		background-size: $width $height;
+	}
+}
diff --git a/src/themes/_spacing.scss b/src/themes/_spacing.scss
new file mode 100644
index 00000000..1ccedb78
--- /dev/null
+++ b/src/themes/_spacing.scss
@@ -0,0 +1,34 @@
+// Breakpoints
+$breakpoints: (
+	small: 320px,
+	medium: 800px,
+	large: 1024px
+);
+
+$desktop: 1920px;
+$laptop: 1280px;
+$tablet: 768px;
+$phone: 375px;
+
+$grid-width: 720px;
+$rep-height: 111px;
+
+// Legacy
+$medium-screen: 768px;
+
+// Sizing
+$unit: 8px;
+
+$unit-fourth: calc($unit / 4);
+$unit-half: calc($unit / 2);
+$unit-three-fourth: calc($unit / 4) * 3;
+$unit-2x: $unit * 2;
+$unit-3x: $unit * 3;
+$unit-4x: $unit * 4;
+$unit-5x: $unit * 5;
+$unit-6x: $unit * 6;
+$unit-8x: $unit * 8;
+$unit-10x: $unit * 10;
+$unit-12x: $unit * 12;
+$unit-14x: $unit * 14;
+$unit-20x: $unit * 20;
diff --git a/src/themes/_typography.scss b/src/themes/_typography.scss
new file mode 100644
index 00000000..f39caf53
--- /dev/null
+++ b/src/themes/_typography.scss
@@ -0,0 +1,24 @@
+// Fonts
+@font-face {
+	font-family: 'Goalking';
+	src: url('/fonts/gk-variable.woff2') format('woff2-variations');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Font-weight
+$normal: 400;
+$medium: 500;
+$bold: 600;
+
+// Font size (in rems based on 10px base = 62.5% of 16px)
+$font-tiny: 1.1rem; // 11px (1.1 × 10px)
+$font-small: 1.3rem; // 13px (1.3 × 10px)
+$font-button: 1.5rem; // 15px (1.5 × 10px)
+$font-name: 1.5rem; // 15px (1.5 × 10px)
+$font-regular: 1.6rem; // 16px (1.6 × 10px)
+$font-medium: 1.8rem; // 18px (1.8 × 10px)
+$font-large: 2.1rem; // 21px (2.1 × 10px)
+$font-xlarge: 2.4rem; // 24px (2.4 × 10px)
+$font-xxlarge: 2.8rem; // 28px (2.8 × 10px)
diff --git a/src/themes/_variables.scss b/src/themes/_variables.scss
new file mode 100644
index 00000000..4056af10
--- /dev/null
+++ b/src/themes/_variables.scss
@@ -0,0 +1,6 @@
+@use 'mixins';
+@use 'colors';
+@use 'typography';
+@use 'spacing';
+@use 'effects';
+@use 'layout';
diff --git a/src/themes/themes.scss b/src/themes/themes.scss
new file mode 100644
index 00000000..6a8aa121
--- /dev/null
+++ b/src/themes/themes.scss
@@ -0,0 +1,530 @@
+@use 'colors';
+@use 'typography';
+@use 'spacing';
+@use 'effects';
+@use 'layout';
+@use 'mixins';
+
+:root {
+	--font-family: 'Goalking', system-ui, sans-serif;
+
+	// Spacing variables
+	--unit: #{spacing.$unit};
+	--unit-2x: #{spacing.$unit-2x};
+	--unit-3x: #{spacing.$unit-3x};
+	--unit-4x: #{spacing.$unit-4x};
+	--unit-5x: #{spacing.$unit-5x};
+	--unit-6x: #{spacing.$unit-6x};
+	--unit-8x: #{spacing.$unit-8x};
+	--unit-10x: #{spacing.$unit-10x};
+	--unit-12x: #{spacing.$unit-12x};
+	--unit-14x: #{spacing.$unit-14x};
+	--unit-20x: #{spacing.$unit-20x};
+
+	// Common spacing combinations
+	--spacing-xs: #{spacing.$unit};
+	--spacing-sm: #{spacing.$unit-2x};
+	--spacing-md: #{spacing.$unit-4x};
+	--spacing-lg: #{spacing.$unit-8x};
+	--spacing-xl: #{spacing.$unit-12x};
+	--spacing-2xl: #{spacing.$unit-14x};
+
+	--background: #{colors.$page--bg--light};
+	--page-hover: #{colors.$page--hover--light};
+
+	--grid-rep-hover: #{colors.$grid--rep--hover--light};
+
+	--card-bg: #{colors.$grey-100};
+	--bar-bg: #{colors.$grey-100};
+
+	--link-text-hover: #{colors.$text--link--hover--light};
+
+	--charge-attack-bg: #{colors.$charge--attack--bg};
+	--charge-attack-text: #{colors.$charge--attack--text};
+	--full-auto-bg: #{colors.$full--auto--bg};
+	--full-auto-text: #{colors.$charge--attack--text};
+	--auto-guard-bg: #{colors.$auto--guard--bg};
+	--auto-guard-text: #{colors.$auto--guard--text};
+
+	--full-auto-label-text: #{colors.$text--full--auto--light};
+
+	--separator-bg: #{colors.$separator--bg--light};
+
+	--accent-blue: #{colors.$accent--blue--light};
+	--accent-blue-focus: #{colors.$accent--blue--light--focus};
+
+	--accent-yellow: #{colors.$accent--yellow--light};
+
+	--selected-item-bg: #{colors.$selected--item--bg--light};
+	--selected-item-bg-hover: #{colors.$selected--item--bg--light--hover};
+	--anonymous-bg: #{colors.$anonymous--bg--light};
+
+	--placeholder-bg: #{colors.$grey-80};
+	--placeholder-bg-accent: #{colors.$grey-75};
+
+	--transparent-stroke: #{colors.$transparent--stroke--light};
+
+	// Light - Units
+	--unit-bg: #{colors.$unit--bg--light};
+	--unit-bg-hover: #{colors.$unit--bg--light--hover};
+
+	// Light - Dialogs
+	--dialog-bg: #{colors.$dialog--bg--light};
+
+	// Light - Menus
+	--menu-bg: #{colors.$menu--bg--light};
+	--menu-separator: #{colors.$menu--separator--light};
+	--menu-text: #{colors.$menu--text--light};
+	--menu-bg-item-hover: #{colors.$menu--item--bg--light--hover};
+	--menu-text-hover: #{colors.$menu--text--light--hover};
+
+	// Light - Formatting menu
+	--formatting-menu-bg: #{colors.$formatting--menu--bg--light};
+	--formatting-menu-item-bg: #{colors.$formatting--menu--item--bg--light};
+	--formatting-menu-item-bg-hover: #{colors.$formatting--menu--item--bg--light--hover};
+	--formatting-menu-item-bg-active: #{colors.$formatting--menu--item--bg--dark--active};
+	--formatting-menu-item-text: #{colors.$formatting--menu--item--text--light};
+	--formatting-menu-item-text-hover: #{colors.$formatting--menu--item--text--light--hover};
+	--formatting-menu-item-text-active: #{colors.$formatting--menu--item--text--dark--active};
+
+	// Light - Toolbar
+	--toolbar-bg: #{colors.$toolbar--bg--light};
+	--toolbar-divider-bg: #{colors.$toolbar--divider--bg--light};
+	--toolbar-item-bg: #{colors.$toolbar--item--bg--light};
+	--toolbar-item-bg-hover: #{colors.$toolbar--item--bg--light--hover};
+	--toolbar-item-bg-active: #{colors.$toolbar--item--bg--light--active};
+	--toolbar-item-text: #{colors.$toolbar--item--text--light};
+	--toolbar-item-text-hover: #{colors.$toolbar--item--text--light--hover};
+	--toolbar-item-text-active: #{colors.$toolbar--item--text--light--active};
+
+	// Light - Highlights
+	--highlight-bg: #{colors.$highlight--bg--light};
+	--highlight-bg-hover: #{colors.$highlight--bg--light--hover};
+	--highlight-text: #{colors.$highlight--text--light};
+	--highlight-text-hover: #{colors.$highlight--text--light--hover};
+
+	// Light - Placeholders
+	--placeholder-bound-bg: #{colors.$placeholder--bound--bg--light};
+	--placeholder-bound-bg-hover: #{colors.$placeholder--bound--bg--light--hover};
+
+	// Light - Notices
+	--notice-bg: #{colors.$notice--bg--light};
+	--notice-text: #{colors.$notice--text--light};
+
+	--notice-button-bg: #{colors.$notice--button--bg--light};
+	--notice-button-bg-hover: #{colors.$notice--button--bg--light--hover};
+	--notice-button-text: #{colors.$notice--button--text--light};
+	--notice-button-text-hover: #{colors.$notice--button--text--light--hover};
+
+	// Light - Buttons
+	--button-bg: #{colors.$button--bg--light};
+	--button-bg-hover: #{colors.$button--bg--light--hover};
+	--button-bg-disabled: #{colors.$button--bg--light--disabled};
+	--button-contained-bg: #{colors.$button--contained--bg--light};
+	--button-contained-bg-hover: #{colors.$button--contained--bg--light--hover};
+
+	--button-text: #{colors.$button--text--light};
+	--button-text-hover: #{colors.$button--text--light--hover};
+	--button-text-disabled: #{colors.$button--text--light--disabled};
+
+	// Light - Inputs
+	--input-bg: #{colors.$input--bg--light};
+	--input-bg-hover: #{colors.$input--bg--light--hover};
+	--input-bound-bg: #{colors.$input--bound--bg--light};
+	--input-bound-bg-hover: #{colors.$input--bound--bg--light--hover};
+
+	// Light - Selects
+	--select-bg: #{colors.$select--trigger--bg--light};
+	--select-contained-bg: #{colors.$select--trigger--contained--bg--light};
+	--select-contained-bg-hover: #{colors.$select--trigger--contained--bg--light--hover};
+	--select-separator: #{colors.$select--separator--light};
+	--select-content-contained-bg: #{colors.$select--content--contained--bg--light};
+	--option-bg-hover: #{colors.$option--bg--light--hover};
+
+	// Light - Sliders
+	--slider-thumb-bg: #{colors.$slider--thumb--bg--light};
+	--slider-thumb-bg-hover: #{colors.$slider--thumb--bg--light--hover};
+	--slider-thumb-shadow: #{colors.$slider--thumb--shadow--light};
+	--slider-thumb-shadow-hover: #{colors.$slider--thumb--shadow--light--hover};
+
+	// Light - Radio Buttons
+	--radio-button-bg: #{colors.$radio--bg--light};
+	--radio-button-bg-hover: #{colors.$radio--bg--light--hover};
+
+	--radio-active-bg: #{colors.$radio--active--bg--light};
+	--radio-active-bg-hover: #{colors.$radio--active--bg--light--hover};
+
+	// Light - About
+	--link-item-bg: #{colors.$link--item--bg--light};
+	--link-item-image-color: #{colors.$link--item--bg--image--light};
+	--link-item-image-color-hover: #{colors.$link--item--bg--image--light--hover};
+
+	// Light - Text
+	--text-primary: #{colors.$text--primary--color--light};
+	--text-secondary: #{colors.$text--secondary--color--light};
+
+	--text-tertiary: #{colors.$text--tertiary--color--light};
+	--text-tertiary-hover: #{colors.$text--tertiary--hover--light};
+
+	// Light - Icons
+	--icon-secondary: #{colors.$icon--secondary--color--light};
+	--icon-secondary-hover: #{colors.$icon--secondary--hover--light};
+
+	// Light - Tags
+	--tag-bg: #{colors.$tag--bg--light};
+	--tag-text: #{colors.$tag--text--light};
+
+	// Light - Extra Weapons
+	--extra-purple-bg: #{colors.$extra--purple--bg--light};
+	--extra-purple-card-bg: #{colors.$extra--purple--card--bg--light};
+	--extra-purple-primary: #{colors.$extra--purple--primary--light};
+	--extra-purple-secondary: #{colors.$extra--purple--secondary--light};
+	--extra-purple-light-text: #{colors.$extra--purple--light--text--light};
+	--extra-purple-text: #{colors.$extra--purple--text--light};
+	--extra-purple-dark-text: #{colors.$extra--purple--dark--text--dark};
+
+	--switch-nub: #{colors.$switch--nub--bg--light};
+
+	// Light - Subaura Summons
+	--subaura-orange-bg: #{colors.$subaura--orange--bg--light};
+	--subaura-orange-card-bg: #{colors.$subaura--orange--card--bg--light};
+	--subaura-orange-primary: #{colors.$subaura--orange--primary--light};
+	--subaura-orange-secondary: #{colors.$subaura--orange--secondary--light};
+	--subaura-orange-text: #{colors.$subaura--orange--text--light};
+
+	// Light - Pills
+	--pill-bg: #{colors.$pill--bg--light};
+	--pill-bg-hover: #{colors.$pill--bg--light--hover};
+	--pill-text: #{colors.$pill--text--light};
+	--pill-text-hover: #{colors.$pill--text--light--hover};
+
+	// Light - Element Toggle
+	--toggle-bg: #{colors.$toggle--bg--light};
+	--toggle-stroke: #{colors.$toggle--stroke--light};
+
+	--grid-border-color: #{colors.$grid--border--color--light};
+
+	// Light - Element theming
+	--null-bg: #{colors.$null--bg--light};
+	--null-bg-hover: #{colors.$null--bg--hover--light};
+	--null-text: #{colors.$null--text--light};
+	--null-text-contrast: #{colors.$null--text--light};
+	--null-raid-text: #{colors.$null--text--raid--light};
+	--null-text-hover: #{colors.$null--text--hover--light};
+	--null-shadow: #{colors.$null--shadow--light};
+	--null-shadow-hover: #{colors.$null--shadow--light--hover};
+
+	--wind-bg: #{colors.$wind--bg--light};
+	--wind-bg-hover: #{colors.$wind--bg--hover--light};
+	--wind-portrait-bg: #{colors.$wind--portrait--bg--light};
+	--wind-text: #{colors.$wind--text--light};
+	--wind-raid-text: #{colors.$wind--text--raid--light};
+	--wind-text-hover: #{colors.$wind--text--hover--light};
+	--wind-shadow: #{colors.$wind--shadow--light};
+	--wind-shadow-hover: #{colors.$wind--shadow--light--hover};
+
+	--fire-bg: #{colors.$fire--bg--light};
+	--fire-bg-hover: #{colors.$fire--bg--hover--light};
+	--fire-portrait-bg: #{colors.$fire--portrait--bg--light};
+	--fire-text: #{colors.$fire--text--light};
+	--fire-text-contrast: #{colors.$fire--text--light};
+	--fire-raid-text: #{colors.$fire--text--raid--light};
+	--fire-text-hover: #{colors.$fire--text--hover--light};
+	--fire-shadow: #{colors.$fire--shadow--light};
+	--fire-shadow-hover: #{colors.$fire--shadow--light--hover};
+
+	--water-bg: #{colors.$water--bg--light};
+	--water-bg-hover: #{colors.$water--bg--hover--light};
+	--water-portrait-bg: #{colors.$water--portrait--bg--light};
+	--water-text: #{colors.$water--text--light};
+	--water-text-contrast: #{colors.$water--text--light};
+	--water-raid-text: #{colors.$water--text--raid--light};
+	--water-text-hover: #{colors.$water--text--hover--light};
+	--water-shadow: #{colors.$water--shadow--light};
+	--water-shadow-hover: #{colors.$water--shadow--light--hover};
+
+	--earth-bg: #{colors.$earth--bg--light};
+	--earth-bg-hover: #{colors.$earth--bg--hover--light};
+	--earth-portrait-bg: #{colors.$earth--portrait--bg--light};
+	--earth-text: #{colors.$earth--text--light};
+	--earth-text-contrast: #{colors.$earth--text--light};
+	--earth-raid-text: #{colors.$earth--text--raid--light};
+	--earth-text-hover: #{colors.$earth--text--hover--light};
+	--earth-shadow: #{colors.$earth--shadow--light};
+	--earth-shadow-hover: #{colors.$earth--shadow--light--hover};
+
+	--dark-bg: #{colors.$dark--bg--light};
+	--dark-bg-hover: #{colors.$dark--bg--hover--light};
+	--dark-portrait-bg: #{colors.$dark--portrait--bg--light};
+	--dark-text: #{colors.$dark--text--light};
+	--dark-text-contrast: #{colors.$dark--text--light};
+	--dark-raid-text: #{colors.$dark--text--raid--light};
+	--dark-text-hover: #{colors.$dark--text--hover--light};
+	--dark-shadow: #{colors.$dark--shadow--light};
+	--dark-shadow-hover: #{colors.$dark--shadow--light--hover};
+
+	--light-bg: #{colors.$light--bg--light};
+	--light-bg-hover: #{colors.$light--bg--hover--light};
+	--light-portrait-bg: #{colors.$light--portrait--bg--light};
+	--light-text: #{colors.$light--text--light};
+	--light-text-contrast: #{colors.$light--text--light};
+	--light-raid-text: #{colors.$light--text--raid--light};
+	--light-text-hover: #{colors.$light--text--hover--light};
+	--light-shadow: #{colors.$light--shadow--light};
+	--light-shadow-hover: #{colors.$light--shadow--light--hover};
+
+	// Gradients
+	--hero-gradient: #{effects.$hero--gradient--light};
+	--hero-gradient-overlay: #{effects.$hero--gradient--light--overlay};
+}
+
+[data-theme='dark'] {
+	--background: #{colors.$page--bg--dark};
+	--page-hover: #{colors.$page--hover--dark};
+
+	--grid-rep-hover: #{colors.$grid--rep--hover--dark};
+
+	--card-bg: #{colors.$page--element--bg--dark};
+	--bar-bg: #{colors.$grey-20};
+
+	--link-text-hover: #{colors.$text--link--hover--dark};
+
+	--charge-attack-bg: #{colors.$charge--attack--bg};
+	--charge-attack-text: #{colors.$charge--attack--text};
+
+	--full-auto-bg: #{colors.$full--auto--bg};
+	--full-auto-text: #{colors.$charge--attack--text};
+
+	--full-auto-label-text: #{colors.$text--full--auto--dark};
+
+	--separator-bg: #{colors.$separator--bg--dark};
+
+	--accent-blue: #{colors.$accent--blue--dark};
+	--accent-blue-focus: #{colors.$accent--blue--dark--focus};
+
+	--accent-yellow: #{colors.$accent--yellow--dark};
+
+	--selected-item-bg: #{colors.$selected--item--bg--dark};
+	--selected-item-bg-hover: #{colors.$selected--item--bg--dark--hover};
+
+	--anonymous-bg: #{colors.$anonymous--bg--dark};
+
+	--placeholder-bg: #{colors.$grey-40};
+	--placeholder-bg-accent: #{colors.$grey-45};
+
+	--transparent-stroke: #{colors.$transparent--stroke--dark};
+
+	// Dark - Units
+	--unit-bg: #{colors.$unit--bg--dark};
+	--unit-bg-hover: #{colors.$unit--bg--dark--hover};
+
+	// Dark - Dialogs
+	--dialog-bg: #{colors.$dialog--bg--dark};
+
+	// Dark - Menus
+	--menu-bg: #{colors.$menu--bg--dark};
+	--menu-text: #{colors.$menu--text--dark};
+	--menu-separator: #{colors.$menu--separator--dark};
+	--menu-bg-item-hover: #{colors.$menu--item--bg--dark--hover};
+	--menu-text-hover: #{colors.$menu--text--dark--hover};
+
+	// Dark - Formatting menu
+	--formatting-menu-bg: #{colors.$formatting--menu--bg--dark};
+	--formatting-menu-item-bg: #{colors.$formatting--menu--item--bg--dark};
+	--formatting-menu-item-bg-hover: #{colors.$formatting--menu--item--bg--dark--hover};
+	--formatting-menu-item-bg-active: #{colors.$formatting--menu--item--bg--dark--active};
+	--formatting-menu-item-text: #{colors.$formatting--menu--item--text--dark};
+	--formatting-menu-item-text-hover: #{colors.$formatting--menu--item--text--dark--hover};
+	--formatting-menu-item-text-active: #{colors.$formatting--menu--item--text--dark--active};
+
+	// Dark - Toolbar
+	--toolbar-bg: #{colors.$toolbar--bg--dark};
+	--toolbar-divider-bg: #{colors.$toolbar--divider--bg--dark};
+	--toolbar-item-bg: #{colors.$toolbar--item--bg--dark};
+	--toolbar-item-bg-hover: #{colors.$toolbar--item--bg--dark--hover};
+	--toolbar-item-bg-active: #{colors.$toolbar--item--bg--dark--active};
+	--toolbar-item-text: #{colors.$toolbar--item--text--dark};
+	--toolbar-item-text-hover: #{colors.$toolbar--item--text--dark--hover};
+	--toolbar-item-text-active: #{colors.$toolbar--item--text--dark--active};
+
+	// Dark - Highlights
+	--highlight-bg: #{colors.$highlight--bg--dark};
+	--highlight-bg-hover: #{colors.$highlight--bg--dark--hover};
+	--highlight-text: #{colors.$highlight--text--dark};
+	--highlight-text-hover: #{colors.$highlight--text--dark--hover};
+
+	// Dark - Placeholders
+	--placeholder-bound-bg: #{colors.$placeholder--bound--bg--dark};
+	--placeholder-bound-bg-hover: #{colors.$placeholder--bound--bg--dark--hover};
+
+	// Dark - Notices
+	--notice-bg: #{colors.$notice--bg--dark};
+	--notice-text: #{colors.$notice--text--dark};
+
+	--notice-button-bg: #{colors.$notice--button--bg--dark};
+	--notice-button-bg-hover: #{colors.$notice--button--bg--dark--hover};
+	--notice-button-text: #{colors.$notice--button--text--dark};
+	--notice-button-text-hover: #{colors.$notice--button--text--dark--hover};
+
+	// Dark - Buttons
+	--button-bg: #{colors.$button--bg--dark};
+	--button-bg-hover: #{colors.$button--bg--dark--hover};
+	--button-contained-bg-hover: #{colors.$button--contained--bg--dark--hover};
+	--button-bg-disabled: #{colors.$button--bg--dark--disabled};
+	--button-contained-bg: #{colors.$button--contained--bg--dark};
+
+	--button-text: #{colors.$button--text--dark};
+	--button-text-hover: #{colors.$button--text--dark--hover};
+	--button-text-disabled: #{colors.$button--text--dark--disabled};
+
+	// Dark - Inputs
+	--input-bg: #{colors.$input--bg--dark};
+	--input-bg-hover: #{colors.$input--bg--dark--hover};
+	--input-bound-bg: #{colors.$input--bound--bg--dark};
+	--input-bound-bg-hover: #{colors.$input--bound--bg--dark--hover};
+
+	// Dark - Selects
+	--select-bg: #{colors.$select--trigger--bg--dark};
+	--select-contained-bg: #{colors.$select--trigger--contained--bg--dark};
+	--select-contained-bg-hover: #{colors.$select--trigger--contained--bg--dark--hover};
+	--select-separator: #{colors.$select--separator--dark};
+	--select-content-contained-bg: #{colors.$select--content--contained--bg--dark};
+	--option-bg-hover: #{colors.$option--bg--dark--hover};
+
+	// Dark - Sliders
+	--slider-thumb-bg: #{colors.$slider--thumb--bg--dark};
+	--slider-thumb-bg-hover: #{colors.$slider--thumb--bg--dark--hover};
+	--slider-thumb-shadow: #{colors.$slider--thumb--shadow--dark};
+	--slider-thumb-shadow-hover: #{colors.$slider--thumb--shadow--dark--hover};
+
+	// Dark - Radio Buttons
+	--radio-button-bg: #{colors.$radio--bg--dark};
+	--radio-button-bg-hover: #{colors.$radio--bg--dark--hover};
+
+	--radio-active-bg: #{colors.$radio--active--bg--dark};
+	--radio-active-bg-hover: #{colors.$radio--active--bg--dark--hover};
+
+	// Dark - About
+	--link-item-bg: #{colors.$link--item--bg--dark};
+	--link-item-image-color: #{colors.$link--item--bg--image--dark};
+	--link-item-image-color-hover: #{colors.$link--item--bg--image--dark--hover};
+
+	// Dark - Text
+	--text-primary: #{colors.$text--primary--color--dark};
+	--text-secondary: #{colors.$text--secondary--color--dark};
+
+	--text-tertiary: #{colors.$text--tertiary--color--dark};
+	--text-tertiary-hover: #{colors.$text--tertiary--hover--dark};
+
+	// Dark - Icons
+	--icon-secondary: #{colors.$icon--secondary--color--dark};
+	--icon-secondary-hover: #{colors.$icon--secondary--hover--dark};
+
+	// Dark - Tags
+	--tag-bg: #{colors.$tag--bg--dark};
+	--tag-text: #{colors.$tag--text--dark};
+
+	// Dark - Extra Weapons
+	--extra-purple-bg: #{colors.$extra--purple--bg--dark};
+	--extra-purple-card-bg: #{colors.$extra--purple--card--bg--dark};
+	--extra-purple-primary: #{colors.$extra--purple--primary--dark};
+	--extra-purple-secondary: #{colors.$extra--purple--secondary--dark};
+	--extra-purple-text-light: #{colors.$extra--purple--light--text--dark};
+	--extra-purple-text: #{colors.$extra--purple--text--dark};
+	--extra-purple-text-dark: #{colors.$extra--purple--dark--text--dark};
+
+	--switch-nub: #{colors.$switch--nub--bg--dark};
+
+	// Dark - Subaura Summons
+	--subaura-orange-bg: #{colors.$subaura--orange--bg--dark};
+	--subaura-orange-card-bg: #{colors.$subaura--orange--card--bg--dark};
+	--subaura-orange-primary: #{colors.$subaura--orange--primary--dark};
+	--subaura-orange-secondary: #{colors.$subaura--orange--secondary--dark};
+	--subaura-orange-text: #{colors.$subaura--orange--text--dark};
+
+	// Dark - Pills
+	--pill-bg: #{colors.$pill--bg--dark};
+	--pill-bg-hover: #{colors.$pill--bg--dark--hover};
+	--pill-text: #{colors.$pill--text--dark};
+	--pill-text-hover: #{colors.$pill--text--dark--hover};
+
+	// Dark - Element Toggle
+	--toggle-bg: #{colors.$toggle--bg--dark};
+	--toggle-stroke: #{colors.$toggle--stroke--dark};
+
+	--grid-border-color: #{colors.$grid--border--color--dark};
+
+	// Dark - Element theming
+	--null-bg: #{colors.$null--bg--dark};
+	--null-bg-hover: #{colors.$null--bg--hover--dark};
+	--null-text: #{colors.$null--text--dark};
+	--null-contrast-text: #{colors.$null--text--contrast};
+	--null-raid-text: #{colors.$null--text--raid--dark};
+	--null-text-hover: #{colors.$null--text--hover--dark};
+	--null-shadow: #{colors.$null--shadow--dark};
+	--null-shadow-hover: #{colors.$null--shadow--dark--hover};
+
+	--wind-bg: #{colors.$wind--bg--dark};
+	--wind-bg-hover: #{colors.$wind--bg--hover--dark};
+	--wind-portrait-bg: #{colors.$wind--portrait--bg--dark};
+	--wind-text: #{colors.$wind--text--dark};
+	--wind-raid-text: #{colors.$wind--text--raid--dark};
+	--wind-text-contrast: #{colors.$wind--text--contrast};
+	--wind-text-hover: #{colors.$wind--text--hover--dark};
+	--wind-shadow: #{colors.$wind--shadow--dark};
+	--wind-shadow-hover: #{colors.$wind--shadow--dark--hover};
+
+	--fire-bg: #{colors.$fire--bg--dark};
+	--fire-bg-hover: #{colors.$fire--bg--hover--dark};
+	--fire-portrait-bg: #{colors.$fire--portrait--bg--dark};
+	--fire-text: #{colors.$fire--text--dark};
+	--fire-text-contrast: #{colors.$fire--text--contrast};
+	--fire-raid-text: #{colors.$fire--text--raid--dark};
+	--fire-text-hover: #{colors.$fire--text--hover--dark};
+	--fire-shadow: #{colors.$fire--shadow--dark};
+	--fire-shadow-hover: #{colors.$fire--shadow--dark--hover};
+
+	--water-bg: #{colors.$water--bg--dark};
+	--water-bg-hover: #{colors.$water--bg--hover--dark};
+	--water-portrait-bg: #{colors.$water--portrait--bg--dark};
+	--water-text: #{colors.$water--text--dark};
+	--water-text-contrast: #{colors.$water--text--contrast};
+	--water-raid-text: #{colors.$water--text--raid--dark};
+	--water-text-hover: #{colors.$water--text--hover--dark};
+	--water-shadow: #{colors.$water--shadow--dark};
+	--water-shadow-hover: #{colors.$water--shadow--dark--hover};
+
+	--earth-bg: #{colors.$earth--bg--dark};
+	--earth-bg-hover: #{colors.$earth--bg--hover--dark};
+	--earth-portrait-bg: #{colors.$earth--portrait--bg--dark};
+	--earth-text: #{colors.$earth--text--dark};
+	--earth-text-contrast: #{colors.$earth--text--contrast};
+	--earth-raid-text: #{colors.$earth--text--raid--dark};
+	--earth-text-hover: #{colors.$earth--text--hover--dark};
+	--earth-shadow: #{colors.$earth--shadow--dark};
+	--earth-shadow-hover: #{colors.$earth--shadow--dark--hover};
+
+	--dark-bg: #{colors.$dark--bg--dark};
+	--dark-bg-hover: #{colors.$dark--bg--hover--dark};
+	--dark-portrait-bg: #{colors.$dark--portrait--bg--dark};
+	--dark-text: #{colors.$dark--text--dark};
+	--dark-text-contrast: #{colors.$dark--text--contrast};
+	--dark-raid-text: #{colors.$dark--text--raid--dark};
+	--dark-text-hover: #{colors.$dark--text--hover--dark};
+	--dark-shadow: #{colors.$dark--shadow--dark};
+	--dark-shadow-hover: #{colors.$dark--shadow--dark--hover};
+
+	--light-bg: #{colors.$light--bg--dark};
+	--light-bg-hover: #{colors.$light--bg--hover--dark};
+	--light-portrait-bg: #{colors.$light--portrait--bg--dark};
+	--light-text: #{colors.$light--text--dark};
+	--light-text-contrast: #{colors.$light--text--contrast};
+	--light-raid-text: #{colors.$light--text--raid--dark};
+	--light-text-hover: #{colors.$light--text--hover--dark};
+	--light-shadow: #{colors.$light--shadow--dark};
+	--light-shadow-hover: #{colors.$light--shadow--dark--hover};
+
+	// Gradients
+	--hero-gradient: #{effects.$hero--gradient--dark};
+	--hero-gradient-overlay: #{effects.$hero--gradient--dark--overlay};
+}