From e9ba14c42a09849f33e5806d492b405bbff3e3bb Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Mon, 19 Jan 2026 18:55:54 +0100
Subject: [PATCH] New border radius vars

---
 app/components/Alert.module.css               |  2 +-
 app/components/BuildCard.module.css           |  2 +-
 app/components/Chart.module.css               |  4 +-
 app/components/CustomThemeSelector.module.css |  2 +-
 app/components/Input.module.css               |  6 +--
 app/components/MapPoolSelector.module.css     |  6 +--
 app/components/MobileNav.module.css           | 18 ++++----
 app/components/Section.module.css             |  2 +-
 app/components/SideNav.module.css             | 14 +++---
 app/components/StageSelect.module.css         |  2 +-
 app/components/SubNav.module.css              |  4 +-
 app/components/elements/Button.module.css     |  2 +-
 app/components/elements/Calendar.module.css   |  4 +-
 app/components/elements/DatePicker.module.css |  2 +-
 app/components/elements/Menu.module.css       |  4 +-
 app/components/elements/Popover.module.css    |  2 +-
 app/components/elements/Select.module.css     |  6 +--
 app/components/elements/Switch.module.css     |  4 +-
 app/components/elements/Toast.module.css      |  2 +-
 .../elements/TournamentSearch.module.css      |  4 +-
 app/components/elements/UserSearch.module.css |  2 +-
 .../layout/CommandPalette.module.css          | 12 ++---
 app/components/layout/Footer.module.css       |  2 +-
 app/components/layout/NavDialog.module.css    |  2 +-
 app/components/layout/TopNavMenus.module.css  |  6 +--
 app/components/layout/UserItem.module.css     |  2 +-
 app/components/layout/index.module.css        |  4 +-
 app/features/admin/routes/generate-images.tsx |  2 +-
 .../art/components/ArtGrid.module.css         |  2 +-
 app/features/badges/badges.module.css         |  2 +-
 .../badges/components/BadgeDisplay.module.css |  2 +-
 .../build-analyzer/routes/analyzer.module.css | 14 +++---
 .../components/FilterSection.module.css       |  2 +-
 app/features/builds/routes/builds.module.css  |  6 +--
 app/features/calendar/calendar-new.module.css |  2 +-
 .../calendar/components/Tags.module.css       |  2 +-
 .../components/TagsFormField.module.css       |  2 +-
 .../components/TournamentCard.module.css      | 10 ++---
 .../calendar/routes/calendar.module.css       |  6 +--
 app/features/chat/components/Chat.module.css  |  8 ++--
 .../front-page/routes/index.module.css        | 44 +++++++++----------
 app/features/img-upload/upload-constants.ts   |  2 +-
 app/features/info/routes/faq.module.css       |  2 +-
 .../lfg/components/LFGPost.module.css         |  8 ++--
 .../map-planner/components/Planner.module.css |  6 +--
 .../object-damage-calculator.module.css       | 10 ++---
 app/features/plus-suggestions/plus.module.css |  2 +-
 .../plus-voting-results.module.css            |  4 +-
 .../scrims/components/ScrimCard.module.css    |  2 +-
 .../scrims/routes/scrims.$id.module.css       |  6 +--
 .../components/ModeMapPoolPicker.module.css   |  4 +-
 .../routes/q.settings.module.css              |  2 +-
 .../sendouq/components/GroupCard.module.css   | 20 ++++-----
 .../sendouq/routes/q.looking.module.css       |  2 +-
 app/features/sendouq/routes/q.module.css      |  2 +-
 app/features/team/team.module.css             | 12 ++---
 .../components/TierRow.module.css             |  8 ++--
 .../tier-list-maker/components/TierRow.tsx    |  2 +-
 app/features/top-search/top-search.module.css |  6 +--
 .../components/Bracket/bracket.module.css     | 10 ++---
 .../BracketMapListDialog.module.css           |  4 +-
 .../tournament-bracket.module.css             | 38 ++++++++--------
 .../tournament-organization.module.css        |  6 +--
 .../routes/to.$id.subs.module.css             |  2 +-
 .../tournament/routes/to.$id.seeds.module.css | 12 ++---
 app/features/tournament/tournament.module.css | 22 +++++-----
 .../components/ParticipationPill.module.css   |  2 +-
 app/features/user-page/user-page.module.css   | 16 +++----
 app/features/vods/routes/vods.new.module.css  |  2 +-
 .../components/WeaponParamsTable.module.css   |  2 +-
 app/form/fields/ArrayFormField.module.css     |  4 +-
 .../fields/WeaponPoolFormField.module.css     |  2 +-
 app/styles/common.css                         | 42 +++++++++---------
 app/styles/elements.css                       |  8 ++--
 app/styles/utils.css                          |  8 ++--
 app/styles/vars.css                           | 10 ++---
 76 files changed, 256 insertions(+), 260 deletions(-)

diff --git a/app/components/Alert.module.css b/app/components/Alert.module.css
index f500fc585..454ae2f8e 100644
--- a/app/components/Alert.module.css
+++ b/app/components/Alert.module.css
@@ -3,7 +3,7 @@
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-info-low);
 	color: var(--color-info-high);
 	font-size: var(--fonts-sm);
diff --git a/app/components/BuildCard.module.css b/app/components/BuildCard.module.css
index e73216afb..1860e3e9f 100644
--- a/app/components/BuildCard.module.css
+++ b/app/components/BuildCard.module.css
@@ -3,7 +3,7 @@
 	display: flex;
 	flex-direction: column;
 	padding: var(--s-3);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	gap: var(--s-3);
 }
diff --git a/app/components/Chart.module.css b/app/components/Chart.module.css
index e3c27cb7c..123084fa0 100644
--- a/app/components/Chart.module.css
+++ b/app/components/Chart.module.css
@@ -2,12 +2,12 @@
 	height: var(--chart-height, 175px);
 	width: var(--chart-width);
 	background-color: var(--chart-bg, var(--color-bg-high));
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .tooltip {
 	border: var(--border-style);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 	padding: var(--s-1) var(--s-2);
 	font-weight: var(--semi-bold);
diff --git a/app/components/CustomThemeSelector.module.css b/app/components/CustomThemeSelector.module.css
index 97e14c099..f79961e13 100644
--- a/app/components/CustomThemeSelector.module.css
+++ b/app/components/CustomThemeSelector.module.css
@@ -4,7 +4,7 @@
 	gap: var(--s-6);
 	padding: var(--s-4);
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg-medium);
 	position: relative;
 	overflow: hidden;
diff --git a/app/components/Input.module.css b/app/components/Input.module.css
index 6a23f8afc..6b72fdfee 100644
--- a/app/components/Input.module.css
+++ b/app/components/Input.module.css
@@ -4,7 +4,7 @@
 	outline: none;
 	line-height: var(--field-line-height);
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
 	height: var(--field-height);
 	width: 100%;
