diff --git a/app/components/Ability.module.css b/app/components/Ability.module.css
index 49bc9ead9..686573610 100644
--- a/app/components/Ability.module.css
+++ b/app/components/Ability.module.css
@@ -2,13 +2,12 @@
 	width: var(--ability-size);
 	height: var(--ability-size);
 	padding: 0;
-	border: 2px solid var(--color-accent-low);
+	border: 2px solid var(--color-bg-higher);
 	border-radius: 50%;
 	border-right: 0;
 	border-bottom: 0;
 	background: var(--bg-ability);
 	background-size: 100%;
-	box-shadow: 0 0 0 1px var(--bg-ability);
 	transform: scale(1);
 	transition: all 0.1s ease;
 	user-select: none;
diff --git a/app/components/AddNewButton.module.css b/app/components/AddNewButton.module.css
index 11a937e34..5c8e94a02 100644
--- a/app/components/AddNewButton.module.css
+++ b/app/components/AddNewButton.module.css
@@ -27,7 +27,7 @@
 	max-height: var(--icon-size);
 	min-width: var(--icon-size);
 	min-height: var(--icon-size);
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	stroke-width: 4px;
 }
 
@@ -40,7 +40,7 @@
 
 .textContainer {
 	padding-inline: var(--s-1-5);
-	background-color: var(--color-accent) !important;
+	background-color: var(--color-text-accent) !important;
 	height: calc(var(--button-height) - var(--border-width) * 2);
 	display: flex;
 	align-items: center;
diff --git a/app/components/Chart.tsx b/app/components/Chart.tsx
index ae12c87e9..4f9286996 100644
--- a/app/components/Chart.tsx
+++ b/app/components/Chart.tsx
@@ -85,7 +85,7 @@ export default function Chart({
 					secondaryAxes,
 					dark: theme.htmlThemeClass === Theme.DARK,
 					defaultColors: [
-						"var(--color-accent)",
+						"var(--color-text-accent)",
 						"var(--color-accent)",
 						"var(--color-info)",
 					],
diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 03a3931e6..539b94701 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -3,10 +3,10 @@
 	width: auto;
 	align-items: center;
 	justify-content: center;
-	border: 2px solid var(--color-accent);
+	border: 2px solid var(--color-text-accent);
 	border-radius: var(--rounded-sm);
 	appearance: none;
-	background: var(--color-accent);
+	background: var(--color-text-accent);
 	color: var(--color-text-inverse);
 	cursor: pointer;
 	font-size: var(--fonts-sm);
@@ -20,7 +20,7 @@
 
 .button[data-focus-visible],
 .button:focus-visible {
-	outline: 2px solid var(--color-accent);
+	outline: 2px solid var(--color-text-accent);
 }
 
 .button[data-pressed],
@@ -37,7 +37,7 @@
 
 .outlined {
 	background-color: var(--color-accent-low);
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .outlinedSuccess {
@@ -68,7 +68,7 @@
 	padding: 0;
 	border: none;
 	background-color: transparent;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	outline: initial;
 }
 
diff --git a/app/components/elements/Menu.module.css b/app/components/elements/Menu.module.css
index b51786913..2053f4337 100644
--- a/app/components/elements/Menu.module.css
+++ b/app/components/elements/Menu.module.css
@@ -54,7 +54,7 @@
 }
 
 .item[data-focused] {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-high);
 }
 
 .itemDisabled {
@@ -63,12 +63,12 @@
 }
 
 .itemSelected {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-text-accent);
 	font-weight: var(--extra-bold);
 }
 
 .itemActive {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .itemIcon {
diff --git a/app/components/elements/Select.module.css b/app/components/elements/Select.module.css
index 1115c4a66..56842b2cf 100644
--- a/app/components/elements/Select.module.css
+++ b/app/components/elements/Select.module.css
@@ -17,6 +17,11 @@
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	letter-spacing: 0.5px;
+	cursor: pointer;
+}
+
+.button:hover {
+	border-color: var(--color-border-high);
 }
 
 .button[data-focus-visible] {
@@ -86,12 +91,12 @@
 }
 
 .itemFocused {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-high);
 	color: var(--color-text);
 }
 
 .itemSelected {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-weight: var(--bold);
 }
 
diff --git a/app/features/badges/components/BadgeDisplay.module.css b/app/features/badges/components/BadgeDisplay.module.css
index 8cb23089f..91550f710 100644
--- a/app/features/badges/components/BadgeDisplay.module.css
+++ b/app/features/badges/components/BadgeDisplay.module.css
@@ -62,12 +62,12 @@
 	padding: var(--s-1);
 	height: 24px;
 	width: 24px;
-	border: 2px solid var(--color-border);
+	border: 2px solid var(--color-border-high);
 	font-size: var(--fonts-xs);
 	color: var(--color-text-high);
 }
 
 .paginationButtonActive {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	background-color: var(--color-bg-higher);
 }
