New border radius vars

2026-08-26 13:22:50 -05:00 · 2026-01-19 18:55:54 +01:00
parent 2fb96a1122
commit e9ba14c42a
76 changed files with 256 additions and 260 deletions
--- 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);
--- 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);
 }
--- 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);
--- 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;
--- 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);
--- 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;
--- 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 {
--- 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);
 	}

--- 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] {
--- 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 {
--- 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;
 }
--- 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);
--- 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 {
--- 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;
--- 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%;
--- 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;
--- 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;
--- 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;
 	}
 }
--- 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;
--- 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;
 }
--- 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;
--- 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;
 }

--- 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);
--- 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;
--- 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;
--- 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;
--- 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);
--- 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",
--- 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);
--- 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);
--- 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;
 }
--- 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);
--- 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);
 }
--- 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);
 }
--- 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);
--- 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;
 }
--- 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;
--- 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);
 }
--- 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 {
--- 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);
--- 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;
 }

--- 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%" },
 };
--- 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);
--- 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);
 }
--- 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;
--- 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);
--- 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);
--- 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);
--- 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;
--- 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);
 }
--- 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 {
--- 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);
--- 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);
--- 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);
 }
--- 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);
--- 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);
 }
--- 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) {
--- 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,
--- 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 {
--- 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 {
--- 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;
--- 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);
 }

--- 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);
 }

--- 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);
--- 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),
--- 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);
 }
--- 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 {
--- 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);
 }
--- 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);
 }

--- 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);
--- 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);
--- 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;
 }
--- 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;
--- 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);
 }

--- 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);
--- 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;