@@ -27,7 +27,7 @@
 	}
 
 	input {
-		border-radius: var(--rounded-sm);
+		border-radius: var(--radius-field);
 		padding: 0 var(--field-padding-inline);
 		outline: none;
 		width: 100%;
@@ -50,7 +50,7 @@
 
 .addon {
 	display: grid;
-	border-radius: var(--rounded-xs) 0 0 var(--rounded-xs);
+	border-radius: var(--radius-field) 0 0 var(--radius-field);
 	background-color: var(--color-bg-high);
 	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index 89eff2524..1e52b0588 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -23,7 +23,7 @@
 	flex-grow: 1;
 	align-items: center;
 	justify-content: space-between;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
@@ -39,7 +39,7 @@
 }
 
 .stageImage {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .modeButtonsContainer {
@@ -52,7 +52,7 @@
 .modeButton {
 	padding: var(--s-1);
 	border: var(--border-style);
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	background-color: var(--color-bg);
 	color: var(--color-accent);
 	opacity: 1 !important;
diff --git a/app/components/MobileNav.module.css b/app/components/MobileNav.module.css
index 327b460bc..ee9c4d06b 100644
--- a/app/components/MobileNav.module.css
+++ b/app/components/MobileNav.module.css
@@ -33,7 +33,7 @@
 	aspect-ratio: 1 / 1;
 	background: none;
 	border: none;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxxs);
 	font-weight: var(--semi-bold);
@@ -125,7 +125,7 @@
 	right: 0;
 	height: 85vh;
 	background-color: var(--color-bg);
-	border-radius: var(--rounded) var(--rounded) 0 0;
+	border-radius: var(--radius-box) var(--radius-box) 0 0;
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
@@ -241,7 +241,7 @@
 	align-items: center;
 	gap: var(--s-2);
 	padding: var(--s-1) var(--s-2);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 }
 
 .streamItem:hover {
@@ -251,7 +251,7 @@
 .streamItemImage {
 	width: 32px;
 	height: 32px;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	object-fit: cover;
 	flex-shrink: 0;
 }
@@ -292,7 +292,7 @@
 	color: var(--color-text-inverse);
 	background-color: var(--color-text-accent);
 	padding: 0 var(--s-1);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	flex-shrink: 0;
 }
 
@@ -324,7 +324,7 @@
 .navItemImage {
 	width: 48px;
 	height: 48px;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg-higher);
 	display: grid;
 	place-items: center;
@@ -344,7 +344,7 @@
 	padding: var(--s-2);
 	text-decoration: none;
 	color: var(--color-text);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 }
 
 .youPanelUser:hover {
@@ -363,7 +363,7 @@
 	padding: var(--s-2);
 	text-decoration: none;
 	color: var(--color-text-high);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 }
 
 .youPanelSettingsButton:hover {
@@ -440,7 +440,7 @@
 	align-items: center;
 	justify-content: center;
 	padding: var(--s-0-5);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 }
 
 .weaponLink:active {
diff --git a/app/components/Section.module.css b/app/components/Section.module.css
index f4ef3b666..90eba47d4 100644
--- a/app/components/Section.module.css
+++ b/app/components/Section.module.css
@@ -1,7 +1,7 @@
 .section {
 	& > div {
 		padding: var(--s-2);
-		border-radius: var(--rounded);
+		border-radius: var(--radius-box);
 		background-color: var(--color-bg);
 	}
 
diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index 424331fb0..775458f9b 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -60,7 +60,7 @@
 	text-decoration: none;
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	padding: var(--s-1);
 	margin-left: calc(-1 * var(--s-1));
 	flex: 1;
@@ -92,7 +92,7 @@
 	height: var(--field-height-small);
 	padding: 0;
 	border: none;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	color: var(--color-text-high);
 	cursor: pointer;
 }
@@ -224,7 +224,7 @@
 
 .iconContainer {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	padding: var(--s-1-5);
 }
 
@@ -233,7 +233,7 @@
 	color: var(--color-text);
 	text-decoration: none;
 	padding: var(--s-1) var(--s-2);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	transition:
 		background-color 0.15s,
 		color 0.15s;
@@ -258,7 +258,7 @@
 .sideNavLinkImage {
 	width: 32px;
 	height: 32px;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	object-fit: cover;
 	flex-shrink: 0;
 }
@@ -303,7 +303,7 @@
 	color: var(--color-text-inverse);
 	background-color: var(--color-text-accent);
 	padding: 0 var(--s-1);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-selector);
 	flex-shrink: 0;
 	text-transform: uppercase;
 }