diff --git a/app/features/calendar/components/TournamentCard.module.css b/app/features/calendar/components/TournamentCard.module.css
index 2c1f4e76d..5a1afc9ad 100644
--- a/app/features/calendar/components/TournamentCard.module.css
+++ b/app/features/calendar/components/TournamentCard.module.css
@@ -35,7 +35,7 @@
 }
 
 .card:hover .avatarImg {
-	outline: 6px solid var(--color-accent-low);
+	outline: 6px solid var(--color-bg-high);
 }
 
 .org {
@@ -121,7 +121,7 @@
 
 .pillRanked {
 	background-color: var(--color-info-low);
-	color: var(--color-info);
+	color: var(--color-text-accent);
 }
 
 .pillRanked svg {
diff --git a/app/root.tsx b/app/root.tsx
index 6c6567073..b07eb0c05 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -52,14 +52,14 @@ import { allI18nNamespaces } from "./utils/i18n";
 import { isRevalidation, metaTags } from "./utils/remix";
 import { SUSPENDED_PAGE } from "./utils/urls";
 
-import "nprogress/nprogress.css";
+import "~/styles/normalize.css";
 import "~/styles/common.css";
 import "~/styles/elements.css";
+import "~/styles/utils.css";
 import "~/styles/flags.css";
 import "~/styles/layout.css";
-import "~/styles/normalize.css";
-import "~/styles/utils.css";
 import "~/styles/vars.css";
+import "nprogress/nprogress.css";
 
 export const shouldRevalidate: ShouldRevalidateFunction = (args) => {
 	if (isRevalidation(args)) return true;
diff --git a/app/styles/common.css b/app/styles/common.css
index 1579de52e..0f5cb5363 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -101,11 +101,16 @@ textarea:not(.plain, [name="text"]) {
 	outline: none;
 	overflow-wrap: normal;
 	overflow-x: auto;
+	resize: vertical;
+}
+
+textarea:not(.plain, [name="text"]):hover {
+	border-color: var(--color-border-high);
 }
 
 textarea:not(.plain, [name="text"]):focus-within {
 	border-color: transparent;
-	outline: 2px solid var(--color-accent);
+	outline: 2px solid var(--color-text-accent);
 }
 
 input:not(.plain, [type="radio"]) {
@@ -242,9 +247,13 @@ select {
 	background-position: center right var(--s-3);
 	background-repeat: no-repeat;
 	cursor: pointer;
-	font-weight: 500;
-	padding-block: 3.5px;
 	padding-inline: var(--s-3) var(--s-9);
+	padding-block: 3.5px;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+	height: 2rem;
+	line-height: 1.25;
 }
 
 select:disabled {
@@ -253,6 +262,10 @@ select:disabled {
 	transform: initial;
 }
 
+select:hover {
+	border-color: var(--color-border-high);
+}
+
 .light select {
 	background-image: url('data:image/svg+xml;utf8,<svg width="17px" color="rgb(0 0 0 / 55%)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
 }
@@ -268,7 +281,8 @@ select::selection {
 }
 
 select:focus {
-	outline: 2px solid var(--color-accent);
+	border-color: transparent;
+	outline: 2px solid var(--color-text-accent);
 }
 
 .my-table {
@@ -349,9 +363,13 @@ abbr[title] {
 	outline: none;
 }
 
+.input-container:hover {
+	border-color: var(--color-border-high);
+}
+
 .input-container:focus-within {
 	border-color: transparent;
-	outline: 2px solid var(--color-accent);
+	outline: 2px solid var(--color-text-accent);
 }
 
 .input-container > input {
@@ -399,7 +417,7 @@ abbr[title] {
 }
 
 .sub-nav__link__container.active {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .sub-nav__link {
@@ -872,7 +890,7 @@ abbr[title] {
 	display: flex;
 	width: 100%;
 	align-items: center;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-size: var(--fonts-lg);
 	text-align: center;
 }
diff --git a/app/styles/elements.css b/app/styles/elements.css
index 2c7e21cb2..7a031b1d9 100644
--- a/app/styles/elements.css
+++ b/app/styles/elements.css
@@ -152,7 +152,7 @@
 .react-aria-Switch .indicator {
 	width: var(--s-11);
 	height: var(--s-6);
-	background: var(--color-accent-low);
+	background: var(--color-bg-higher);
 	border-radius: 1.143rem;
 }
 
@@ -183,7 +183,7 @@
 }
 
 .react-aria-Switch[data-selected] .indicator {
-	background: var(--color-accent-high);
+	background: var(--color-text-accent);
 }
 
 .react-aria-Switch[data-selected] .indicator:before {
diff --git a/app/styles/layout.css b/app/styles/layout.css
index 2d0b73f51..79afd45fb 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -90,8 +90,7 @@
 	height: var(--item-size);
 	outline-offset: 2px;
 	padding: 0.25rem;
-	border: 2px solid;
-	border-color: var(--color-accent-low);
+	border: 2px solid var(--color-border);
 	border-radius: 50%;
 	background-color: transparent;
 	color: inherit;
@@ -202,7 +201,7 @@
 	justify-content: space-between;
 	padding: var(--s-4);
 	border-radius: var(--rounded);
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 	cursor: pointer;
 	font-size: var(--fonts-lg);
 }
diff --git a/app/styles/u.css b/app/styles/u.css
index 21b11d6fb..5a635f654 100644
--- a/app/styles/u.css
+++ b/app/styles/u.css
@@ -110,7 +110,7 @@
 .u__extra-info {
 	padding: var(--s-1) var(--s-1-5);
 	border-radius: var(--rounded);
-	background-color: var(--color-bg);
+	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xxs);
 	display: flex;
 	align-items: center;
@@ -118,7 +118,7 @@
 }
 
 .u__extra-info__heading {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-weight: var(--bold);
 }
 
@@ -269,7 +269,7 @@
 .u__season__weapon-border__outer {
 	--degree: 80deg;
 	--smoothing: 0.5deg;
-	--color: var(--color-accent);
+	--color: var(--color-text-accent);
 
 	display: block;
 	content: "";
diff --git a/app/styles/utils.css b/app/styles/utils.css
index 710b5f5fa..33cf29f32 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -71,11 +71,11 @@
 }
 
 .text-theme {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .text-theme-secondary {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .text-uppercase {
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 2486f5edc..c2f720d8e 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -40,7 +40,7 @@ html.dark {
 	--color-warning-high: oklch(94% 0.05 85);
 
 	--color-error-low: oklch(31% 0.07 10);
-	--color-error: oklch(65% 0.19 10);
+	--color-error: oklch(65% 0.25 10);
 	--color-error-high: oklch(87% 0.07 10);
 }