diff --git a/app/components/AbilitiesSelector.module.css b/app/components/AbilitiesSelector.module.css
index cbc2f04ce..c0150472c 100644
--- a/app/components/AbilitiesSelector.module.css
+++ b/app/components/AbilitiesSelector.module.css
@@ -24,7 +24,7 @@
 
 .abilityButton {
 	padding: var(--s-0-5);
-	border: 2px solid var(--color-bg-high);
+	border: var(--border-style);
 	border-radius: 50%;
 	background-color: var(--color-bg-ability);
 }
diff --git a/app/components/Ability.module.css b/app/components/Ability.module.css
index 4d2f55b41..db787ca9e 100644
--- a/app/components/Ability.module.css
+++ b/app/components/Ability.module.css
@@ -2,7 +2,7 @@
 	width: var(--ability-size);
 	height: var(--ability-size);
 	padding: 0;
-	border: 2px solid var(--color-bg-higher);
+	border: var(--border-style-high);
 	border-radius: 50%;
 	border-right: 0;
 	border-bottom: 0;
diff --git a/app/components/Chart.module.css b/app/components/Chart.module.css
index 639f581d4..e3c27cb7c 100644
--- a/app/components/Chart.module.css
+++ b/app/components/Chart.module.css
@@ -6,7 +6,7 @@
 }
 
 .tooltip {
-	border: 1.75px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded);
 	background-color: var(--color-bg);
 	padding: var(--s-1) var(--s-2);
diff --git a/app/components/CustomThemeSelector.module.css b/app/components/CustomThemeSelector.module.css
index f3ee0fa92..97e14c099 100644
--- a/app/components/CustomThemeSelector.module.css
+++ b/app/components/CustomThemeSelector.module.css
@@ -3,7 +3,7 @@
 	flex-direction: column;
 	gap: var(--s-6);
 	padding: var(--s-4);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background-color: var(--color-bg-medium);
 	position: relative;
@@ -32,7 +32,7 @@
 	text-align: center;
 	background-color: var(--color-bg);
 	padding: var(--s-2) var(--s-4);
-	border-block: 2px solid var(--color-border);
+	border-block: var(--border-style);
 }
 
 .customThemeSelectorActions {
diff --git a/app/components/InfoPopover.module.css b/app/components/InfoPopover.module.css
index 91e1090a6..247c758e0 100644
--- a/app/components/InfoPopover.module.css
+++ b/app/components/InfoPopover.module.css
@@ -1,5 +1,5 @@
 .trigger {
-	border: 2px solid var(--color-bg-higher);
+	border: var(--border-style-high);
 	border-radius: 100%;
 	background-color: transparent;
 	color: var(--color-text);
diff --git a/app/components/Input.module.css b/app/components/Input.module.css
index 7715c3c9f..68f9f4f4c 100644
--- a/app/components/Input.module.css
+++ b/app/components/Input.module.css
@@ -3,7 +3,7 @@
 	font-size: var(--fonts-sm);
 	outline: none;
 	line-height: var(--input-line-height);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background-color: var(--color-bg);
 	height: var(--input-height);
diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index a45313ccb..3cc3e2a04 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -51,7 +51,7 @@
 
 .modeButton {
 	padding: var(--s-1);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-full);
 	background-color: var(--color-bg);
 	color: var(--color-accent);
@@ -70,7 +70,7 @@
 }
 
 .modeButton.preselected {
-	border: 2px solid var(--color-text-accent);
+	border: var(--border-style-accent);
 	background-color: var(--color-bg-higher);
 }
 
diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index 0c5cf652a..08c6c8aea 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -103,7 +103,7 @@
 }
 
 .sideNavFooterButton:focus-visible {
-	outline: 2px solid var(--color-text-accent);
+	outline: var(--input-focus-ring);
 	outline-offset: -2px;
 }
 
diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 66f7d2e27..cbb650fbf 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -3,7 +3,7 @@
 	width: auto;
 	align-items: center;
 	justify-content: center;
-	border: 2px solid var(--color-text-accent);
+	border: var(--border-style-accent);
 	border-radius: var(--rounded-sm);
 	appearance: none;
 	background: var(--color-text-accent);