@@ -340,7 +340,7 @@
 	transform: translateY(-50%);
 	max-height: 90vh;
 	overflow-y: auto;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .sideNavPanel[data-entering] {
diff --git a/app/components/StageSelect.module.css b/app/components/StageSelect.module.css
index f3c5b340b..ddfe69cb7 100644
--- a/app/components/StageSelect.module.css
+++ b/app/components/StageSelect.module.css
@@ -5,7 +5,7 @@
 }
 
 .stageImg {
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .stageLabel {
diff --git a/app/components/SubNav.module.css b/app/components/SubNav.module.css
index 8d0bdf71f..f2e1ddae9 100644
--- a/app/components/SubNav.module.css
+++ b/app/components/SubNav.module.css
@@ -27,7 +27,7 @@
 .link {
 	width: 100%;
 	padding: var(--s-1) var(--s-4);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	cursor: pointer;
 	font-size: var(--fonts-xs);
@@ -48,7 +48,7 @@
 .borderGuy {
 	width: 78%;
 	height: 3px;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-higher);
 	visibility: hidden;
 }
diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 706b834e8..21990bd92 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -4,7 +4,7 @@
 	align-items: center;
 	justify-content: center;
 	border: var(--border-style-accent);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	appearance: none;
 	background: var(--color-text-accent);
 	color: var(--color-text-inverse);
diff --git a/app/components/elements/Calendar.module.css b/app/components/elements/Calendar.module.css
index e0f754d71..3be05b57c 100644
--- a/app/components/elements/Calendar.module.css
+++ b/app/components/elements/Calendar.module.css
@@ -1,6 +1,6 @@
 .root {
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-4);
 	border: var(--border-style);
 	max-width: fit-content;
@@ -51,7 +51,7 @@
 	padding: var(--s-1-5);
 	width: 35px;
 	height: 35px;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	outline-color: var(--color-accent);
 
 	&:focus-visible {
diff --git a/app/components/elements/DatePicker.module.css b/app/components/elements/DatePicker.module.css
index 198f4d8ae..5518b7d01 100644
--- a/app/components/elements/DatePicker.module.css
+++ b/app/components/elements/DatePicker.module.css
@@ -2,7 +2,7 @@
 	height: var(--field-height);
 	padding: 0 var(--field-padding-inline);
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
 	outline: none;
 	display: flex;
diff --git a/app/components/elements/Menu.module.css b/app/components/elements/Menu.module.css
index ce678e843..c314c1804 100644
--- a/app/components/elements/Menu.module.css
+++ b/app/components/elements/Menu.module.css
@@ -1,5 +1,5 @@
 .popover {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	border: var(--border-style);
 	width: max-content;
@@ -35,7 +35,7 @@
 	color: var(--color-text);
 	white-space: nowrap;
 	gap: var(--s-2);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	padding: var(--s-1-5) var(--s-2-5);
 	background-color: var(--color-bg-high);
 	width: 100%;
diff --git a/app/components/elements/Popover.module.css b/app/components/elements/Popover.module.css
index 5c9afb35b..240355b8b 100644
--- a/app/components/elements/Popover.module.css
+++ b/app/components/elements/Popover.module.css
@@ -2,7 +2,7 @@
 	max-width: 20rem;
 	padding: var(--s-2);
 	border: var(--border-style);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
 	white-space: pre-wrap;
diff --git a/app/components/elements/Select.module.css b/app/components/elements/Select.module.css
index 6ce08f8e0..d6810a80a 100644
--- a/app/components/elements/Select.module.css
+++ b/app/components/elements/Select.module.css
@@ -2,7 +2,7 @@
 	height: var(--field-height);
 	padding: 0 var(--field-padding-inline);
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
 	outline: none;
 
@@ -55,7 +55,7 @@
 	padding: var(--s-1);
 	width: var(--trigger-width);
 	border: var(--border-style);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 	outline: none;
 
@@ -72,7 +72,7 @@
 	font-size: var(--fonts-xsm);
 	font-weight: var(--semi-bold);
 	padding: var(--s-1-5);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
diff --git a/app/components/elements/Switch.module.css b/app/components/elements/Switch.module.css
index 65a41382c..c37b4302d 100644
--- a/app/components/elements/Switch.module.css
+++ b/app/components/elements/Switch.module.css
@@ -18,7 +18,7 @@
 	height: var(--height);
 	background: var(--color-bg);
 	border: var(--border-style);
-	border-radius: 99999px;
+	border-radius: calc(var(--radius-selector) * 2);
 
 	&:before {
 		content: "";
@@ -28,7 +28,7 @@
 		height: calc(var(--height) - 8px);
 		aspect-ratio: 1 / 1;
 		background: var(--color-border);
-		border-radius: 50%;
+		border-radius: var(--radius-selector);
 		transition: transform 200ms;
 	}
 }
diff --git a/app/components/elements/Toast.module.css b/app/components/elements/Toast.module.css
index f6b0875b0..0519b1ae2 100644
--- a/app/components/elements/Toast.module.css
+++ b/app/components/elements/Toast.module.css
@@ -10,7 +10,7 @@
 
 .toast {
 	background: var(--color-info-low);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-1-5) var(--s-3);
 	align-items: center;
 	justify-content: center;
diff --git a/app/components/elements/TournamentSearch.module.css b/app/components/elements/TournamentSearch.module.css
index af06c8411..60896c276 100644
--- a/app/components/elements/TournamentSearch.module.css
+++ b/app/components/elements/TournamentSearch.module.css
@@ -2,7 +2,7 @@
 	font-size: var(--fonts-xsm);
 	font-weight: var(--semi-bold);
 	padding: var(--s-1-5);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	height: 33px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -66,6 +66,6 @@ button .itemAdditionalText {
 .logo {
 	width: 24px;
 	height: 24px;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	object-fit: cover;
 }
diff --git a/app/components/elements/UserSearch.module.css b/app/components/elements/UserSearch.module.css
index 9fcd857d4..37cb9e4d6 100644
--- a/app/components/elements/UserSearch.module.css
+++ b/app/components/elements/UserSearch.module.css
@@ -2,7 +2,7 @@
 	font-size: var(--fonts-xsm);
 	font-weight: var(--semi-bold);
 	padding: var(--s-1-5);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	height: 33px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
diff --git a/app/components/layout/CommandPalette.module.css b/app/components/layout/CommandPalette.module.css
index c6e633a77..85fa2289d 100644
--- a/app/components/layout/CommandPalette.module.css
+++ b/app/components/layout/CommandPalette.module.css
@@ -4,7 +4,7 @@
 	gap: var(--s-2);
 	padding: 0 var(--s-3);
 	border: 1px solid var(--color-border);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
 	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
@@ -35,7 +35,7 @@
 
 .searchKbd {
 	padding: 2px var(--s-1);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-xxs);
 	background-color: var(--color-bg-higher);
 	font-family: inherit;
@@ -70,7 +70,7 @@
 	width: 100%;
 	max-width: 32rem;
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	box-shadow:
 		0 10px 15px -3px rgba(0, 0, 0, 0.1),
 		0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -125,7 +125,7 @@
 
 .listBoxItem {
 	padding: var(--s-2) var(--s-3);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	cursor: pointer;
 	font-size: var(--fonts-sm);
 	outline: none;
@@ -159,7 +159,7 @@
 	align-items: center;
 	gap: var(--s-1);
 	padding: var(--s-1) var(--s-2);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-xs);
 	cursor: pointer;
 	border: 1px solid var(--color-border);
@@ -216,7 +216,7 @@
 }
 
 .resultLogo {
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	object-fit: cover;
 }
 
diff --git a/app/components/layout/Footer.module.css b/app/components/layout/Footer.module.css
index 8dfc72a18..9b3a2f170 100644
--- a/app/components/layout/Footer.module.css
+++ b/app/components/layout/Footer.module.css
@@ -29,7 +29,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: var(--s-4);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-higher);
 	cursor: pointer;
 	font-size: var(--fonts-lg);
diff --git a/app/components/layout/NavDialog.module.css b/app/components/layout/NavDialog.module.css
index 420bffbf4..34d81ae1c 100644
--- a/app/components/layout/NavDialog.module.css
+++ b/app/components/layout/NavDialog.module.css
@@ -62,7 +62,7 @@
 	display: grid;
 	width: 75px;
 	height: 75px;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	color: var(--color-text);
 	place-items: center;
diff --git a/app/components/layout/TopNavMenus.module.css b/app/components/layout/TopNavMenus.module.css
index 11302b58c..f302abdee 100644
--- a/app/components/layout/TopNavMenus.module.css
+++ b/app/components/layout/TopNavMenus.module.css
@@ -10,7 +10,7 @@
 	padding: 0 var(--s-2);
 	height: var(--field-height-small);
 	border: none;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background: transparent;
 	color: var(--color-text);
 	font-size: var(--fonts-xs);
@@ -39,7 +39,7 @@
 	align-items: center;
 	gap: var(--s-2);
 	padding: var(--s-1-5) var(--s-2);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	color: var(--color-text);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
@@ -98,7 +98,7 @@
 	align-items: center;
 	justify-content: center;
 	padding: var(--s-0-5);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	transition:
 		background-color 0.15s,
 		color 0.15s;
diff --git a/app/components/layout/UserItem.module.css b/app/components/layout/UserItem.module.css
index 953dcadcd..7e4e9b154 100644
--- a/app/components/layout/UserItem.module.css
+++ b/app/components/layout/UserItem.module.css
@@ -21,7 +21,7 @@
 	padding: 0.5rem;
 	border: 2px solid;
 	border-color: var(--color-text-accent);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: transparent;
 	color: inherit;
 	cursor: pointer;
diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index 57c5529c0..084b5d59f 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -32,7 +32,7 @@
 	width: 36px;
 	height: 36px;
 	background-color: var(--color-accent);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-lg);
 	font-weight: var(--bold);
 	color: var(--color-text);
@@ -136,7 +136,7 @@
 		width: 36px;
 		height: 36px;
 		background-color: var(--color-accent);
-		border-radius: var(--rounded-xs);
+		border-radius: var(--radius-field);
 		font-size: var(--fonts-lg);
 		font-weight: var(--bold);
 		color: var(--color-text);
diff --git a/app/features/admin/routes/generate-images.tsx b/app/features/admin/routes/generate-images.tsx
index 29aa13f94..f0c6c1b22 100644
--- a/app/features/admin/routes/generate-images.tsx
+++ b/app/features/admin/routes/generate-images.tsx
@@ -106,7 +106,7 @@ function InfoSquare({
 				style={{
 					width: "12rem",
 					height: "12rem",
-					borderRadius: "var(--rounded)",
+					borderRadius: "var(--radius-box)",
 					marginTop: "1rem",
 					display: "grid",
 					placeItems: "center",
diff --git a/app/features/art/components/ArtGrid.module.css b/app/features/art/components/ArtGrid.module.css
index 4525f0985..1ff56b56d 100644
--- a/app/features/art/components/ArtGrid.module.css
+++ b/app/features/art/components/ArtGrid.module.css
@@ -9,7 +9,7 @@
 
 .dialogTag {
 	background-color: #fff;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	color: #000;
 	font-size: var(--fonts-xxs);
 	padding-inline: var(--s-1);
diff --git a/app/features/badges/badges.module.css b/app/features/badges/badges.module.css
index 113568fdd..f54c0829f 100644
--- a/app/features/badges/badges.module.css
+++ b/app/features/badges/badges.module.css
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-badge);
 	color: var(--color-text-high);
 	gap: var(--s-6);
diff --git a/app/features/badges/components/BadgeDisplay.module.css b/app/features/badges/components/BadgeDisplay.module.css
index 7b55ee751..01f899920 100644
--- a/app/features/badges/components/BadgeDisplay.module.css
+++ b/app/features/badges/components/BadgeDisplay.module.css
@@ -5,7 +5,7 @@
 	min-height: 12rem;
 	align-items: center;
 	padding: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-badge);
 	margin-inline: auto;
 }
diff --git a/app/features/build-analyzer/routes/analyzer.module.css b/app/features/build-analyzer/routes/analyzer.module.css
index f774ed7bf..d50180d34 100644
--- a/app/features/build-analyzer/routes/analyzer.module.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -52,7 +52,7 @@
 
 .apSummary {
 	width: 100%;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
@@ -64,7 +64,7 @@
 	display: flex;
 	width: 100%;
 	align-items: center;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-accent-low);
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
@@ -80,7 +80,7 @@
 }
 
 .summary {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-md);
 	font-weight: var(--bold);
@@ -99,7 +99,7 @@
 	gap: var(--s-2);
 	align-items: center;
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-field);
 	padding: var(--s-1) var(--s-3);
 	margin-inline-start: auto;
 	position: absolute;
@@ -132,7 +132,7 @@
 	flex-direction: column;
 	justify-content: space-between;
 	padding: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	gap: var(--s-4);
 }
@@ -205,7 +205,7 @@
 .tableContainer {
 	width: 100%;
 	padding: var(--s-3);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	margin-block-start: var(--s-4);
 	padding-block: var(--s-2);
@@ -234,7 +234,7 @@
 }
 
 .patch {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
 	font-size: var(--fonts-xxxs);
diff --git a/app/features/builds/components/FilterSection.module.css b/app/features/builds/components/FilterSection.module.css
index 75ac5f9ac..909921a77 100644
--- a/app/features/builds/components/FilterSection.module.css
+++ b/app/features/builds/components/FilterSection.module.css
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	padding: var(--s-2-5);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	gap: var(--s-2);
 }
diff --git a/app/features/builds/routes/builds.module.css b/app/features/builds/routes/builds.module.css
index 752e273e2..15a14083e 100644
--- a/app/features/builds/routes/builds.module.css
+++ b/app/features/builds/routes/builds.module.css
@@ -2,7 +2,7 @@
 	height: 20px;
 	margin: auto 0;
 	width: 4px;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-higher);
 }
 
@@ -10,7 +10,7 @@
 	display: flex;
 	flex-direction: column;
 	padding: var(--s-3);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-sm);
 	font-weight: 600;
@@ -39,6 +39,6 @@
 }
 
 .categoryWeaponImg {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 }
diff --git a/app/features/calendar/calendar-new.module.css b/app/features/calendar/calendar-new.module.css
index 29be9cf30..25cb0227a 100644
--- a/app/features/calendar/calendar-new.module.css
+++ b/app/features/calendar/calendar-new.module.css
@@ -9,7 +9,7 @@
 .badges {
 	width: max-content;
 	padding: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-badge);
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
diff --git a/app/features/calendar/components/Tags.module.css b/app/features/calendar/components/Tags.module.css
index e10a5fdba..482571b1f 100644
--- a/app/features/calendar/components/Tags.module.css
+++ b/app/features/calendar/components/Tags.module.css
@@ -24,7 +24,7 @@
 .tags > li {
 	display: flex;
 	align-items: center;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding-inline: var(--s-1-5);
 	min-height: 20px;
 }