@@ -98,7 +98,7 @@
 }
 
 .minimal[data-focus-visible] {
-	outline: 2px solid var(--color-text-accent);
+	outline: var(--input-focus-ring);
 }
 
 .minimalSuccess {
diff --git a/app/components/elements/DatePicker.module.css b/app/components/elements/DatePicker.module.css
index 39b155955..e4978a1fa 100644
--- a/app/components/elements/DatePicker.module.css
+++ b/app/components/elements/DatePicker.module.css
@@ -1,7 +1,7 @@
 .group {
 	height: var(--input-height);
 	padding: 0 var(--input-padding-inline);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background-color: var(--color-bg);
 	outline: none;
@@ -15,7 +15,7 @@
 
 .root[data-open] .group {
 	border-color: transparent;
-	outline: 2px solid var(--color-text-accent);
+	outline: var(--input-focus-ring);
 }
 
 .dateInput {
diff --git a/app/components/elements/Dialog.module.css b/app/components/elements/Dialog.module.css
index 9bd3b8db5..e63f72430 100644
--- a/app/components/elements/Dialog.module.css
+++ b/app/components/elements/Dialog.module.css
@@ -76,7 +76,7 @@
 }
 
 .headingContainer {
-	border-bottom: 2px solid var(--color-border);
+	border-bottom: var(--border-style);
 	padding-block-end: var(--s-2);
 	margin-block-end: var(--s-4);
 	display: flex;
diff --git a/app/components/elements/Popover.module.css b/app/components/elements/Popover.module.css
index 9d93df7fb..5c9afb35b 100644
--- a/app/components/elements/Popover.module.css
+++ b/app/components/elements/Popover.module.css
@@ -1,7 +1,7 @@
 .content {
 	max-width: 20rem;
 	padding: var(--s-2);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded);
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
diff --git a/app/components/elements/Select.module.css b/app/components/elements/Select.module.css
index d5e27cbae..cbf577b79 100644
--- a/app/components/elements/Select.module.css
+++ b/app/components/elements/Select.module.css
@@ -1,7 +1,7 @@
 .button {
 	height: var(--input-height);
 	padding: 0 var(--input-padding-inline);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background-color: var(--color-bg);
 	outline: none;
@@ -54,7 +54,7 @@
 .popover {
 	padding: var(--s-1);
 	width: var(--trigger-width);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded);
 	background-color: var(--color-bg);
 	outline: none;
@@ -97,7 +97,7 @@
 	display: flex;
 	gap: var(--s-2);
 
-	border-bottom: 2px solid var(--color-border);
+	border-bottom: var(--border-style);
 	border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;
 	accent-color: var(--color-accent);
 	background-color: var(--color-bg);
diff --git a/app/components/elements/Switch.module.css b/app/components/elements/Switch.module.css
index 14889d2cb..948b373ac 100644
--- a/app/components/elements/Switch.module.css
+++ b/app/components/elements/Switch.module.css
@@ -17,7 +17,7 @@
 	width: calc(var(--height) * 1.75);
 	height: var(--height);
 	background: var(--color-bg);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: 99999px;
 
 	&:before {
@@ -44,7 +44,7 @@
 }
 
 .root[data-focus-visible] .indicator {
-	outline: 2px solid var(--color-accent-high);
+	outline: var(--input-focus-ring);
 	outline-offset: 1px;
 }
 
diff --git a/app/components/layout/CommandPalette.module.css b/app/components/layout/CommandPalette.module.css
index 35d434b65..4b25ecb9a 100644
--- a/app/components/layout/CommandPalette.module.css
+++ b/app/components/layout/CommandPalette.module.css
@@ -36,7 +36,6 @@
 
 .searchKbd {
 	padding: 2px var(--s-1);
-	border: 1px solid var(--color-border);
 	border-radius: var(--rounded-sm);
 	font-size: var(--fonts-xxs);
 	background-color: var(--color-bg-higher);
diff --git a/app/components/layout/TopRightButtons.module.css b/app/components/layout/TopRightButtons.module.css
index 04ab88bcd..d448fbf03 100644
--- a/app/components/layout/TopRightButtons.module.css
+++ b/app/components/layout/TopRightButtons.module.css
@@ -11,14 +11,14 @@
 	width: var(--input-height-small);
 	height: var(--input-height-small);
 	padding: 0.25rem;
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: 50%;
 	color: inherit;
 	cursor: pointer;
 }
 
 .button:focus-visible {
-	outline: 2px solid var(--color-text-accent);
+	outline: var(--input-focus-ring);
 	outline-offset: 1px;
 }
 
diff --git a/app/components/layout/UserItem.module.css b/app/components/layout/UserItem.module.css
index 1634b8007..f26dc7289 100644
--- a/app/components/layout/UserItem.module.css
+++ b/app/components/layout/UserItem.module.css
@@ -4,7 +4,7 @@
 }
 
 .userItem:focus-visible {
-	outline: 2px solid var(--color-text-accent);
+	outline: var(--input-focus-ring);
 }
 
 .avatar {
diff --git a/app/features/badges/components/BadgeDisplay.module.css b/app/features/badges/components/BadgeDisplay.module.css
index f31f783bc..7b55ee751 100644
--- a/app/features/badges/components/BadgeDisplay.module.css
+++ b/app/features/badges/components/BadgeDisplay.module.css
@@ -62,7 +62,7 @@
 	padding: var(--s-1);
 	height: 24px;
 	width: 24px;
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	font-size: var(--fonts-xs);
 	color: var(--color-text-high);
 }
diff --git a/app/features/calendar/routes/calendar.module.css b/app/features/calendar/routes/calendar.module.css
index 2169d11ab..cb932048f 100644
--- a/app/features/calendar/routes/calendar.module.css
+++ b/app/features/calendar/routes/calendar.module.css
@@ -15,7 +15,7 @@
 .navigateButton {
 	all: unset;
 	background-color: var(--color-bg-higher);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
@@ -27,7 +27,7 @@
 }
 
 .navigateButton:focus-visible {
-	outline: 2px solid var(--color-text-accent);
+	outline: var(--input-focus-ring);
 }
 
 @media screen and (min-width: 600px) {
@@ -62,7 +62,7 @@
 }
 
 .dayHeader {
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background-color: var(--color-bg-high);
 	padding: var(--s-2);
@@ -73,7 +73,7 @@
 
 .dayHeaderToday {
 	background-color: var(--color-bg-higher);
-	border: 2px solid var(--color-border-high);
+	border: var(--border-style-high);
 }
 
 .dayHeaderWeekday {
diff --git a/app/features/chat/components/Chat.module.css b/app/features/chat/components/Chat.module.css
index bd9103997..90dec8bf2 100644
--- a/app/features/chat/components/Chat.module.css
+++ b/app/features/chat/components/Chat.module.css
@@ -32,7 +32,7 @@
 }
 
 .avatarWrapperStaff img {
-	border: 2px solid var(--color-text-accent);
+	border: var(--border-style-accent);
 	border-radius: 50%;
 }
 
@@ -92,7 +92,7 @@
 
 .roomButton {
 	border: 0;
-	border-bottom: 2px solid var(--color-border);
+	border-bottom: var(--border-style);
 	background-color: transparent;
 	color: var(--color-text-high);
 	border-radius: var(--rounded) var(--rounded) 0 0;
diff --git a/app/features/front-page/routes/index.module.css b/app/features/front-page/routes/index.module.css
index 4d7fa3d09..96ac9282f 100644
--- a/app/features/front-page/routes/index.module.css
+++ b/app/features/front-page/routes/index.module.css
@@ -336,7 +336,7 @@
 	background-color: var(--color-bg-high);
 	border-radius: var(--rounded);
 	padding: var(--s-4);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 }
 
 .postHeader {
diff --git a/app/features/map-planner/components/Planner.module.css b/app/features/map-planner/components/Planner.module.css
index 5eec47054..c17bb4537 100644
--- a/app/features/map-planner/components/Planner.module.css
+++ b/app/features/map-planner/components/Planner.module.css
@@ -6,7 +6,7 @@
 	display: flex;
 	align-items: center;
 	padding: var(--s-2);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-top: transparent;
 	border-radius: 0 0 var(--rounded) var(--rounded);
 	background-color: var(--color-bg);
@@ -53,7 +53,7 @@
 	top: 15%;
 	width: 150px;
 	max-height: 85vh;
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-left: transparent;
 	border-radius: 0 var(--rounded) var(--rounded) 0;
 	background: var(--color-bg);
diff --git a/app/features/scrims/components/ScrimCard.module.css b/app/features/scrims/components/ScrimCard.module.css
index 033e87322..8a990273a 100644
--- a/app/features/scrims/components/ScrimCard.module.css
+++ b/app/features/scrims/components/ScrimCard.module.css
@@ -1,5 +1,5 @@
 .card {
-	border: 1px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded);
 	overflow: hidden;
 	background-color: var(--color-bg);
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.module.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
index ced446e79..e4acc1d4b 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.module.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -15,7 +15,7 @@
 	max-height: min(1000px, 70vh);
 	-ms-overflow-style: none;
 	scrollbar-width: none;
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	overflow: scroll;
 	user-select: none;
diff --git a/app/features/tournament-organization/tournament-organization.module.css b/app/features/tournament-organization/tournament-organization.module.css
index 702a02155..fffb773a6 100644
--- a/app/features/tournament-organization/tournament-organization.module.css
+++ b/app/features/tournament-organization/tournament-organization.module.css
@@ -60,7 +60,7 @@
 	aspect-ratio: 1;
 	max-width: 28px;
 	max-height: 28px;
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	display: grid;
 	place-items: center;
 	font-size: var(--fonts-md);
@@ -97,7 +97,7 @@
 	font-size: var(--fonts-md);
 	font-weight: var(--bold);
 	color: var(--color-text-high);
-	border-bottom: 2px solid var(--color-border);
+	border-bottom: var(--border-style);
 	width: 100%;
 	padding-block: var(--s-1);
 }
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index c09f79826..c9e05fa49 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -35,7 +35,7 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	border-inline-start: 2px solid var(--color-text-accent);
+	border-inline-start: var(--border-style-accent);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	gap: var(--s-2);
@@ -63,7 +63,7 @@
 	display: grid;
 	grid-template-columns: max-content max-content max-content max-content;
 	border-radius: var(--rounded);
-	border: 2px solid var(--color-text-accent);
+	border: var(--border-style-accent);
 	width: max-content;
 	margin: 0 auto;
 	overflow: hidden;
@@ -253,7 +253,7 @@
 	height: 62px;
 	font-size: 32px;
 	border-radius: 100%;
-	border: 2px solid var(--color-text-accent);
+	border: var(--border-style-accent);
 	color: var(--color-text-accent);
 	display: grid;
 	place-items: center;
diff --git a/app/styles/common.css b/app/styles/common.css
index 0ff2a892d..b4108ff69 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -80,7 +80,7 @@ textarea:not([name="text"]) {
 	min-height: 5rem;
 	padding: var(--input-padding-block) var(--input-padding-inline);
 	line-height: var(--input-line-height);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background-color: var(--color-bg);
 	outline: none;
@@ -95,7 +95,7 @@ textarea:not([name="text"]) {
 input:not(.in-container) {
 	width: 100%;
 	box-sizing: border-box;
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background: var(--color-bg);
 	padding: 0 var(--input-padding-inline);
@@ -128,7 +128,7 @@ input[type="checkbox"] {
 	height: var(--selector-height);
 	border-radius: 5px;
 	background-color: var(--color-bg);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 
 	&:focus-within {
 		outline: none;
@@ -169,7 +169,7 @@ input[type="radio"] {
 	width: var(--selector-height);
 	height: var(--selector-height);
 	background-color: var(--color-bg);
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: 999999px;
 	padding: 0;
 
@@ -238,7 +238,7 @@ select {
 	all: unset;
 	width: 100%;
 	box-sizing: border-box;
-	border: 2px solid var(--color-border);
+	border: var(--border-style);
 	border-radius: var(--rounded-sm);
 	background-color: var(--color-bg);
 	cursor: pointer;
@@ -280,7 +280,7 @@ select {
 		}
 
 		background-color: var(--color-bg);
-		border: 2px solid var(--color-border);
+		border: var(--border-style);
 		border-radius: var(--rounded-sm);
 		padding: var(--s-1);
 		margin: 0.5rem;
diff --git a/app/styles/vars.css b/app/styles/vars.css
index cccb48d28..3ca9e690a 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -128,6 +128,8 @@ html {
 	--color-border: var(--color-base-5);
 	--color-border-high: var(--color-base-4);
 	--border-style: 2px solid var(--color-border);
+	--border-style-high: 2px solid var(--color-border-high);
+	--border-style-accent: 2px solid var(--color-text-accent);
 
 	--input-height-smaller: 1.25rem;
 	--input-height-small: 2rem;
@@ -136,7 +138,7 @@ html {
 	--input-padding-block: 0.5rem;
 	--input-padding-inline: 1rem;
 	--input-line-height: 1.2rem;
-	--input-focus-ring: 2px solid var(--color-text-accent);
+	--input-focus-ring: var(--border-style-accent);
 	--input-focus-ring-error: 2px solid var(--color-error);
 
 	--selector-height: 1.25rem;