diff --git a/app/features/calendar/components/TagsFormField.module.css b/app/features/calendar/components/TagsFormField.module.css
index 1ea749372..aeffbe75e 100644
--- a/app/features/calendar/components/TagsFormField.module.css
+++ b/app/features/calendar/components/TagsFormField.module.css
@@ -11,7 +11,7 @@
 .tag {
 	cursor: pointer;
 	border: 2px solid var(--tag-color);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
 	display: grid;
diff --git a/app/features/calendar/components/TournamentCard.module.css b/app/features/calendar/components/TournamentCard.module.css
index 4307e72dd..0dd221bd8 100644
--- a/app/features/calendar/components/TournamentCard.module.css
+++ b/app/features/calendar/components/TournamentCard.module.css
@@ -14,7 +14,7 @@
 
 .card {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	color: var(--color-text);
 	padding: var(--s-1) var(--s-2) var(--s-2) var(--s-2);
 	height: 100%;
@@ -73,7 +73,7 @@
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-selector);
 	width: max-content;
 	padding: var(--s-0-5) var(--s-1-5);
 	display: flex;
@@ -91,7 +91,7 @@
 
 .modesPill {
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-selector);
 	width: max-content;
 	padding: 0 var(--s-1-5);
 	display: flex;
@@ -116,7 +116,7 @@
 .pill {
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-selector);
 	padding: var(--s-0-5) var(--s-1-5);
 	display: grid;
 	place-items: center;
@@ -156,6 +156,6 @@
 
 .badgePill {
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-selector);
 	padding: var(--s-0-5) var(--s-1-5);
 }
diff --git a/app/features/calendar/routes/calendar.module.css b/app/features/calendar/routes/calendar.module.css
index a64d8f80d..0ab3b75dc 100644
--- a/app/features/calendar/routes/calendar.module.css
+++ b/app/features/calendar/routes/calendar.module.css
@@ -20,7 +20,7 @@
 	align-items: center;
 	gap: var(--s-2);
 	font-weight: var(--bold);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	padding: var(--s-1) var(--s-2);
 	font-size: var(--fonts-xs);
 	flex: 1 1 0;
@@ -63,7 +63,7 @@
 
 .dayHeader {
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	padding: var(--s-2);
 	text-align: center;
@@ -98,7 +98,7 @@
 	width: 100%;
 	height: 3px;
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .hiddenEventsButton svg {
diff --git a/app/features/chat/components/Chat.module.css b/app/features/chat/components/Chat.module.css
index 7d09358b8..287d9f1e0 100644
--- a/app/features/chat/components/Chat.module.css
+++ b/app/features/chat/components/Chat.module.css
@@ -46,7 +46,7 @@
 	font-size: var(--fonts-xxxxs);
 	font-weight: var(--bold);
 	padding: 1px 4px;
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	white-space: nowrap;
 }
 
@@ -56,7 +56,7 @@
 	font-size: var(--fonts-xxxs);
 	font-weight: var(--semi-bold);
 	padding: 1px 5px;
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	white-space: nowrap;
 }
 
@@ -95,7 +95,7 @@
 	border-bottom: var(--border-style);
 	background-color: transparent;
 	color: var(--color-text-high);
-	border-radius: var(--rounded) var(--rounded) 0 0;
+	border-radius: var(--radius-box) var(--radius-box) 0 0;
 	padding: var(--s-1) var(--s-1);
 	border-color: var(--color-bg-high);
 	font-size: var(--fonts-xs);
@@ -133,7 +133,7 @@
 	position: absolute;
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg-higher);
 	border: none;
 	color: var(--color-text);
diff --git a/app/features/front-page/routes/index.module.css b/app/features/front-page/routes/index.module.css
index b173d6972..925b6e547 100644
--- a/app/features/front-page/routes/index.module.css
+++ b/app/features/front-page/routes/index.module.css
@@ -13,7 +13,7 @@
 
 .frontPageSideNav picture {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-1);
 }
 
@@ -41,7 +41,7 @@
 
 .frontPageSideNavLogOut svg {
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	min-width: 28px;
 	margin-inline-end: 0 !important;
 	padding: var(--s-1-5);
@@ -72,7 +72,7 @@
 
 .changeLogImg {
 	max-height: 300px;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .changeLogIconButton {
@@ -117,7 +117,7 @@
 		var(--l),
 		var(--color-bg)
 	);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-2) var(--s-3);
 	line-height: 1.35;
 	position: relative;
@@ -150,7 +150,7 @@
 
 .seasonBannerLink {
 	background-color: var(--color-text-accent);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	width: max-content;
 	padding: 0 var(--field-padding-inline);
 	font-size: var(--fonts-xs);
@@ -192,7 +192,7 @@
 .tournamentCardsViewAllCard {
 	background-color: var(--color-bg-high);
 	height: var(--card-height);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	display: grid;
 	place-items: center;
 	padding: var(--s-2);
@@ -235,7 +235,7 @@
 	min-width: var(--card-width);
 	max-width: var(--card-width);
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-2);
@@ -255,7 +255,7 @@
 	font-size: var(--fonts-xxs);
 	color: var(--color-text);
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	width: max-content;
 	padding-inline: var(--s-2);
 	display: flex;
@@ -266,7 +266,7 @@
 .lutiBanner {
 	background-color: #4874a0;
 	color: #fff;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-2);
 	justify-content: center;
 	display: flex;
@@ -308,7 +308,7 @@
 .filterBtn {
 	background-color: var(--color-bg-high);
 	border: none;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-1-5) var(--s-3);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
@@ -334,7 +334,7 @@
 
 .feedPost {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-4);
 	border: var(--border-style);
 }
@@ -367,7 +367,7 @@
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
 	padding: var(--s-1) var(--s-2);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	text-transform: uppercase;
 }
 
@@ -437,7 +437,7 @@
 	align-items: center;
 	gap: var(--s-3);
 	padding: var(--s-2) var(--s-3);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .matchWin {
@@ -483,7 +483,7 @@
 .matchStageImg {
 	width: 80px;
 	height: 45px;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	object-fit: cover;
 }
 
@@ -594,7 +594,7 @@
 	justify-content: space-between;
 	background-color: var(--color-bg-higher);
 	padding: var(--s-2) var(--s-3);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .teamName {
@@ -641,7 +641,7 @@
 .abilityTag {
 	background-color: var(--color-bg-higher);
 	padding: var(--s-1) var(--s-2);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
 }
@@ -676,7 +676,7 @@
 	background-color: var(--color-success-low);
 	color: var(--color-success);
 	padding: var(--s-0-5) var(--s-2);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	text-transform: uppercase;
 }
 
@@ -692,7 +692,7 @@
 	gap: var(--s-2);
 	background-color: var(--color-bg-higher);
 	padding: var(--s-2);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .memberInfo {
@@ -815,7 +815,7 @@
 	background-color: var(--color-accent);
 	color: var(--color-text-inverse);
 	border: none;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	padding: var(--s-2) var(--s-4);
 	font-size: var(--fonts-xs);
 	font-weight: var(--bold);
@@ -920,7 +920,7 @@
 .artImage {
 	width: 80px;
 	height: 80px;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	object-fit: cover;
 }
 
@@ -937,7 +937,7 @@
 	gap: var(--s-1);
 	background-color: var(--color-bg-higher);
 	padding: var(--s-3);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .replayCodeLabel {
@@ -971,7 +971,7 @@
 .replayStageImg {
 	width: 80px;
 	height: 45px;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	object-fit: cover;
 }
 
diff --git a/app/features/img-upload/upload-constants.ts b/app/features/img-upload/upload-constants.ts
index af01c9de9..ed6a66ef5 100644
--- a/app/features/img-upload/upload-constants.ts
+++ b/app/features/img-upload/upload-constants.ts
@@ -18,5 +18,5 @@ export const imgTypeToDimensions: Record<
 export const imgTypeToStyle: Record<ImageUploadType, React.CSSProperties> = {
 	"team-pfp": { borderRadius: "100%", width: "144px", height: "144px" },
 	"org-pfp": { borderRadius: "100%", width: "144px", height: "144px" },
-	"team-banner": { borderRadius: "var(--rounded)", width: "100%" },
+	"team-banner": { borderRadius: "var(--radius-box)", width: "100%" },
 };
diff --git a/app/features/info/routes/faq.module.css b/app/features/info/routes/faq.module.css
index 2570e344a..6c4c6afff 100644
--- a/app/features/info/routes/faq.module.css
+++ b/app/features/info/routes/faq.module.css
@@ -1,6 +1,6 @@
 .summary {
 	padding: var(--s-3);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-lg);
 	font-weight: var(--bold);
diff --git a/app/features/lfg/components/LFGPost.module.css b/app/features/lfg/components/LFGPost.module.css
index d55c12f78..22468a543 100644
--- a/app/features/lfg/components/LFGPost.module.css
+++ b/app/features/lfg/components/LFGPost.module.css
@@ -85,7 +85,7 @@
 .pill {
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-selector);
 	background-color: var(--color-bg-higher);
 	padding: var(--s-0-5) var(--s-2);
 	display: flex;
@@ -102,7 +102,7 @@
 .editButton {
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-selector);
 	background-color: var(--color-bg-higher);
 	padding: var(--s-0-5) var(--s-2);
 	color: var(--color-text);
@@ -127,9 +127,9 @@
 }
 
 .tierPillStart {
-	border-radius: 0 var(--rounded) var(--rounded) 0;
+	border-radius: 0 var(--radius-box) var(--radius-box) 0;
 }
 
 .tierPillEnd {
-	border-radius: var(--rounded) 0 0 var(--rounded);
+	border-radius: var(--radius-box) 0 0 var(--radius-box);
 }
diff --git a/app/features/map-planner/components/Planner.module.css b/app/features/map-planner/components/Planner.module.css
index c17bb4537..7b73826ac 100644
--- a/app/features/map-planner/components/Planner.module.css
+++ b/app/features/map-planner/components/Planner.module.css
@@ -8,7 +8,7 @@
 	padding: var(--s-2);
 	border: var(--border-style);
 	border-top: transparent;
-	border-radius: 0 0 var(--rounded) var(--rounded);
+	border-radius: 0 0 var(--radius-box) var(--radius-box);
 	background-color: var(--color-bg);
 	gap: var(--s-2);
 	transform: translate(-50%, 0);
@@ -55,7 +55,7 @@
 	max-height: 85vh;
 	border: var(--border-style);
 	border-left: transparent;
-	border-radius: 0 var(--rounded) var(--rounded) 0;
+	border-radius: 0 var(--radius-box) var(--radius-box) 0;
 	background: var(--color-bg);
 	gap: 2px;
 	overflow-y: auto;
@@ -112,7 +112,7 @@
 	justify-content: center;
 	padding: var(--s-0-5);
 	border: none;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background: transparent;
 	cursor: grab;
 	touch-action: none;
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
index 76e83b50d..153e5d6b4 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
@@ -47,7 +47,7 @@
 .tableHeader {
 	align-items: center;
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	display: flex;
 	flex-direction: column;
 	font-size: var(--fonts-xs);
@@ -78,7 +78,7 @@
 .receiverButton {
 	all: unset;
 	cursor: pointer;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .receiverButton:focus-visible {
@@ -88,7 +88,7 @@
 
 .receiverImage {
 	padding: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 }
 
@@ -97,7 +97,7 @@
 	width: 100%;
 	height: 100%;
 	padding: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
@@ -133,7 +133,7 @@
 }
 
 .patch {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
 	font-size: var(--fonts-xxxs);
diff --git a/app/features/plus-suggestions/plus.module.css b/app/features/plus-suggestions/plus.module.css
index e1f443d4d..e788d2185 100644
--- a/app/features/plus-suggestions/plus.module.css
+++ b/app/features/plus-suggestions/plus.module.css
@@ -112,7 +112,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-success-high);
 	color: var(--color-text);
 	font-size: var(--fonts-sm);
diff --git a/app/features/plus-voting/plus-voting-results.module.css b/app/features/plus-voting/plus-voting-results.module.css
index 569f9ffd7..d7ee7a32b 100644
--- a/app/features/plus-voting/plus-voting-results.module.css
+++ b/app/features/plus-voting/plus-voting-results.module.css
@@ -1,6 +1,6 @@
 .ownScores {
 	padding: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	margin: 0 auto;
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-sm);
@@ -52,7 +52,7 @@
 }
 
 .userStatus {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-accent);
 	color: var(--color-text-inverse);
 	font-size: var(--fonts-xs);
diff --git a/app/features/scrims/components/ScrimCard.module.css b/app/features/scrims/components/ScrimCard.module.css
index 8a990273a..847d4edd7 100644
--- a/app/features/scrims/components/ScrimCard.module.css
+++ b/app/features/scrims/components/ScrimCard.module.css
@@ -1,6 +1,6 @@
 .card {
 	border: var(--border-style);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	overflow: hidden;
 	background-color: var(--color-bg);
 	display: flex;
diff --git a/app/features/scrims/routes/scrims.$id.module.css b/app/features/scrims/routes/scrims.$id.module.css
index 172ab58e4..7b98869c6 100644
--- a/app/features/scrims/routes/scrims.$id.module.css
+++ b/app/features/scrims/routes/scrims.$id.module.css
@@ -11,7 +11,7 @@
 }
 
 .groupCard {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	padding: var(--s-2-5);
 	display: flex;
@@ -24,7 +24,7 @@
 	gap: var(--s-2);
 	align-items: center;
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	font-size: var(--fonts-xsm);
 	font-weight: var(--semi-bold);
 	padding-inline-end: var(--s-2-5);
@@ -46,7 +46,7 @@
 }
 
 .chatContainer {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	padding: var(--s-2-5);
 }
diff --git a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
index 90a64a520..c70b582a5 100644
--- a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
+++ b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
@@ -8,7 +8,7 @@
 	display: grid;
 	place-items: center;
 	color: var(--color-text-high);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	font-weight: var(--bold);
 	width: 24px;
 	height: 24px;
@@ -34,7 +34,7 @@
 	transition:
 		filter,
 		opacity 0.2s;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 @keyframes wiggle {
diff --git a/app/features/sendouq-settings/routes/q.settings.module.css b/app/features/sendouq-settings/routes/q.settings.module.css
index 5bda0c54f..2f12be9df 100644
--- a/app/features/sendouq-settings/routes/q.settings.module.css
+++ b/app/features/sendouq-settings/routes/q.settings.module.css
@@ -1,6 +1,6 @@
 .summary {
 	padding: var(--s-3);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-lg);
 	font-weight: var(--bold);
diff --git a/app/features/sendouq/components/GroupCard.module.css b/app/features/sendouq/components/GroupCard.module.css
index cdcf788fa..c0580925b 100644
--- a/app/features/sendouq/components/GroupCard.module.css
+++ b/app/features/sendouq/components/GroupCard.module.css
@@ -1,7 +1,7 @@
 .group {
 	background-color: var(--color-bg-high);
 	width: 100%;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-2-5);
 	display: flex;
 	flex-direction: column;
@@ -25,7 +25,7 @@
 	gap: var(--s-2);
 	align-items: center;
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-xsm);
 	font-weight: var(--semi-bold);
 	padding-inline-end: var(--s-2-5);
@@ -67,7 +67,7 @@
 .extraInfo {
 	font-size: var(--fonts-xs);
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-selector);
 	padding: 0 var(--s-1-5);
 	width: max-content;
 	display: flex;
@@ -85,7 +85,7 @@
 .extraInfoButton {
 	font-size: var(--fonts-xs);
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-0-5) var(--s-1-5);
 	width: max-content;
 	display: flex;
@@ -106,16 +106,12 @@
 	background-color: var(--color-bg);
 	white-space: nowrap;
 	height: 100%;
-	border-radius: var(--rounded);
-}
-
-.addNoteButtonEdit > svg {
-	color: var(--color-text-accent);
+	border-radius: var(--radius-selector);
 }
 
 .addNoteButton > svg {
-	width: 14px;
-	margin-inline-end: var(--s-1);
+	width: 18px;
+	height: 18px;
 }
 
 .noteTextarea {
@@ -155,7 +151,7 @@
 	gap: var(--s-1);
 	align-items: center;
 	position: absolute;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 	padding: var(--s-0-5) var(--s-2-5);
 	font-size: var(--fonts-xs);
diff --git a/app/features/sendouq/routes/q.looking.module.css b/app/features/sendouq/routes/q.looking.module.css
index 092bffad7..b1563f9df 100644
--- a/app/features/sendouq/routes/q.looking.module.css
+++ b/app/features/sendouq/routes/q.looking.module.css
@@ -36,5 +36,5 @@
 	padding: 2px;
 	background-color: var(--color-bg-high);
 	margin: 5px;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
diff --git a/app/features/sendouq/routes/q.module.css b/app/features/sendouq/routes/q.module.css
index e23957719..ef9c4646f 100644
--- a/app/features/sendouq/routes/q.module.css
+++ b/app/features/sendouq/routes/q.module.css
@@ -23,7 +23,7 @@
 
 .frontPageLink {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	padding: var(--s-2);
 	font-size: var(--fonts-sm);
 	color: var(--color-text);
diff --git a/app/features/team/team.module.css b/app/features/team/team.module.css
index fff6c1685..6405078c4 100644
--- a/app/features/team/team.module.css
+++ b/app/features/team/team.module.css
@@ -32,7 +32,7 @@
 	font-size: var(--fonts-xs);
 	color: var(--color-accent);
 	padding: var(--s-0-5) var(--s-1);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	margin-left: var(--s-2);
 	font-weight: var(--bold);
 }
@@ -62,7 +62,7 @@
 	display: grid;
 	grid-template-areas: "flags ." "avatar name";
 	padding: var(--s-5);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .bannerPlaceholder {
@@ -150,7 +150,7 @@
 	background-color: var(--color-accent-low);
 	color: var(--color-accent);
 	padding: var(--s-1) var(--s-1-5);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .bannerTagDesktop {
@@ -181,7 +181,7 @@
 	background-color: var(--color-bg-higher);
 	max-width: 32rem;
 	margin: 0 auto;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-1) var(--s-4);
 	font-weight: var(--bold);
 	font-size: var(--fonts-sm);
@@ -211,7 +211,7 @@
 
 .memberSection {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-2) var(--s-4);
 	font-size: var(--fonts-xl);
 	font-weight: var(--bold);
@@ -263,7 +263,7 @@
 	gap: var(--s-2);
 	padding: var(--s-3);
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	font-size: var(--fonts-lg);
 	font-weight: var(--bold);
 }
diff --git a/app/features/tier-list-maker/components/TierRow.module.css b/app/features/tier-list-maker/components/TierRow.module.css
index 722f0e752..5e51672ff 100644
--- a/app/features/tier-list-maker/components/TierRow.module.css
+++ b/app/features/tier-list-maker/components/TierRow.module.css
@@ -13,7 +13,7 @@
 	font-size: var(--fonts-lg);
 	font-weight: var(--bold);
 	color: var(--color-text);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	cursor: pointer;
 	transition: opacity 0.2s;
 	border: none;
@@ -49,7 +49,7 @@
 	padding: var(--s-2);
 	background: var(--color-bg-high);
 	border: 2px dashed transparent;
-	border-radius: var(--rounded-sm) 0 0 var(--rounded-sm);
+	border-radius: var(--radius-field) 0 0 var(--radius-field);
 	align-items: center;
 	align-content: center;
 	transition: all 0.2s;
@@ -96,11 +96,11 @@
 }
 
 .arrowButtonUpper {
-	border-radius: 0 var(--rounded-sm) 0 0;
+	border-radius: 0 var(--radius-field) 0 0;
 }
 
 .arrowButtonLower {
-	border-radius: 0 0 var(--rounded-sm) 0;
+	border-radius: 0 0 var(--radius-field) 0;
 }
 
 .arrowButton:hover:not(:disabled) {
diff --git a/app/features/tier-list-maker/components/TierRow.tsx b/app/features/tier-list-maker/components/TierRow.tsx
index bf8075fcb..e3f8e2d7c 100644
--- a/app/features/tier-list-maker/components/TierRow.tsx
+++ b/app/features/tier-list-maker/components/TierRow.tsx
@@ -147,7 +147,7 @@ export function TierRow({ tier }: TierRowProps) {
 			<div
 				ref={setNodeRef}
 				style={{
-					borderRadius: screenshotMode ? "var(--rounded-sm)" : undefined,
+					borderRadius: screenshotMode ? "var(--radius-field)" : undefined,
 				}}
 				className={clsx(styles.targetZone, {
 					[styles.targetZoneOver]: isOver,
diff --git a/app/features/top-search/top-search.module.css b/app/features/top-search/top-search.module.css
index a80bf820f..77c94920c 100644
--- a/app/features/top-search/top-search.module.css
+++ b/app/features/top-search/top-search.module.css
@@ -41,15 +41,15 @@ a.tableRow:hover {
 }
 
 .tableRow:first-of-type {
-	border-radius: var(--rounded) var(--rounded) 0 0;
+	border-radius: var(--radius-box) var(--radius-box) 0 0;
 }
 
 .tableRow:last-of-type {
-	border-radius: 0 0 var(--rounded) var(--rounded);
+	border-radius: 0 0 var(--radius-box) var(--radius-box);
 }
 
 .tableRow:only-child {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .tableRowQualification {
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.module.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
index e4acc1d4b..0b584265f 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.module.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -16,7 +16,7 @@
 	-ms-overflow-style: none;
 	scrollbar-width: none;
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	overflow: scroll;
 	user-select: none;
 }
@@ -32,7 +32,7 @@
 .matchHeaderBox {
 	background-color: var(--color-bg-higher);
 	padding: var(--s-0-5) var(--s-1);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-xxxs) !important;
 	font-weight: var(--semi-bold);
 	color: var(--color-text);
@@ -59,7 +59,7 @@
 	width: var(--match-width);
 	min-height: var(--match-height);
 	max-height: var(--match-height);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
@@ -74,7 +74,7 @@
 
 a.match:hover {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .matchSeparator {
@@ -152,7 +152,7 @@ a.match:hover {
 	font-weight: var(--semi-bold);
 	padding-block: var(--s-2);
 	width: var(--match-width);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .elimRoundHeaderInfos {
diff --git a/app/features/tournament-bracket/components/BracketMapListDialog.module.css b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
index f7796dfde..7b1c2d8ec 100644
--- a/app/features/tournament-bracket/components/BracketMapListDialog.module.css
+++ b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
@@ -71,7 +71,7 @@
 .roundControlsDivider {
 	width: 3px;
 	height: 2rem;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-higher);
 	margin-inline: var(--s-1);
 }
@@ -124,7 +124,7 @@
 .patternCode {
 	background-color: var(--color-bg-higher);
 	padding: 2px 6px;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	display: inline-block;
diff --git a/app/features/tournament-bracket/tournament-bracket.module.css b/app/features/tournament-bracket/tournament-bracket.module.css
index 65ac6f49c..557a383d1 100644
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -14,7 +14,7 @@
 .miniAlert {
 	background-color: var(--color-info-low);
 	font-size: var(--fonts-xxs);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-1) var(--s-2);
 }
 
@@ -25,8 +25,8 @@
 	justify-content: center;
 	margin-bottom: var(--s-3);
 	background: var(--color-bg-high);
-	border-end-end-radius: var(--rounded);
-	border-end-start-radius: var(--rounded);
+	border-end-end-radius: var(--radius-box);
+	border-end-start-radius: var(--radius-box);
 	color: var(--tournaments-text);
 	column-gap: var(--s-8);
 	font-size: var(--fonts-xsm);
@@ -41,8 +41,8 @@
 	width: 100%;
 	height: 10rem;
 	background-color: var(--color-bg-high);
-	border-start-end-radius: var(--rounded);
-	border-start-start-radius: var(--rounded);
+	border-start-end-radius: var(--radius-box);
+	border-start-start-radius: var(--radius-box);
 	grid-area: img;
 	display: grid;
 	place-items: center;
@@ -51,7 +51,7 @@
 }
 
 .lockedBannerLonely {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .stageBanner {
@@ -62,8 +62,8 @@
 	justify-content: space-between;
 	background-image: var(--_tournament-bg-url);
 	background-position: center;
-	border-start-end-radius: var(--rounded);
-	border-start-start-radius: var(--rounded);
+	border-start-end-radius: var(--radius-box);
+	border-start-start-radius: var(--radius-box);
 	grid-area: img;
 	background-repeat: no-repeat;
 	background-size: cover;
@@ -76,8 +76,8 @@
 	padding: var(--s-2);
 	backdrop-filter: blur(10px) brightness(95%);
 	background: rgb(0 0 0 / 40%);
-	border-start-end-radius: var(--rounded);
-	border-start-start-radius: var(--rounded);
+	border-start-end-radius: var(--radius-box);
+	border-start-start-radius: var(--radius-box);
 	font-size: var(--fonts-xs);
 	color: #fff;
 }
@@ -251,8 +251,8 @@
 	height: 1.5rem !important;
 	appearance: none;
 	background-color: var(--color-bg-higher);
-	border-end-start-radius: var(--rounded);
-	border-start-start-radius: var(--rounded);
+	border-end-start-radius: var(--radius-box);
+	border-start-start-radius: var(--radius-box);
 	cursor: pointer;
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
@@ -306,8 +306,8 @@
 	justify-content: center;
 	margin: 0;
 	background-color: var(--color-bg);
-	border-end-end-radius: var(--rounded);
-	border-start-end-radius: var(--rounded);
+	border-end-end-radius: var(--radius-box);
+	border-start-end-radius: var(--radius-box);
 	overflow-x: hidden;
 	text-overflow: ellipsis;
 	user-select: none;
@@ -453,7 +453,7 @@
 	font-size: var(--fonts-xs);
 	color: var(--color-text);
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	border: 2px solid var(--color-bg-higher);
 	padding-block: var(--s-1-5);
 	padding-inline: var(--s-2-5);
@@ -480,13 +480,13 @@
 	color: var(--color-text-high);
 	border-color: var(--color-bg-higher);
 	background-color: var(--color-bg);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .castInfoContainer {
 	display: flex;
 	gap: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	width: max-content;
 }
@@ -495,7 +495,7 @@
 	padding: var(--s-2) var(--s-3-5);
 	text-transform: uppercase;
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded) 0 0 var(--rounded);
+	border-radius: var(--radius-box) 0 0 var(--radius-box);
 	font-weight: var(--bold);
 	color: var(--color-text-high);
 	display: grid;
@@ -515,7 +515,7 @@
 
 .actionSectionWrapper [class*="tabPanel"] {
 	background-color: var(--color-bg-high);
-	border-radius: 0 0 var(--rounded) var(--rounded);
+	border-radius: 0 0 var(--radius-box) var(--radius-box);
 	padding: var(--s-4);
 }
 
diff --git a/app/features/tournament-organization/tournament-organization.module.css b/app/features/tournament-organization/tournament-organization.module.css
index fffb773a6..1caf2ed92 100644
--- a/app/features/tournament-organization/tournament-organization.module.css
+++ b/app/features/tournament-organization/tournament-organization.module.css
@@ -39,7 +39,7 @@
 
 .calendarDayLogo {
 	position: absolute;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	top: 50%;
 	left: 50%;
 	transform: translate(-15%, -20%);
@@ -51,7 +51,7 @@
 
 .calendarDayManyEvents {
 	position: absolute;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	top: 50%;
 	left: 50%;
 	transform: translate(-15%, -20%);
@@ -179,7 +179,7 @@
 	background-color: var(--color-bg-higher);
 	display: grid;
 	place-items: center;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-2);
 }
 
diff --git a/app/features/tournament-subs/routes/to.$id.subs.module.css b/app/features/tournament-subs/routes/to.$id.subs.module.css
index 3cb4a8d88..672ab470f 100644
--- a/app/features/tournament-subs/routes/to.$id.subs.module.css
+++ b/app/features/tournament-subs/routes/to.$id.subs.module.css
@@ -16,7 +16,7 @@
 		"weapon-top-text weapon-top-images"
 		"weapon-bottom-text weapon-bottom-images"
 		"message message";
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	padding: var(--s-4);
 	column-gap: var(--s-2-5);
diff --git a/app/features/tournament/routes/to.$id.seeds.module.css b/app/features/tournament/routes/to.$id.seeds.module.css
index c140cd609..a6c10e505 100644
--- a/app/features/tournament/routes/to.$id.seeds.module.css
+++ b/app/features/tournament/routes/to.$id.seeds.module.css
@@ -21,7 +21,7 @@
 	width: 100%;
 	align-items: center;
 	padding: var(--s-2) var(--s-3);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	border: 1px solid var(--color-border);
 	background-color: var(--color-bg-high);
 	column-gap: var(--s-2);
@@ -106,7 +106,7 @@
 	--field-width: 3rem;
 	text-align: center;
 	padding: var(--s-0-5);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	border: 1px solid var(--color-border);
 	background-color: var(--color-bg);
 	color: var(--color-text);
@@ -138,7 +138,7 @@
 	font-size: var(--fonts-xxxxs);
 	font-weight: var(--bold);
 	padding: 1px 4px;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	text-transform: uppercase;
 }
 
@@ -153,7 +153,7 @@
 	align-items: center;
 	gap: var(--s-1);
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-0-5) var(--s-2);
 	font-weight: var(--semi-bold);
 }
@@ -168,7 +168,7 @@
 	font-size: var(--fonts-xxxxs);
 	font-weight: var(--bold);
 	padding: 1px 3px;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	text-transform: uppercase;
 	margin-left: var(--s-1);
 }
@@ -210,7 +210,7 @@
 .overlay {
 	background-color: var(--color-bg-high);
 	border: 1px solid var(--color-border);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-2) var(--s-3);
 	box-shadow:
 		0 4px 6px -1px rgb(0 0 0 / 0.1),
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index c9e05fa49..c217bf6ab 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -1,6 +1,6 @@
 .actionSection {
 	padding: var(--s-0-5) var(--s-6) var(--s-6) var(--s-6);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 }
 
@@ -62,7 +62,7 @@
 .teamWithRosterMapPool {
 	display: grid;
 	grid-template-columns: max-content max-content max-content max-content;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	border: var(--border-style-accent);
 	width: max-content;
 	margin: 0 auto;
@@ -116,7 +116,7 @@
 	font-weight: var(--semi-bold);
 	width: 12px;
 	height: 12px;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	font-size: var(--fonts-xxxxs);
 	display: grid;
 	place-items: center;
@@ -150,7 +150,7 @@
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
 	padding: var(--s-0-5) var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	place-items: center;
 	width: max-content;
 	display: flex;
@@ -289,7 +289,7 @@
 	width: 100%;
 	align-items: center;
 	padding: var(--s-1-5) var(--s-3);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	column-gap: var(--s-1);
 	font-size: var(--fonts-xs);
 	grid-template-columns: 1.5rem 2rem 8rem 3rem 1fr;
@@ -324,7 +324,7 @@
 	grid-template-columns: max-content max-content;
 	grid-column-gap: var(--s-2-5);
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-1) var(--s-3);
 	place-items: center;
 }
@@ -360,7 +360,7 @@
 }
 
 .teamStats {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-4);
 	display: grid;
 	grid-template-columns: 1fr 1fr;
@@ -400,7 +400,7 @@
 @media screen and (min-width: 640px) {
 	.section {
 		margin: 0;
-		border-radius: var(--rounded);
+		border-radius: var(--radius-box);
 	}
 
 	.teamStats {
@@ -421,7 +421,7 @@
 	flex-direction: column;
 	gap: var(--s-2-5);
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-3) var(--s-6);
 }
 
@@ -536,7 +536,7 @@
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	border: 3px solid var(--color-accent);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	color: var(--color-text);
 }
 
@@ -560,5 +560,5 @@
 .standingsDivider {
 	width: 5px;
 	background-color: var(--color-accent-low);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
diff --git a/app/features/user-page/components/ParticipationPill.module.css b/app/features/user-page/components/ParticipationPill.module.css
index 53cdb328e..d1475fa27 100644
--- a/app/features/user-page/components/ParticipationPill.module.css
+++ b/app/features/user-page/components/ParticipationPill.module.css
@@ -21,7 +21,7 @@
 	width: 100%;
 	height: 100%;
 	background-color: var(--color-bg-higher);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .participating {
diff --git a/app/features/user-page/user-page.module.css b/app/features/user-page/user-page.module.css
index 11bbc9904..44140c507 100644
--- a/app/features/user-page/user-page.module.css
+++ b/app/features/user-page/user-page.module.css
@@ -104,7 +104,7 @@
 
 .extraInfo {
 	padding: var(--s-1) var(--s-1-5);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xxs);
 	display: flex;
@@ -208,7 +208,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	padding: var(--s-4);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	margin: 0 auto;
 	background-color: var(--color-bg-high);
 	color: var(--color-text);
@@ -306,7 +306,7 @@
 
 .seasonMatch {
 	background-color: var(--color-bg-high);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-2) var(--s-2-5);
 	color: var(--color-text);
 	transition: ease-in 0.2s background-color;
@@ -316,11 +316,11 @@
 }
 
 .seasonMatchWithSubSection {
-	border-radius: var(--rounded) var(--rounded) 0 0;
+	border-radius: var(--radius-box) var(--radius-box) 0 0;
 }
 
 .seasonMatchSubSection {
-	border-radius: 0 0 var(--rounded) var(--rounded);
+	border-radius: 0 0 var(--radius-box) var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xs);
 	text-align: center;
@@ -373,7 +373,7 @@
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	border: 3px solid var(--color-accent);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	color: var(--color-text);
 	border-color: var(--color-error);
 }
@@ -385,13 +385,13 @@
 .seasonInfoContainer {
 	background-color: var(--color-bg-high);
 	padding: var(--s-2-5) var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .seasonWinrate {
 	background-color: var(--color-bg-high);
 	padding: var(--s-0-5) var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 }
diff --git a/app/features/vods/routes/vods.new.module.css b/app/features/vods/routes/vods.new.module.css
index 986a59d31..a81e165b1 100644
--- a/app/features/vods/routes/vods.new.module.css
+++ b/app/features/vods/routes/vods.new.module.css
@@ -26,7 +26,7 @@
 /** we should use existing fieldset styles */
 .matchFieldset {
 	border: 1px solid var(--color-border);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-4);
 }
 
diff --git a/app/features/weapons/components/WeaponParamsTable.module.css b/app/features/weapons/components/WeaponParamsTable.module.css
index 67903b1e1..e2dad2fc6 100644
--- a/app/features/weapons/components/WeaponParamsTable.module.css
+++ b/app/features/weapons/components/WeaponParamsTable.module.css
@@ -127,7 +127,7 @@
 	min-width: 16px;
 	height: 16px;
 	padding-inline: var(--s-0-5);
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent);
 	font-size: var(--fonts-xxxs);
diff --git a/app/form/fields/ArrayFormField.module.css b/app/form/fields/ArrayFormField.module.css
index ffe03aea7..47d416f44 100644
--- a/app/form/fields/ArrayFormField.module.css
+++ b/app/form/fields/ArrayFormField.module.css
@@ -1,12 +1,12 @@
 .card {
 	border: var(--border-style);
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 	margin: 0;
 	padding: 0;
 }
 
 .header {
-	--header-border-radius: calc(var(--rounded-xs) - 2px);
+	--header-border-radius: calc(var(--radius-field) - 2px);
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
diff --git a/app/form/fields/WeaponPoolFormField.module.css b/app/form/fields/WeaponPoolFormField.module.css
index 59016fedd..3dca9a701 100644
--- a/app/form/fields/WeaponPoolFormField.module.css
+++ b/app/form/fields/WeaponPoolFormField.module.css
@@ -14,7 +14,7 @@
 	gap: var(--s-3);
 	padding: var(--s-2) var(--s-3);
 	border: 1px solid var(--color-border);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	transition: opacity 0.2s;
 }
diff --git a/app/styles/common.css b/app/styles/common.css
index e9cea4c08..7d721d05f 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -81,7 +81,7 @@ textarea:not([name="text"]) {
 	padding: var(--field-padding-block) var(--field-padding-inline);
 	line-height: var(--field-line-height);
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
 	outline: none;
 	resize: vertical;
@@ -96,7 +96,7 @@ input:not(.in-container) {
 	width: 100%;
 	box-sizing: border-box;
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background: var(--color-bg);
 	padding: 0 var(--field-padding-inline);
 	height: var(--field-height);
@@ -126,7 +126,7 @@ input[type="checkbox"] {
 	padding: 0;
 	width: var(--selector-height);
 	height: var(--selector-height);
-	border-radius: 5px;
+	border-radius: var(--radius-selector);
 	background-color: var(--color-bg);
 	border: var(--border-style);
 
@@ -170,7 +170,7 @@ input[type="radio"] {
 	height: var(--selector-height);
 	background-color: var(--color-bg);
 	border: var(--border-style);
-	border-radius: 999999px;
+	border-radius: var(--radius-full);
 	padding: 0;
 
 	&:focus-within {
@@ -187,7 +187,7 @@ input[type="radio"] {
 		display: block;
 		width: 50%;
 		height: 50%;
-		border-radius: 999999px;
+		border-radius: var(--radius-full);
 		background-color: var(--color-bg);
 		margin: auto;
 		margin-top: 25%;
@@ -216,7 +216,7 @@ label {
 
 fieldset {
 	border: none;
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-sm);
 	padding-block-end: var(--s-3);
@@ -224,7 +224,7 @@ fieldset {
 }
 
 legend {
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: transparent;
 	font-size: var(--fonts-xs);
 	font-weight: var(--bold);
@@ -239,7 +239,7 @@ select {
 	width: 100%;
 	box-sizing: border-box;
 	border: var(--border-style);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
 	cursor: pointer;
 	padding: 0 var(--field-padding-inline);
@@ -281,7 +281,7 @@ select {
 
 		background-color: var(--color-bg);
 		border: var(--border-style);
-		border-radius: var(--rounded-sm);
+		border-radius: var(--radius-field);
 		padding: var(--s-1);
 		margin: 0.5rem;
 		translate: -0.5rem;
@@ -296,7 +296,7 @@ select {
 	option {
 		background-color: var(--color-bg);
 		color: var(--color-text);
-		border-radius: var(--rounded-sm);
+		border-radius: var(--radius-field);
 		font-size: var(--fonts-xsm);
 		font-weight: var(--semi-bold);
 		padding: var(--s-1-5);
@@ -375,12 +375,12 @@ input[type="color"] {
 
 input[type="color"]::-webkit-color-swatch {
 	border: 0;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 }
 
 input[type="color"]::-moz-color-swatch {
 	border: 0;
-	border-radius: var(--rounded-xs);
+	border-radius: var(--radius-field);
 }
 
 input[type="file"] {
@@ -424,7 +424,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 	width: 100%;
 	height: calc(var(--selector-height) / 4);
 	background-color: var(--track-color);
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	transition: 100ms background-color;
 }
 
@@ -432,7 +432,7 @@ input[type="range"]::-moz-range-track {
 	width: 100%;
 	height: calc(var(--selector-height) / 4);
 	background-color: var(--track-color);
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	transition: 100ms background-color;
 }
 
@@ -447,7 +447,7 @@ input[type="range"]::-webkit-slider-thumb {
 	);
 	background-color: var(--thumb-color);
 	border: 2px solid var(--color-bg);
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	cursor: pointer;
 	transition: 100ms background-color;
 }
@@ -463,7 +463,7 @@ input[type="range"]::-moz-range-thumb {
 	);
 	background-color: var(--thumb-color);
 	border: 2px solid var(--color-bg);
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	cursor: pointer;
 	transition: 100ms background-color;
 }
@@ -477,14 +477,14 @@ progress {
 	height: var(--selector-height);
 	overflow: hidden;
 	border: none;
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	background-color: var(--color-bg-high);
 	color: var(--color-text-accent);
 	vertical-align: baseline;
 }
 
 progress::-webkit-progress-bar {
-	border-radius: var(--rounded-full);
+	border-radius: var(--radius-full);
 	background: 0 0;
 }
 
@@ -562,7 +562,7 @@ abbr[title] {
 
 .section > div {
 	padding: var(--s-2);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--bg-darker);
 }
 
@@ -711,7 +711,7 @@ abbr[title] {
 .colors__summary {
 	padding: var(--s-2) var(--s-3);
 	border: 2px solid var(--border);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--bg-input);
 	font-weight: var(--bold);
 	font-size: var(--fonts-xs);
@@ -739,7 +739,7 @@ abbr[title] {
 	font-weight: var(--bold);
 	padding: var(--s-3);
 	border: 2px solid var(--border);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	background-color: var(--bg-input);
 	margin-bottom: var(--s-3);
 	overflow-x: auto;
diff --git a/app/styles/elements.css b/app/styles/elements.css
index 8113237cd..696335a08 100644
--- a/app/styles/elements.css
+++ b/app/styles/elements.css
@@ -2,7 +2,7 @@
 	max-width: 20rem;
 	padding: var(--s-2);
 	border: 2px solid var(--border);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--bg-darker);
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
@@ -23,7 +23,7 @@
 .react-aria-DatePicker .react-aria-Group {
 	display: flex;
 	border: 2px solid var(--border);
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	accent-color: var(--theme-secondary);
 	background-color: var(--bg-input);
 	color: var(--text);
@@ -64,7 +64,7 @@
 
 .react-aria-Calendar {
 	background-color: var(--bg-lighter-solid);
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	padding: var(--s-4);
 	border: var(--border-style);
 }
@@ -114,7 +114,7 @@
 	padding: var(--s-1-5);
 	width: 35px;
 	height: 35px;
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 	outline-color: var(--theme);
 }
 
diff --git a/app/styles/utils.css b/app/styles/utils.css
index 1d4e3fba6..23c4bbeb8 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -127,11 +127,11 @@
 }
 
 .rounded {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 }
 
 .rounded-sm {
-	border-radius: var(--rounded-sm);
+	border-radius: var(--radius-field);
 }
 
 .rounded-full {
@@ -532,7 +532,7 @@
 
 	&::-webkit-scrollbar-thumb {
 		background-color: var(--color-base-4);
-		border-radius: 99999px;
+		border-radius: var(--radius-full);
 		border: 4px solid transparent;
 		background-clip: content-box;
 	}
@@ -619,7 +619,7 @@
 }
 
 .summary {
-	border-radius: var(--rounded);
+	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
diff --git a/app/styles/vars.css b/app/styles/vars.css
index fc218e383..ce701b0f8 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -146,6 +146,11 @@ html {
 
 	--selector-height: 1.25rem;
 
+	--radius-box: 12px;
+	--radius-field: 8px;
+	--radius-selector: 8px;
+	--radius-full: 99999px;
+
 	--layout-nav-height: 55px;
 	--layout-sidenav-width: 250px;
 	--layout-main-padding: var(--s-4);
@@ -156,11 +161,6 @@ html {
 }
 
 html {
-	--rounded: 16px;
-	--rounded-full: 200px;
-	--rounded-xs: 8px;
-	--rounded-sm: 10px;
-
 	--fonts-xl: 1.5rem;
 	--fonts-lg: 1.2rem;
 	--fonts-md: 1rem;