diff --git a/.stylelintrc.json b/.stylelintrc.json
index 51834b04b..ec396c43e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -3,7 +3,25 @@
 	"overrides": [
 		{
 			"customSyntax": "postcss-html",
-			"files": ["**/*.svelte"]
+			"files": ["**/*.svelte"],
+			"rules": {
+				"csstools/value-no-unknown-custom-properties": [
+					true,
+					{
+						"ignoreLocallyDefined": true,
+						"importFrom": [
+							"src/styles/bass.css",
+							"src/styles/buttons.css",
+							"src/styles/layout.css",
+							"src/styles/reset.css",
+							"src/styles/theme.css",
+							"src/styles/typography.css",
+							"src/styles/utilities.css",
+							"src/styles/variables.css"
+						]
+					}
+				]
+			}
 		}
 	],
 	"plugins": [
@@ -18,6 +36,7 @@
 		"csstools/value-no-unknown-custom-properties": [
 			true,
 			{
+				"ignoreProperties": ["--ideal-font-size", "--max-font-size"],
 				"importFrom": [
 					"src/styles/bass.css",
 					"src/styles/buttons.css",
@@ -47,6 +66,12 @@
 				"expandShorthand": true,
 				"ignoreValues": ["inherit", "unset", "initial", "transparent"]
 			}
+		],
+		"selector-pseudo-class-no-unknown": [
+			true,
+			{
+				"ignorePseudoClasses": ["global"]
+			}
 		]
 	}
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6739498a1..36baa5d15 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,16 +19,26 @@
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"cSpell.words": [
+		"Aaah",
+		"consolas",
 		"Deepgram",
 		"flushall",
 		"maxres",
+		"menlo",
 		"nohotkeys",
+		"oklch",
 		"Oopsie",
 		"openai",
+		"pocketcasts",
 		"popovertarget",
+		"raah",
+		"recents",
 		"shownumber",
 		"testid",
 		"Tolinski",
-		"waait"
+		"waait",
+		"wght",
+		"xtra",
+		"xxlarge"
 	]
 }
diff --git a/package.json b/package.json
index e8ff45b51..80889ef6b 100644
--- a/package.json
+++ b/package.json
@@ -1,144 +1,144 @@
 {
-  "name": "syntax",
-  "version": "3.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "node ./scripts/preheat.js",
-    "preheat": "node ./scripts/preheat.js --env-only",
-    "vite-dev": "vite dev",
-    "copy-files": "zx ./why_do_i_need_this.mjs",
-    "build": "run-s --print-name build:svelte copy-files",
-    "build:svelte": "vite build",
-    "preview": "vite preview",
-    "test": "svelte-kit sync && playwright test",
-    "test:ui": "svelte-kit sync && playwright test --ui",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:unit": "svelte-kit sync && vitest",
-    "eslint": "eslint .",
-    "lint": "prettier --plugin-search-dir . --check . && eslint . && pnpm stylelint",
-    "format": "prettier --plugin-search-dir . --write .",
-    "site:update": "pnpm update -i -L",
-    "db:studio": "prisma studio",
-    "db:generate": "prisma generate",
-    "db:push": "prisma db push",
-    "db:seed": "prisma db seed",
-    "i-changed-the-schema": "pnpm run db:push && pnpm run db:generate",
-    "postinstall": "pnpm db:generate && pnpm exec playwright install",
-    "stylelint": "NODE_OPTIONS=--no-deprecation stylelint \"**/*.css\"",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "devDependencies": {
-    "@codecov/sveltekit-plugin": "1.9.1",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.33.0",
-    "@playwright/test": "^1.54.2",
-    "@spiriit/vite-plugin-svg-spritemap": "^5.0.0",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-queryparams": "^7.0.1",
-    "@storybook/addon-svelte-csf": "^5.0.7",
-    "@storybook/sveltekit": "^9.1.2",
-    "@sveltejs/kit": "^2.27.3",
-    "@sveltejs/vite-plugin-svelte": "^6.1.1",
-    "@types/chroma-js": "^3.1.1",
-    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^24.2.1",
-    "@types/speakingurl": "^13.0.6",
-    "@typescript-eslint/eslint-plugin": "^8.39.0",
-    "@typescript-eslint/parser": "^8.39.0",
-    "dotenv": "^17.2.1",
-    "eslint": "^9.33.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^9.1.2",
-    "eslint-plugin-svelte": "^3.11.0",
-    "globals": "^16.3.0",
-    "mysql2": "^3.14.3",
-    "postcss": "^8.5.6",
-    "postcss-custom-media": "^11.0.6",
-    "postcss-html": "^1.8.0",
-    "postcss-import": "^16.1.1",
-    "postcss-import-ext-glob": "^2.1.1",
-    "postcss-load-config": "^6.0.1",
-    "postcss-preset-env": "^10.2.4",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "prisma": "6.13.0",
-    "semver": "^7.7.2",
-    "storybook": "^9.1.2",
-    "stylelint": "^16.23.1",
-    "stylelint-config-standard": "^39.0.0",
-    "stylelint-declaration-strict-value": "^1.10.11",
-    "stylelint-media-use-custom-media": "^4.0.0",
-    "stylelint-no-undefined-classes": "^0.2.0",
-    "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-    "svelte": "^5.38.0",
-    "svelte-check": "^4.3.1",
-    "svelte-preprocess": "^6.0.3",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.1",
-    "vitest": "^3.2.4"
-  },
-  "type": "module",
-  "engines": {
-    "node": ">=18.13 || ^20",
-    "pnpm": ">=8"
-  },
-  "dependencies": {
-    "@anthropic-ai/sdk": "^0.6.8",
-    "@deepgram/sdk": "^2.4.0",
-    "@ffmpeg.wasm/core-mt": "0.13.2",
-    "@ffmpeg.wasm/main": "^0.13.1",
-    "@leveluptuts/svelte-side-menu": "^1.1.0",
-    "@oddbird/popover-polyfill": "^0.6.1",
-    "@prisma/client": "6.13.0",
-    "@sentry/profiling-node": "^10.3.0",
-    "@sentry/sveltekit": "^10.3.0",
-    "@sparticuz/chromium": "132.0.0",
-    "@svelte-put/shortcut": "^4.1.0",
-    "@sveltejs/adapter-vercel": "^5.8.2",
-    "@types/core-js": "^2.5.8",
-    "@upstash/redis": "^1.35.3",
-    "chroma-js": "^3.1.2",
-    "core-js": "^3.45.0",
-    "date-fns": "^4.1.0",
-    "dotenv-expand": "^12.0.2",
-    "flexsearch": "^0.8.205",
-    "gpt-3-encoder": "^1.1.4",
-    "gray-matter": "^4.0.3",
-    "js-cookie": "^3.0.5",
-    "linkedom": "^0.18.11",
-    "media-chrome": "^4.12.0",
-    "npm-run-all2": "^8.0.4",
-    "openai": "^4.93.0",
-    "p-map": "^7.0.3",
-    "puppeteer-core": "24.6.1",
-    "rehype-autolink-headings": "^7.1.0",
-    "rehype-highlight": "^7.0.2",
-    "rehype-raw": "^7.0.0",
-    "rehype-stringify": "^10.0.1",
-    "remark-gfm": "^4.0.1",
-    "remark-heading-id": "^1.0.1",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.2",
-    "sk-form-data": "^2.0.2",
-    "speakingurl": "^14.0.1",
-    "svelte-french-toast": "1.2.0",
-    "svelte-local-storage-store": "^0.6.4",
-    "svelte-turnstile": "^0.11.0",
-    "sveltekit-search-params": "^3.0.0",
-    "ts-node": "^10.9.2",
-    "unified": "^11.0.5",
-    "waait": "^1.0.5",
-    "youtube-video-element": "^1.6.2",
-    "zod": "^4.0.16",
-    "zx": "^8.8.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
+	"name": "syntax",
+	"version": "3.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "node ./scripts/preheat.js",
+		"preheat": "node ./scripts/preheat.js --env-only",
+		"vite-dev": "vite dev",
+		"copy-files": "zx ./why_do_i_need_this.mjs",
+		"build": "run-s --print-name build:svelte copy-files",
+		"build:svelte": "vite build",
+		"preview": "vite preview",
+		"test": "svelte-kit sync && playwright test",
+		"test:ui": "svelte-kit sync && playwright test --ui",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "svelte-kit sync && vitest",
+		"eslint": "eslint .",
+		"lint": "prettier --plugin-search-dir . --check . && eslint . && pnpm stylelint",
+		"format": "prettier --plugin-search-dir . --write .",
+		"site:update": "pnpm update -i -L",
+		"db:studio": "prisma studio",
+		"db:generate": "prisma generate",
+		"db:push": "prisma db push",
+		"db:seed": "prisma db seed",
+		"i-changed-the-schema": "pnpm run db:push && pnpm run db:generate",
+		"postinstall": "pnpm db:generate && pnpm exec playwright install",
+		"stylelint": "NODE_OPTIONS=--no-deprecation stylelint \"**/*.{css,svelte}\"",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"devDependencies": {
+		"@codecov/sveltekit-plugin": "1.9.1",
+		"@eslint/compat": "^1.3.2",
+		"@eslint/eslintrc": "^3.3.1",
+		"@eslint/js": "^9.33.0",
+		"@playwright/test": "^1.54.2",
+		"@spiriit/vite-plugin-svg-spritemap": "^5.0.0",
+		"@storybook/addon-docs": "^9.1.2",
+		"@storybook/addon-queryparams": "^7.0.1",
+		"@storybook/addon-svelte-csf": "^5.0.7",
+		"@storybook/sveltekit": "^9.1.2",
+		"@sveltejs/kit": "^2.27.3",
+		"@sveltejs/vite-plugin-svelte": "^6.1.1",
+		"@types/chroma-js": "^3.1.1",
+		"@types/js-cookie": "^3.0.6",
+		"@types/node": "^24.2.1",
+		"@types/speakingurl": "^13.0.6",
+		"@typescript-eslint/eslint-plugin": "^8.39.0",
+		"@typescript-eslint/parser": "^8.39.0",
+		"dotenv": "^17.2.1",
+		"eslint": "^9.33.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-storybook": "^9.1.2",
+		"eslint-plugin-svelte": "^3.11.0",
+		"globals": "^16.3.0",
+		"mysql2": "^3.14.3",
+		"postcss": "^8.5.6",
+		"postcss-custom-media": "^11.0.6",
+		"postcss-html": "^1.8.0",
+		"postcss-import": "^16.1.1",
+		"postcss-import-ext-glob": "^2.1.1",
+		"postcss-load-config": "^6.0.1",
+		"postcss-preset-env": "^10.2.4",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prisma": "6.13.0",
+		"semver": "^7.7.2",
+		"storybook": "^9.1.2",
+		"stylelint": "^16.23.1",
+		"stylelint-config-standard": "^39.0.0",
+		"stylelint-declaration-strict-value": "^1.10.11",
+		"stylelint-media-use-custom-media": "^4.0.0",
+		"stylelint-no-undefined-classes": "^0.2.0",
+		"stylelint-value-no-unknown-custom-properties": "^6.0.1",
+		"svelte": "^5.38.0",
+		"svelte-check": "^4.3.1",
+		"svelte-preprocess": "^6.0.3",
+		"tslib": "^2.8.1",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.1",
+		"vitest": "^3.2.4"
+	},
+	"type": "module",
+	"engines": {
+		"node": ">=18.13 || ^20",
+		"pnpm": ">=8"
+	},
+	"dependencies": {
+		"@anthropic-ai/sdk": "^0.6.8",
+		"@deepgram/sdk": "^2.4.0",
+		"@ffmpeg.wasm/core-mt": "0.13.2",
+		"@ffmpeg.wasm/main": "^0.13.1",
+		"@leveluptuts/svelte-side-menu": "^1.1.0",
+		"@oddbird/popover-polyfill": "^0.6.1",
+		"@prisma/client": "6.13.0",
+		"@sentry/profiling-node": "^10.3.0",
+		"@sentry/sveltekit": "^10.3.0",
+		"@sparticuz/chromium": "132.0.0",
+		"@svelte-put/shortcut": "^4.1.0",
+		"@sveltejs/adapter-vercel": "^5.8.2",
+		"@types/core-js": "^2.5.8",
+		"@upstash/redis": "^1.35.3",
+		"chroma-js": "^3.1.2",
+		"core-js": "^3.45.0",
+		"date-fns": "^4.1.0",
+		"dotenv-expand": "^12.0.2",
+		"flexsearch": "^0.8.205",
+		"gpt-3-encoder": "^1.1.4",
+		"gray-matter": "^4.0.3",
+		"js-cookie": "^3.0.5",
+		"linkedom": "^0.18.11",
+		"media-chrome": "^4.12.0",
+		"npm-run-all2": "^8.0.4",
+		"openai": "^4.93.0",
+		"p-map": "^7.0.3",
+		"puppeteer-core": "24.6.1",
+		"rehype-autolink-headings": "^7.1.0",
+		"rehype-highlight": "^7.0.2",
+		"rehype-raw": "^7.0.0",
+		"rehype-stringify": "^10.0.1",
+		"remark-gfm": "^4.0.1",
+		"remark-heading-id": "^1.0.1",
+		"remark-parse": "^11.0.0",
+		"remark-rehype": "^11.1.2",
+		"sk-form-data": "^2.0.2",
+		"speakingurl": "^14.0.1",
+		"svelte-french-toast": "1.2.0",
+		"svelte-local-storage-store": "^0.6.4",
+		"svelte-turnstile": "^0.11.0",
+		"sveltekit-search-params": "^3.0.0",
+		"ts-node": "^10.9.2",
+		"unified": "^11.0.5",
+		"waait": "^1.0.5",
+		"youtube-video-element": "^1.6.2",
+		"zod": "^4.0.16",
+		"zx": "^8.8.0"
+	},
+	"eslintConfig": {
+		"extends": [
+			"plugin:storybook/recommended"
+		]
+	}
 }
diff --git a/src/icons/Icons.svelte b/src/icons/Icons.svelte
index 7b13bde10..ca58f0849 100644
--- a/src/icons/Icons.svelte
+++ b/src/icons/Icons.svelte
@@ -30,7 +30,7 @@
 	}
 
 	.icon-name {
-		font-size: var(--fs-caption);
+		font-size: var(--fs-2);
 		color: var(--c-fg);
 		text-align: center;
 	}
diff --git a/src/lib/AdminSearch.svelte b/src/lib/AdminSearch.svelte
index 6b70015b3..e675f2907 100644
--- a/src/lib/AdminSearch.svelte
+++ b/src/lib/AdminSearch.svelte
@@ -15,7 +15,7 @@
 		border: var(--border);
 		padding: 10px;
 		font-size: var(--font-size-base);
-		color: var(--fg);
-		border-radius: var(--brad);
+		color: var(--c-fg);
+		border-radius: var(--br-medium);
 	}
 </style>
diff --git a/src/lib/ComponentWindow.svelte b/src/lib/ComponentWindow.svelte
index 6ed968291..9050a4ec8 100644
--- a/src/lib/ComponentWindow.svelte
+++ b/src/lib/ComponentWindow.svelte
@@ -26,7 +26,7 @@
 	<div class="content">
 		<Component />
 	</div>
-	<div class="full zone" style:--bg="var(--black)" style:--fg="var(--white)">
+	<div class="full zone" style:--c-bg="var(--c-black)" style:--c-fg="var(--c-white)">
 		<Component />
 	</div>
 </div>
@@ -36,6 +36,7 @@
 		resize: both;
 		overflow: auto;
 		border: var(--border);
+
 		> span {
 			position: absolute;
 		}
diff --git a/src/lib/DropdownMenu.svelte b/src/lib/DropdownMenu.svelte
index 25ca1ff13..bd325338b 100644
--- a/src/lib/DropdownMenu.svelte
+++ b/src/lib/DropdownMenu.svelte
@@ -34,10 +34,10 @@
 	}
 
 	[popover] {
-		background: var(--bg-sheet);
-		border: solid 1px var(--black-7);
+		background: var(--c-bg);
+		border: solid 1px var(--c-black-7);
 		border-radius: 6px;
-		color: var(--white);
+		color: var(--c-white);
 		padding: 10px;
 		translate: 0 10px;
 	}
@@ -47,11 +47,11 @@
 	}
 
 	.dropdown-links {
-		background: var(--bg-1);
-		box-shadow: inset 0 0 0 1px var(--subtle);
-		border-radius: var(--brad);
-		color: var(--fg);
-		translate: 0px 3px;
+		background: var(--c-bg-1);
+		box-shadow: inset 0 0 0 1px var(--c-black-1);
+		border-radius: var(--br-medium);
+		color: var(--c-fg);
+		translate: 0 3px;
 		position: absolute;
 		z-index: 10;
 	}
diff --git a/src/lib/FacePile.svelte b/src/lib/FacePile.svelte
index cbcf0d400..db7bcfb64 100644
--- a/src/lib/FacePile.svelte
+++ b/src/lib/FacePile.svelte
@@ -20,28 +20,33 @@
 <style lang="postcss">
 	.pile {
 		--local-size: var(--face-size, 50px);
+
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: calc(var(--local-size) / 1.5);
 		gap: 0;
 		transition: all 0.2s;
 	}
+
 	.pile:hover {
 		z-index: 2;
+
 		&:has(img:nth-child(n + 4)) {
 			gap: calc(var(--local-size) / 8);
 		}
+
 		gap: calc(var(--local-size) / 4);
 	}
+
 	img {
 		width: var(--local-size);
 		height: var(--local-size);
 		aspect-ratio: 1 / 1;
-		background: var(--fg);
-		color: var(--bg);
+		background: var(--c-fg);
+		color: var(--c-bg);
 		font-size: var(--local-size);
 		border-radius: 50%;
 		overflow: hidden;
-		border: 1.5px solid var(--bg);
+		border: 1.5px solid var(--c-bg);
 	}
 </style>
diff --git a/src/lib/IconOLD.svelte b/src/lib/IconOLD.svelte
index 7dcde68c6..5117570f7 100644
--- a/src/lib/IconOLD.svelte
+++ b/src/lib/IconOLD.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" module>
+<!-- <script lang="ts" module>
 	export type IconName =
 		| 'play'
 		| 'playing'
@@ -487,7 +487,7 @@
 			fill-rule="evenodd"
 			clip-rule="evenodd"
 			d="M11.28 1.22a.75.75 0 0 0-1.26.7L6.69 5.25H4.206c-1.114 0-1.671 1.346-.884 2.134l1.911 1.911-3.72 4.135A2 2 0 0 0 1 14.768V15h.233a2 2 0 0 0 1.337-.513l4.135-3.721 1.911 1.91c.788.788 2.134.23 2.134-.883V9.31l3.33-3.33a.75.75 0 0 0 .7-1.261l-.603-.604-2.293-2.293-.604-.603ZM12.94 5 11 3.06 8.06 6 10 7.94 12.94 5ZM6.69 6.75l2.56 2.56v1.88L4.81 6.75h1.88Z"
-			fill="var(--fg)"
+			fill="var(--c-fg)"
 		/></svg
 	>
 {/if}
@@ -523,4 +523,4 @@
 	.playing line:nth-child(3) {
 		animation-delay: 0.4s;
 	}
-</style>
+</style> -->
diff --git a/src/lib/ListenLinks.svelte b/src/lib/ListenLinks.svelte
index 0156d11f2..788c1e039 100644
--- a/src/lib/ListenLinks.svelte
+++ b/src/lib/ListenLinks.svelte
@@ -23,7 +23,7 @@
 		target="_blank"
 		title="Watch on Youtube"
 		aria-label="Youtube"
-		style:--fg="#F61C0D"
+		style:--c-fg="#F61C0D"
 		href={show.youtube_url}
 	>
 		<Icon name="youtube" />
@@ -41,8 +41,9 @@
 
 <style lang="postcss">
 	a {
-		color: white;
+		color: var(--c-white);
 		display: block;
+
 		:global(svg) {
 			display: block;
 		}
diff --git a/src/lib/PodcastHero.svelte b/src/lib/PodcastHero.svelte
index bb59c72af..9e498149b 100644
--- a/src/lib/PodcastHero.svelte
+++ b/src/lib/PodcastHero.svelte
@@ -6,8 +6,8 @@
 
 <section
 	aria-label="Podcast Information Section"
-	style:--bg="var(--black)"
-	style:--fg="var(--fg-1)"
+	style:--c-bg="var(--c-black)"
+	style:--c-fg="var(--c-fg-1)"
 	class="zone full layout"
 >
 	<Header transparent={true} />
@@ -84,7 +84,7 @@
 	}
 
 	.tasty {
-		/* color: var(--yellow); */
+		/* color: var(--c-yellow); */
 	}
 
 	.logo {
@@ -126,7 +126,7 @@
 		}
 
 		.amp {
-			font-size: var(--font-size-xs);
+			font-size: var(--fs-2);
 		}
 	}
 
diff --git a/src/lib/PodcastLinks.svelte b/src/lib/PodcastLinks.svelte
index 472a4cb03..5282a0d7e 100644
--- a/src/lib/PodcastLinks.svelte
+++ b/src/lib/PodcastLinks.svelte
@@ -7,7 +7,7 @@
 		<a
 			{href}
 			target="_blank"
-			class="button subscribe subscribe--{text.toLowerCase().replaceAll(' ', '-')}">{text}</a
+			class="button subscribe subscribe-{text.toLowerCase().replaceAll(' ', '-')}">{text}</a
 		>
 	{/each}
 </div>
@@ -20,12 +20,12 @@
 		gap: 10px;
 	}
 
-	.subscribe--apple-podcasts {
+	.subscribe-apple-podcasts {
 		--button-bg: linear-gradient(
 			to bottom,
-			rgb(205, 102, 246) 0%,
-			rgb(154, 61, 209) 80%,
-			rgb(142, 52, 201) 100%
+			rgb(205 102 246) 0%,
+			rgb(154 61 209) 80%,
+			rgb(142 52 201) 100%
 		);
 	}
 
@@ -39,57 +39,68 @@
 		pointer-events: none;
 	}
 
-	.subscribe--apple-podcasts::before {
+	.subscribe-apple-podcasts::before {
 		background-image: url('/icons/itunes.jpg');
 	}
 
-	.subscribe--overcast {
-		--button-bg: linear-gradient(to bottom, rgb(255, 138, 10) 0%, rgb(255, 105, 48) 100%);
+	.subscribe-overcast {
+		--button-bg: linear-gradient(to bottom, rgb(255 138 10) 0%, rgb(255 105 48) 100%);
 	}
-	.subscribe--overcast::before {
+
+	.subscribe-overcast::before {
 		background-image: url('/icons/overcast.jpg');
 	}
 
-	.subscribe--rss {
+	.subscribe-rss {
 		--button-bg: linear-gradient(
 			to bottom,
-			rgb(247, 163, 54) 0%,
-			rgb(235, 109, 30) 96%,
-			rgb(235, 108, 30) 100%
+			rgb(247 163 54) 0%,
+			rgb(235 109 30) 96%,
+			rgb(235 108 30) 100%
 		);
 	}
-	.subscribe--rss::before {
+
+	.subscribe-rss::before {
 		background-image: url('/icons/rss.svg');
 	}
 
-	.subscribe--spotify {
-		--button-bg: linear-gradient(to bottom, rgb(4, 160, 59) 0%, rgb(16, 172, 71) 100%);
+	.subscribe-spotify {
+		--button-bg: linear-gradient(to bottom, rgb(4 160 59) 0%, rgb(16 172 71) 100%);
 	}
-	.subscribe--spotify::before {
+
+	.subscribe-spotify::before {
 		background-image: url('/icons/spotify.svg');
 	}
-	.subscribe--pocketcasts {
-		--button-bg: linear-gradient(to bottom, rgb(242, 43, 36) 0%, rgb(215, 12, 11) 100%);
+
+	.subscribe-pocketcasts {
+		--button-bg: linear-gradient(to bottom, rgb(242 43 36) 0%, rgb(215 12 11) 100%);
 	}
-	.subscribe--youtube::before {
+
+	.subscribe-youtube::before {
 		background-image: url('/icons/youtube.svg');
 	}
-	.subscribe--youtube {
-		--button-bg: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(215, 215, 215) 100%);
+
+	.subscribe-youtube {
+		--button-bg: linear-gradient(to bottom, rgb(255 255 255) 0%, rgb(215 215 215) 100%);
 	}
-	.subscribe--pocketcasts::before {
+
+	.subscribe-pocketcasts::before {
 		background-image: url('/icons/pocketcasts.jpg');
 	}
-	.subscribe--google-podcasts {
-		--button-bg: linear-gradient(to bottom, rgb(245, 121, 23) 0%, rgb(254, 185, 90) 100%);
+
+	.subscribe-google-podcasts {
+		--button-bg: linear-gradient(to bottom, rgb(245 121 23) 0%, rgb(254 185 90) 100%);
 	}
-	.subscribe--amazon-music {
+
+	.subscribe-amazon-music {
 		--button-bg: linear-gradient(to bottom, #25d1da 0%, #399a9e 100%);
 	}
-	.subscribe--amazon-music::before {
+
+	.subscribe-amazon-music::before {
 		background-image: url('/icons/amznMusic.png');
 	}
+
 	a {
-		font-size: var(--font-size-xs);
+		font-size: var(--fs-2);
 	}
 </style>
diff --git a/src/lib/SelectMenu.svelte b/src/lib/SelectMenu.svelte
index 73993cd72..5fe66e31d 100644
--- a/src/lib/SelectMenu.svelte
+++ b/src/lib/SelectMenu.svelte
@@ -81,9 +81,9 @@
 
 <style lang="postcss">
 	[popover] {
-		background: var(--bg-1);
-		box-shadow: inset 0 0 0 1px var(--subtle);
-		border-radius: var(--brad);
+		background: var(--c-bg);
+		box-shadow: inset 0 0 0 1px var(--c-black-1);
+		border-radius: var(--br-medium);
 		padding: 10px;
 		translate: 0 10px;
 		border: none;
@@ -103,13 +103,13 @@
 		font-family: var(--ff-body);
 		padding: 8px 14px;
 		cursor: pointer;
-		font-size: var(--body-font-size);
-		color: var(--fg);
+		font-size: var(--fs-4);
+		color: var(--c-fg);
 		border-radius: 4px;
 
 		&:hover,
 		&.selected {
-			background: var(--subtle);
+			background: var(--c-black-1);
 		}
 	}
 </style>
diff --git a/src/lib/ShowCard.svelte b/src/lib/ShowCard.svelte
index 7dbd2431c..2d618cb38 100644
--- a/src/lib/ShowCard.svelte
+++ b/src/lib/ShowCard.svelte
@@ -144,19 +144,17 @@
 
 <style lang="postcss">
 	article {
-		--bg: var(--bg-1);
-
 		container: show-card / inline-size;
 		display: grid;
 		padding: 20px;
-		background-color: var(--bg);
-		background-image: var(--bg-grit);
+		background-color: var(--c-bg);
+		background-image: var(--c-bg-grit);
 		position: relative;
 		overflow: hidden;
 		align-items: start;
 
 		& a {
-			color: var(--fg);
+			color: var(--c-fg);
 			display: flex;
 			gap: 10px;
 			height: 100%;
@@ -175,31 +173,31 @@
 		}
 
 		&:hover {
-			background-color: color-mix(in lch, var(--fg), var(--bg) 96%);
+			background-color: color-mix(in lch, var(--c-fg), var(--c-bg) 96%);
 		}
 
 		&.card {
-			border-radius: var(--brad);
-			border: solid var(--border-size) var(--subtle);
+			border-radius: var(--br-medium);
+			border: solid var(--border-size) var(--c-black-1);
 		}
 
 		&.highlight {
-			--bg: var(--bg-root);
-			--fg: var(--fg-root);
+			--c-bg: var(--c-bg);
+			--c-fg: var(--c-fg);
 
-			/* background-image: linear-gradient(to top, #00000000, var(--bg)), url('$assets/whitegrit.png');
+			/* background-image: linear-gradient(to top, #00000000, var(--c-bg)), url('$assets/whitegrit.png');
        */
 
-			border-radius: var(--brad);
+			border-radius: var(--br-medium);
 			grid-column: 1 / -1;
 			background-size: 269px;
 			background-repeat: repeat;
 			background-position: top center;
-			border: solid var(--border-size) var(--black-8);
+			border: solid var(--border-size) var(--c-black-8);
 		}
 
 		&.list {
-			border: solid 1px var(--subtle);
+			border: solid 1px var(--c-black-1);
 			margin-bottom: 20px;
 			padding: 20px 0;
 			margin-inline: auto;
@@ -208,7 +206,7 @@
 		.description {
 			span {
 				/* helps a11y when light text overlaps show number */
-				background-color: color-mix(in lch, var(--bg), transparent 50%);
+				background-color: color-mix(in lch, var(--c-bg), transparent 50%);
 			}
 		}
 
@@ -247,17 +245,17 @@
 	.h3 {
 		view-transition-name: var(--transition-name);
 		margin: 0;
-		font-size: var(--font-size-lg);
+		font-size: var(--fs-6);
 		line-height: 1.2;
 		text-shadow:
-			1px 0 0 var(--bg),
-			0 1px 0 var(--bg),
-			-1px 0 0 var(--bg),
-			0 -1px 0 var(--bg);
+			1px 0 0 var(--c-bg),
+			0 1px 0 var(--c-bg),
+			-1px 0 0 var(--c-bg),
+			0 -1px 0 var(--c-bg);
 	}
 
 	.date {
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 		margin: 0;
 		font-variation-settings: 'wght' 500;
 		view-transition-name: var(--transition-name);
@@ -265,11 +263,11 @@
 		position: relative;
 
 		@media (prefers-color-scheme: dark) {
-			background: var(--bg);
+			background: var(--c-bg);
 		}
 
 		/* adds contrast when light text overlaps show number */
-		text-shadow: 2px 1px 0 var(--bg);
+		text-shadow: 2px 1px 0 var(--c-bg);
 	}
 
 	.play-button {
@@ -278,8 +276,8 @@
 		align-self: center;
 		border-width: 1px;
 		padding: 10px;
-		box-shadow: inset 0 0 0 2px color-mix(in lch, var(--fg) 50%, transparent 94%);
-		color: var(--fg);
+		box-shadow: inset 0 0 0 2px color-mix(in lch, var(--c-fg) 50%, transparent 94%);
+		color: var(--c-fg);
 	}
 
 	.show-number {
@@ -308,7 +306,7 @@
 	@container show-card (width > 600px) {
 		.highlight {
 			& .h3 {
-				font-size: var(--font-size-xl);
+				font-size: var(--fs-6);
 			}
 		}
 
diff --git a/src/lib/ShowTable.svelte b/src/lib/ShowTable.svelte
index ae13086a6..f3ef30a61 100644
--- a/src/lib/ShowTable.svelte
+++ b/src/lib/ShowTable.svelte
@@ -82,9 +82,9 @@
 	}
 
 	.show-type {
-		background: var(--yellow);
-		color: var(--black);
-		font-size: var(--font-size-xs);
+		background: var(--c-yellow);
+		color: var(--c-black);
+		font-size: var(--fs-2);
 		rotate: 2deg;
 		margin-bottom: -4px;
 		text-transform: uppercase;
diff --git a/src/lib/Svg.svelte b/src/lib/Svg.svelte
index 20105dbef..fb2c454d9 100644
--- a/src/lib/Svg.svelte
+++ b/src/lib/Svg.svelte
@@ -8,7 +8,7 @@
 		stroke: string | null;
 	}
 
-	let { name, fill = 'var(--accent)', stroke }: Props = $props();
+	let { name, fill = 'var(--c-primary)', stroke }: Props = $props();
 	let img: HTMLImageElement = $state(null!);
 </script>
 
diff --git a/src/lib/Tabs.svelte b/src/lib/Tabs.svelte
index 18a4f054a..40f6f92d7 100644
--- a/src/lib/Tabs.svelte
+++ b/src/lib/Tabs.svelte
@@ -25,23 +25,23 @@
 
 			& > a {
 				padding: 10px 1rem;
-				border-radius: var(--brad) var(--brad) 0 0;
+				border-radius: var(--br-medium) var(--br-medium) 0 0;
 				font-variation-settings: var(--fv-900);
 			}
 
 			a:hover {
-				background: var(--bg-1);
+				background: var(--c-bg);
 			}
 
 			a.active {
 				text-decoration: none;
 				background: var(--c-primary);
 				position: relative;
-				color: var(--dark);
+				color: var(--c-black);
 			}
 
 			& :global(a) {
-				color: var(--fg);
+				color: var(--c-fg);
 			}
 		}
 	}
diff --git a/src/lib/badges/Badge.svelte b/src/lib/badges/Badge.svelte
index aa1bce83f..8115f6a76 100644
--- a/src/lib/badges/Badge.svelte
+++ b/src/lib/badges/Badge.svelte
@@ -14,8 +14,8 @@
 
 <style lang="postcss">
 	.badge {
-		background: color-mix(in lch, var(--fg), transparent 94%);
-		color: var(--fg);
+		background: color-mix(in lch, var(--c-fg), transparent 94%);
+		color: var(--c-fg);
 		padding: 2px 4px;
 		border-radius: 2px;
 	}
diff --git a/src/lib/forms/InlineError.svelte b/src/lib/forms/InlineError.svelte
index 5d1d95445..19a0c30ac 100644
--- a/src/lib/forms/InlineError.svelte
+++ b/src/lib/forms/InlineError.svelte
@@ -14,8 +14,8 @@
 
 <style>
 	.inline-error {
-		color: var(--red);
-		font-size: var(--font-size-xs);
+		color: var(--c-red);
+		font-size: var(--fs-2);
 		margin: 0;
 	}
 </style>
diff --git a/src/lib/forms/Input.svelte b/src/lib/forms/Input.svelte
index 66fc85483..9eb2e7463 100644
--- a/src/lib/forms/Input.svelte
+++ b/src/lib/forms/Input.svelte
@@ -4,16 +4,10 @@
 		type?: HTMLInputElement['type'];
 		value?: string;
 		id: string;
-		[key: string]: any
+		[key: string]: any;
 	}
 
-	let {
-		label = '',
-		type = 'text',
-		value = $bindable(''),
-		id,
-		...rest
-	}: Props = $props();
+	let { label = '', type = 'text', value = $bindable(''), id, ...rest }: Props = $props();
 
 	function typeAction(node: HTMLInputElement) {
 		node.type = type;
@@ -35,14 +29,14 @@
 		position: absolute;
 		top: -40%;
 		left: 0;
-		font-size: var(--font-size-xs);
+		font-size: var(--fs-2);
 	}
 
 	input {
 		font-size: var(--font-size-base);
 		padding: 8px 14px;
 		border: none;
-		box-shadow: inset 0 0 0 3px oklch(var(--blacklch) / 0.2);
+		box-shadow: inset 0 0 0 3px oklch(var(--c-blacklch) / 0.2);
 		border-radius: 4px;
 		width: 100%;
 	}
diff --git a/src/lib/forms/UserSubmissionForm.svelte b/src/lib/forms/UserSubmissionForm.svelte
index a5404f811..f8a1c38a9 100644
--- a/src/lib/forms/UserSubmissionForm.svelte
+++ b/src/lib/forms/UserSubmissionForm.svelte
@@ -152,14 +152,14 @@
 
 	.status {
 		padding: 10px;
-		background: var(--subtle);
+		background: var(--c-black-1);
 		border-left: 8px solid var(--c-primary);
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 		margin: 1rem 0;
 		width: fit-content;
 
 		&.error {
-			border-color: var(--warning);
+			border-color: var(--c-red);
 		}
 
 		p {
@@ -174,7 +174,7 @@
 		padding: 0.6rem;
 		border-radius: 5px;
 		font-family: var(--ff-body);
-		border: 1px solid var(--fg);
+		border: 1px solid var(--c-fg);
 	}
 
 	textarea {
@@ -183,7 +183,7 @@
 	}
 
 	.required {
-		color: var(--warning);
+		color: var(--c-red);
 		font-size: 8px;
 		text-transform: uppercase;
 		margin: 0;
diff --git a/src/lib/hosts/Host.svelte b/src/lib/hosts/Host.svelte
index ec183c56d..9bb11d917 100644
--- a/src/lib/hosts/Host.svelte
+++ b/src/lib/hosts/Host.svelte
@@ -71,10 +71,10 @@
 	}
 
 	.host-guest-tag {
-		background: var(--yellow);
-		color: var(--black);
+		background: var(--c-yellow);
+		color: var(--c-black);
 		padding: 0 4px;
 		transform: rotate(-3deg);
-		font-size: var(--font-size-xs);
+		font-size: var(--fs-2);
 	}
 </style>
diff --git a/src/lib/hosts/HostSocialLink.svelte b/src/lib/hosts/HostSocialLink.svelte
index 42065a7cd..a5329555c 100644
--- a/src/lib/hosts/HostSocialLink.svelte
+++ b/src/lib/hosts/HostSocialLink.svelte
@@ -2,12 +2,12 @@
 	import Icon from '$lib/Icon.svelte';
 	interface Props {
 		host: {
-		name: string;
-		github?: string | null;
-		twitter?: string | null;
-		url?: string | null;
-		slug?: string;
-	};
+			name: string;
+			github?: string | null;
+			twitter?: string | null;
+			url?: string | null;
+			slug?: string;
+		};
 	}
 
 	let { host }: Props = $props();
@@ -37,13 +37,15 @@
 <style lang="postcss">
 	.social-icon {
 		display: inline-block;
+
 		--icon_size: 12px;
 	}
 
 	a {
-		color: var(--fg);
+		color: var(--c-fg);
+
 		&:hover {
-			color: var(--accent);
+			color: var(--c-primary);
 		}
 	}
 </style>
diff --git a/src/lib/layout/Footer.svelte b/src/lib/layout/Footer.svelte
index 9e60c4a90..69e988534 100644
--- a/src/lib/layout/Footer.svelte
+++ b/src/lib/layout/Footer.svelte
@@ -4,7 +4,7 @@
 	import ProducedBySentry from './ProducedBySentry.svelte';
 </script>
 
-<footer class="layout zone" style:--bg="var(--bg-root)" style:--fg="var(--fg-1)">
+<footer class="layout zone" style:--c-bg="var(--c-bg)" style:--c-fg="var(--c-fg-1)">
 	<div>
 		<FooterLinks />
 
diff --git a/src/lib/layout/FooterLinks.svelte b/src/lib/layout/FooterLinks.svelte
index 077bf2383..458fbb312 100644
--- a/src/lib/layout/FooterLinks.svelte
+++ b/src/lib/layout/FooterLinks.svelte
@@ -61,7 +61,7 @@
 
 <style>
 	section {
-		font-size: var(--fs-caption);
+		font-size: var(--fs-2);
 
 		ul {
 			width: 50%;
diff --git a/src/lib/layout/Nav.svelte b/src/lib/layout/Nav.svelte
index 02e82d1df..3a9511bac 100644
--- a/src/lib/layout/Nav.svelte
+++ b/src/lib/layout/Nav.svelte
@@ -36,7 +36,7 @@
 
 			& a,
 			button {
-				font-size: var(--fs-caption);
+				font-size: var(--fs-2);
 				display: flex;
 				flex-wrap: nowrap;
 				align-items: center;
diff --git a/src/lib/layout/ProducedBySentry.svelte b/src/lib/layout/ProducedBySentry.svelte
index 3993bccc6..bc15d400a 100644
--- a/src/lib/layout/ProducedBySentry.svelte
+++ b/src/lib/layout/ProducedBySentry.svelte
@@ -9,7 +9,7 @@
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 44" height="35px"
 			><path
 				d="M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"
-				fill="white"
+				fill="var(--c-white)"
 			></path></svg
 		>
 		<span>Syntax is Produced by Sentry</span>
@@ -40,7 +40,7 @@
 	.presented {
 		align-items: start;
 		gap: 20px;
-		box-shadow: inset 0 0 0 4px rgb(from black r g b / 0.2);
+		box-shadow: inset 0 0 0 4px rgb(from var(--c-black) r g b / 0.2);
 		border-radius: var(--br-medium);
 		padding: 1rem;
 		margin: 2rem 0;
diff --git a/src/lib/newsletter/NewsletterForm.svelte b/src/lib/newsletter/NewsletterForm.svelte
index 22c27ded7..89ac5c47e 100644
--- a/src/lib/newsletter/NewsletterForm.svelte
+++ b/src/lib/newsletter/NewsletterForm.svelte
@@ -83,10 +83,12 @@
 		form {
 			flex: 1 0 500px;
 			text-align: center;
+
 			/* max-width: 500px; */
 			> *:first-child {
 				margin-top: 0;
 			}
+
 			> *:last-child {
 				margin-bottom: 0;
 			}
@@ -98,6 +100,7 @@
 			justify-content: center;
 			flex-wrap: wrap;
 			margin: 2rem 0;
+
 			:global(.input) {
 				width: clamp(200px, 300px, 400px);
 			}
@@ -108,8 +111,9 @@
 				/* shrink form when small container */
 				flex: 1 1 100%;
 			}
+
 			p {
-				font-size: var(--font-size-sm);
+				font-size: var(--fs-3);
 			}
 
 			.newsletter button {
diff --git a/src/lib/newsletter/NewsletterLogo.svelte b/src/lib/newsletter/NewsletterLogo.svelte
index 2ffeba5fe..9eac40b71 100644
--- a/src/lib/newsletter/NewsletterLogo.svelte
+++ b/src/lib/newsletter/NewsletterLogo.svelte
@@ -1,13 +1,13 @@
 <img src="/snackpack/snackpack-submark-nuggets.webp" alt="Syntax Snack Pack Logo" />
 
 <style lang="postcss">
-	/* use mask so that text can match foreground text color (--fg) */
+	/* use mask so that text can match foreground text color (--c-fg) */
 	img {
 		width: 100%;
 		mask-image: url('/snackpack/snackpack-submark-mask.webp');
 		mask-position: 0 0;
 		mask-size: 100% 100%;
-		background: var(--fg);
+		background: var(--c-fg);
 		mask-type: alpha;
 	}
 </style>
diff --git a/src/lib/newsletter/SwaggyNewsletterForm.svelte b/src/lib/newsletter/SwaggyNewsletterForm.svelte
index 76c808fe7..9b827e556 100644
--- a/src/lib/newsletter/SwaggyNewsletterForm.svelte
+++ b/src/lib/newsletter/SwaggyNewsletterForm.svelte
@@ -42,8 +42,8 @@
 
 <style lang="postcss">
 	h5 {
-		background: var(--black);
-		color: var(--white);
+		background: var(--c-black);
+		color: var(--c-white);
 		padding: 10px 15px;
 		rotate: -2deg;
 		z-index: 3;
@@ -59,7 +59,7 @@
 		font-style: italic;
 		margin: 0.5rem 0 1.5rem;
 		text-align: center;
-		font-size: var(--font-size-s);
+		font-size: var(--fs-3);
 	}
 
 	.newsletter {
@@ -68,8 +68,8 @@
 	}
 
 	.newsletter-layout :global(input) {
-		box-shadow: inset 0 0 0 3px var(--black);
-		font-size: var(--font-size-s);
+		box-shadow: inset 0 0 0 3px var(--c-black);
+		font-size: var(--fs-3);
 		width: 100%;
 	}
 
@@ -83,6 +83,6 @@
 
 	.newsletter-layout {
 		background: var(--c-primary);
-		color: var(--black);
+		color: var(--c-black);
 	}
 </style>
diff --git a/src/lib/player/Album.svelte b/src/lib/player/Album.svelte
index 03c3b4226..60c82e440 100644
--- a/src/lib/player/Album.svelte
+++ b/src/lib/player/Album.svelte
@@ -23,7 +23,7 @@
 
 <style lang="postcss">
 	.album {
-		background-color: var(--bg-root);
+		background-color: var(--c-bg);
 		padding: 5px;
 		background-size: cover;
 		border-radius: 4px;
diff --git a/src/lib/player/AlbumArt.svelte b/src/lib/player/AlbumArt.svelte
index 207b5e0a3..6cf2140b8 100644
--- a/src/lib/player/AlbumArt.svelte
+++ b/src/lib/player/AlbumArt.svelte
@@ -35,10 +35,12 @@
 		flex-shrink: 0;
 		display: none;
 		position: relative;
+
 		@media (--above-med) {
 			display: block;
 		}
 	}
+
 	.cd {
 		position: absolute;
 		inset: 0;
@@ -56,6 +58,7 @@
 		80% {
 			translate: 35px;
 		}
+
 		100% {
 			translate: 35px;
 		}
diff --git a/src/lib/player/Player.svelte b/src/lib/player/Player.svelte
index 3c7817eb7..1ade9bf35 100644
--- a/src/lib/player/Player.svelte
+++ b/src/lib/player/Player.svelte
@@ -107,7 +107,7 @@
 							<media-time-display></media-time-display>
 							<div class="media-range-bookmarks">
 								<media-time-range
-									style:--media-range-bar-color="var(--white)"
+									style:--media-range-bar-color="var(--c-white)"
 									style:--media-range-thumb-background="var(--c-primary)"
 								></media-time-range>
 							</div>
@@ -195,7 +195,7 @@
 
 	p {
 		margin-top: 0;
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 	}
 
 	a {
@@ -213,18 +213,18 @@
 	}
 
 	.player {
-		--player-bg: var(--bg-root);
+		--player-bg: var(--c-bg);
 
 		container: player / inline-size;
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		width: 100%;
-		color: var(--fg);
+		color: var(--c-fg);
 		background-color: var(--player-bg, var(--c-black));
-		background-image: var(--bg-grit-dark);
+		background-image: var(--c-bg-grit-dark);
 		background-size: 400px;
-		box-shadow: 0 -5px 10px 0 oklch(var(--blacklch) / 0.4);
+		box-shadow: 0 -5px 10px 0 oklch(var(--c-blacklch) / 0.4);
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -292,7 +292,7 @@
 	media-duration-display,
 	media-time-display {
 		padding: 0;
-		font-size: var(--font-size-xs);
+		font-size: var(--fs-2);
 	}
 
 	media-time-display,
@@ -302,6 +302,6 @@
 
 	button {
 		--button-bg: transparent;
-		--button-fg: var(--fg);
+		--button-fg: var(--c-fg);
 	}
 </style>
diff --git a/src/lib/player/SaveOffline.svelte b/src/lib/player/SaveOffline.svelte
index 423b9cfd4..a93be4c05 100644
--- a/src/lib/player/SaveOffline.svelte
+++ b/src/lib/player/SaveOffline.svelte
@@ -71,19 +71,22 @@
 <style>
 	button {
 		--button-bg: transparent;
-		--button-fg: var(--fg);
+		--button-fg: var(--c-fg);
+
 		border-color: transparent;
 		border-radius: 22.5px;
 		padding: 0;
 		height: 25px;
 		width: 25px;
 	}
+
 	button > div {
 		transition:
 			0.2s translate linear(0, 0.75, 1),
 			0.2s 0.2s opacity linear(0, 0.75, 1),
 			0.2s rotate linear(0, -0.1, 0.75, 1);
 	}
+
 	.INITIAL {
 		opacity: 0;
 		pointer-events: none;
@@ -98,7 +101,7 @@
 	}
 
 	button:has(.SAVED) {
-		border: 1px solid var(--accent);
+		border: 1px solid var(--c-primary);
 	}
 
 	.SAVED {
diff --git a/src/lib/search/Search.svelte b/src/lib/search/Search.svelte
index 9ae32af45..3a44f665f 100644
--- a/src/lib/search/Search.svelte
+++ b/src/lib/search/Search.svelte
@@ -21,17 +21,18 @@
 
 <style lang="postcss">
 	.button-reset {
-		box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.0786987545689);
+		box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.0786987545689);
 		border-radius: 20px;
-		color: var(--fg);
+		color: var(--c-fg);
 	}
 
 	.shortcut {
 		display: flex;
 		gap: 4px;
 		align-items: center;
-		background-color: rgba(255, 255, 255, 0.1);
+		background-color: rgb(255 255 255 / 0.1);
 		padding: 4px;
+
 		@media (--below-med) {
 			display: none;
 		}
@@ -39,6 +40,6 @@
 
 	.shortcut kbd {
 		font-family: system-ui, sans-serif;
-		font-size: var(--font-size-xs);
+		font-size: var(--fs-2);
 	}
 </style>
diff --git a/src/lib/search/SearchBox.svelte b/src/lib/search/SearchBox.svelte
index 778b2a4db..6ebab8795 100644
--- a/src/lib/search/SearchBox.svelte
+++ b/src/lib/search/SearchBox.svelte
@@ -22,7 +22,7 @@
 
 	let worker: Worker = $state(null!);
 	let ready = $state(false);
-	let active_color = $state('var(--fg)');
+	let active_color = $state('var(--c-fg)');
 
 	let uid = $state(1);
 	const pending = new Set();
@@ -137,8 +137,8 @@
 <dialog
 	bind:this={modal}
 	class="zone"
-	style:--bg="var(--bg-sheet)"
-	style:--fg="var(--fg-sheet)"
+	style:--c-bg="var(--c-bg)"
+	style:--c-fg="var(--c-fg)"
 	use:clickOutDialog
 	onclick-outside={close}
 	aria-labelledby="search-header"
@@ -231,14 +231,14 @@
 
 <style lang="postcss">
 	header {
-		--border: var(--fg);
+		--border: var(--c-fg);
 
-		border-bottom: solid 4px var(--border);
+		border-bottom: var(--b-medium);
 		display: flex;
 		position: sticky;
 		top: 0;
 		z-index: 10;
-		background-color: var(--bg-sheet);
+		background-color: var(--c-bg);
 
 		&::before {
 			content: '> ';
@@ -259,14 +259,12 @@
 	}
 
 	dialog {
-		--search-height: 50vh;
-
 		padding: 0;
-		background-color: var(--bg-1);
-		height: var(--search-height);
-		border: var(--border);
-		border-color: var(--fg);
-		border-radius: var(--brad);
+		background-color: var(--c-bg);
+		height: var(--search-height, 50vh);
+		border: var(--b-medium);
+		border-color: var(--c-fg);
+		border-radius: var(--br-medium);
 		position: relative;
 		max-width: 100%;
 		width: 100%;
@@ -305,10 +303,10 @@
 		width: 100%;
 		border: none;
 		padding: 10px 50px 10px 10px;
-		font-size: var(--font-size-md);
+		font-size: var(--fs-4);
 		outline-color: transparent;
 		background-color: transparent;
-		color: var(--fg);
+		color: var(--c-fg);
 		font-family: var(--ff-body);
 	}
 
@@ -318,10 +316,10 @@
 		text-align: right;
 
 		p {
-			font-size: var(--font-size-smallest);
-			color: white;
+			font-size: var(--fs-1);
+			color: var(--c-white);
 			font-style: italic;
-			background: black;
+			background: var(--c-black);
 			padding: 5px;
 			margin: 0;
 			display: inline-block;
@@ -348,51 +346,51 @@
 			box-shadow: none;
 			border-radius: 0;
 			height: 20px;
-			background-color: var(--yellow);
+			background-color: var(--c-yellow);
 		}
 
 		button:nth-child(2) {
-			background-color: var(--teal);
+			background-color: var(--c-teal);
 		}
 
 		button:nth-child(3) {
-			background-color: var(--green);
+			background-color: var(--c-green);
 		}
 
 		button:nth-child(4) {
-			background-color: var(--red);
+			background-color: var(--c-red);
 		}
 
 		button:nth-child(5) {
-			background-color: var(--purple);
+			background-color: var(--c-purple);
 		}
 
 		button:nth-child(6) {
-			background-color: var(--black);
+			background-color: var(--c-black);
 		}
 
 		button:nth-child(7) {
-			background-color: var(--yellow-2);
+			background-color: var(--c-yellow-2);
 		}
 
 		button:nth-child(8) {
-			background-color: var(--teal-2);
+			background-color: var(--c-teal-2);
 		}
 
 		button:nth-child(9) {
-			background-color: var(--green-2);
+			background-color: var(--c-green-2);
 		}
 
 		button:nth-child(10) {
-			background-color: var(--red-2);
+			background-color: var(--c-red-2);
 		}
 
 		button:nth-child(11) {
-			background-color: var(--purple-2);
+			background-color: var(--c-purple-2);
 		}
 
 		button:nth-child(12) {
-			background-color: var(--black-2);
+			background-color: var(--c-black-2);
 		}
 	}
 </style>
diff --git a/src/lib/search/SearchResultList.svelte b/src/lib/search/SearchResultList.svelte
index ee94ca211..7c1d9521e 100644
--- a/src/lib/search/SearchResultList.svelte
+++ b/src/lib/search/SearchResultList.svelte
@@ -96,7 +96,7 @@
 
 <style lang="postcss">
 	.remove-from-recent {
-		color: var(--warning);
+		color: var(--c-red);
 		position: absolute;
 		right: -10px;
 		top: 50%;
@@ -104,19 +104,19 @@
 	}
 
 	.play-button {
-		background: var(--bg);
-		border: 2px solid var(--fg);
-		color: var(--fg);
+		background: var(--c-bg);
+		border: 2px solid var(--c-fg);
+		color: var(--c-fg);
 		padding: 5px 3px 5px 5px;
 		box-shadow: none;
 
-		--icon_size: 14px;
+		--icon-size: 14px;
 
 		height: 31px;
 		width: 31px;
 
 		&:hover {
-			color: var(--accent);
+			color: var(--c-primary);
 		}
 	}
 
@@ -149,7 +149,7 @@
 	}
 
 	li:hover {
-		background: var(--subtle);
+		background: var(--c-black-1);
 	}
 
 	a strong,
@@ -170,13 +170,13 @@
 	}
 
 	a span {
-		color: #737373;
+		color: var(--c-black-3);
 		margin: 0.4rem 0 0;
 	}
 
 	a :global(mark) {
 		--highlight-color: var(--c-primary);
-		--sk-text-1: var(--black);
+		--sk-text-1: var(--c-black);
 	}
 
 	a span :global(mark) {
@@ -192,7 +192,7 @@
 	}
 
 	a:focus strong {
-		color: white;
+		color: var(--c-white);
 	}
 
 	a:focus span :global(mark),
@@ -200,7 +200,7 @@
 		--highlight-color: hsl(240deg 8% 54%);
 
 		mix-blend-mode: lighten;
-		color: white;
+		color: var(--c-white);
 	}
 
 	a strong :global(mark) {
diff --git a/src/lib/search/SearchResults.svelte b/src/lib/search/SearchResults.svelte
index 7e54c7d42..7160ff271 100644
--- a/src/lib/search/SearchResults.svelte
+++ b/src/lib/search/SearchResults.svelte
@@ -19,10 +19,10 @@
 <style lang="postcss">
 	.info {
 		padding: 1rem;
-		font-size: 1.2rem;
+		font-size: var(--fs-2);
 		text-transform: uppercase;
-		background-color: var(--sk-back-2);
-		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
+		background-color: var(--c-bg);
+		border-radius: 0 0 var(--br-medium) var(--br-medium);
 		pointer-events: all;
 		margin: 0;
 	}
diff --git a/src/lib/share/HairButton.svelte b/src/lib/share/HairButton.svelte
index 8eac987f7..6cc249fe7 100644
--- a/src/lib/share/HairButton.svelte
+++ b/src/lib/share/HairButton.svelte
@@ -37,7 +37,7 @@
 <style>
 	button {
 		--button-bg: transparent;
-		--button-fg: var(--fg);
+		--button-fg: var(--c-fg);
 
 		padding: 0;
 	}
diff --git a/src/lib/share/ShareActions.svelte b/src/lib/share/ShareActions.svelte
index f60e3c9b0..3ccd55f5b 100644
--- a/src/lib/share/ShareActions.svelte
+++ b/src/lib/share/ShareActions.svelte
@@ -35,7 +35,7 @@
 	scrolling="no"
 	src="https://syntax.fm/embed/${show.number}"
 	title="Show Embed"
-	style="width: 100%; height: 230px; max-width: 1200px; border: 1px solid black"
+	style="width: 100%; height: 230px; max-width: 1200px; border: 1px solid var(--c-black)"
 />
 		`);
 		toast.success(
@@ -43,10 +43,11 @@
 		);
 	}
 
-	let time_stamp =
-		$derived(share_at_ts && $player?.audio?.currentTime
+	let time_stamp = $derived(
+		share_at_ts && $player?.audio?.currentTime
 			? `%3Ft%3D${toHMS(Math.trunc($player.audio?.currentTime))}`
-			: ``);
+			: ``
+	);
 	let share_url = $derived(`https%3A//syntax.fm/${show.number}${time_stamp}`);
 </script>
 
@@ -67,13 +68,13 @@
 	><Icon name="link" /> Link</button
 >
 <a
-	class="button share--x"
+	class="button share-x"
 	target="_blank"
 	href="https://twitter.com/intent/tweet?url={share_url}&text={show.title}&via=syntaxfm"
 	aria-label="Share on Twitter"><Icon name="x" /></a
 >
 <a
-	class="button share--facebook"
+	class="button share-facebook"
 	target="_blank"
 	aria-label="Share on Facebook"
 	href="https://facebook.com/sharer/sharer.php?u={share_url}&quote={show.title}"
@@ -81,24 +82,25 @@
 >
 <a
 	target="_blank"
-	class="button share--linkedin"
+	class="button share-linkedin"
 	aria-label="Share on LinkedIn"
 	href="https://www.linkedin.com/sharing/share-offsite/?url={share_url}"
 	><Icon name="linkedin" /> LinkedIn</a
 >
 
 <style lang="postcss">
-	.share--x {
-		--button-bg: linear-gradient(to bottom, var(--black-7) 0%, var(--black-8) 100%);
-		--button-fg: var(--white);
+	.share-x {
+		--button-bg: linear-gradient(to bottom, var(--c-black-7) 0%, var(--c-black-8) 100%);
+		--button-fg: var(--c-white);
 	}
 
-	.share--facebook {
+	.share-facebook {
 		--button-bg: linear-gradient(to bottom, #57b1f9 0%, #2d64f6 100%);
-		--button-fg: var(--white);
+		--button-fg: var(--c-white);
 	}
-	.share--linkedin {
+
+	.share-linkedin {
 		--button-bg: linear-gradient(to bottom, #57b1f9 0%, #2d64bc 100%);
-		--button-fg: var(--white);
+		--button-fg: var(--c-white);
 	}
 </style>
diff --git a/src/lib/share/ShareWindow.svelte b/src/lib/share/ShareWindow.svelte
index 00ec3c872..94fd69d6e 100644
--- a/src/lib/share/ShareWindow.svelte
+++ b/src/lib/share/ShareWindow.svelte
@@ -31,8 +31,8 @@
 <dialog
 	bind:this={modal}
 	class="zone"
-	style:--bg="var(--bg-sheet)"
-	style:--fg="var(--fg-sheet)"
+	style:--c-bg="var(--c-bg)"
+	style:--c-fg="var(--c-fg)"
 	use:clickOutDialog
 	onclose={close}
 	onclick-outside={close}
diff --git a/src/lib/theme/ThemeToggle.svelte b/src/lib/theme/ThemeToggle.svelte
index 736d7dffd..d595bf96a 100644
--- a/src/lib/theme/ThemeToggle.svelte
+++ b/src/lib/theme/ThemeToggle.svelte
@@ -7,6 +7,6 @@
 <style lang="postcss">
 	button {
 		background: transparent;
-		border: var(--yellow) solid 1px;
+		border: var(--c-yellow) solid 1px;
 	}
 </style>
diff --git a/src/lib/transcript/Squiggle.svelte b/src/lib/transcript/Squiggle.svelte
index bf6d0a70a..95966acae 100644
--- a/src/lib/transcript/Squiggle.svelte
+++ b/src/lib/transcript/Squiggle.svelte
@@ -12,7 +12,9 @@
 
 <svg
 	preserveAspectRatio="none"
-	style="--stroke: {stroke}px"
+	style="
+
+--stroke: {stroke}px"
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="0 0 {width} {height}"
 	class={top ? 'top' : 'bottom'}
@@ -28,14 +30,19 @@
 	svg {
 		position: absolute;
 		top: 100%;
+
 		--x: calc(25% + 3.5px);
 		--y: 0;
+
 		translate: var(--x) var(--y);
 		stroke: var(--highlight);
 		width: 26px;
+
 		&.top {
 			top: 0;
+
 			--y: -100%;
+
 			transform: rotateX(180deg);
 		}
 	}
diff --git a/src/lib/transcript/TableOfContents.svelte b/src/lib/transcript/TableOfContents.svelte
index ece6710c4..896800104 100644
--- a/src/lib/transcript/TableOfContents.svelte
+++ b/src/lib/transcript/TableOfContents.svelte
@@ -27,7 +27,7 @@
 		margin: 0;
 		padding: 0;
 
-		--border-color: var(--subtle);
+		--border-color: var(--c-black-1);
 
 		border: 1px solid var(--border-color);
 		border-radius: 10px;
@@ -47,7 +47,7 @@
 		list-style: none;
 		padding: 10px;
 		border-bottom: 1px solid var(--border-color);
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 
 		&:nth-child(odd) {
 			border-right: 1px solid var(--border-color);
@@ -60,13 +60,13 @@
 	}
 
 	a {
-		font-size: var(--font-size-s);
+		font-size: var(--fs-3);
 		text-decoration: none;
 	}
 
 	.timestamp {
 		display: inline;
-		font-size: var(--font-size-xs);
-		color: var(--subtle-accent);
+		font-size: var(--fs-2);
+		color: var(--c-black-1);
 	}
 </style>
diff --git a/src/lib/transcript/Transcript.svelte b/src/lib/transcript/Transcript.svelte
index d76eb2835..63aa8b40a 100644
--- a/src/lib/transcript/Transcript.svelte
+++ b/src/lib/transcript/Transcript.svelte
@@ -175,10 +175,11 @@
 
 <style lang="postcss">
 	.timeline {
-		--highlight: var(--subtle);
-		--future: var(--bg-2);
+		--highlight: var(--c-black-1);
+		--future: var(--c-black-2);
 		--current: var(--c-primary);
 		--past: var(--c-primary);
+		--gutter-border-size: 5px;
 	}
 
 	.past {
@@ -194,8 +195,8 @@
 				180deg,
 				var(--highlight) 0%,
 				var(--highlight) var(--progress),
-				/* clear Spacer */ var(--bg) calc(var(--progress)),
-				var(--bg) calc(var(--progress) + 2px),
+				/* clear Spacer */ var(--c-bg) calc(var(--progress)),
+				var(--c-bg) calc(var(--progress) + 2px),
 				var(--future) calc(var(--progress) + 2px)
 			);
 		}
@@ -222,9 +223,11 @@
 	h4 {
 		position: sticky;
 		top: 0;
-		font-size: var(--font-size-md);
+		font-size: var(--fs-4);
 		margin: 0;
 		z-index: 2;
+		padding: 1rem 0;
+		background: var(--c-bg);
 	}
 
 	.utterance {
@@ -232,7 +235,7 @@
 		display: grid;
 		grid-template-columns: 120px auto 1fr;
 		gap: 0 20px;
-		font-size: var(--font-size-xs);
+		font-size: var(--fs-2);
 
 		@media (--below-med) {
 			grid-template-columns: 67px 1fr;
@@ -257,10 +260,10 @@
 		grid-template-columns: 95px var(--horizonal-spacing) 1fr;
 		place-content: center;
 		gap: 20px;
-		font-size: var(--font-size-xs);
+		font-size: var(--fs-2);
 		position: sticky;
 		top: 0;
-		background: var(--bg);
+		background: var(--c-bg);
 		z-index: 2;
 		margin-top: var(--vertical-spacing);
 		margin-bottom: var(--vertical-spacing);
@@ -284,11 +287,6 @@
 		}
 	}
 
-	h4 {
-		padding: 1rem 0;
-		background: var(--bg);
-	}
-
 	.marker {
 		position: relative;
 		display: grid;
@@ -339,7 +337,7 @@
 		height: var(--size);
 		position: relative;
 		border-radius: 50%;
-		border: 1.5px solid var(--bg);
+		border: 1.5px solid var(--c-bg);
 		background: var(--highlight);
 		justify-self: center;
 
@@ -348,12 +346,8 @@
 		}
 	}
 
-	.timeline {
-		--gutter-border-size: 5px;
-	}
-
 	.speaker {
-		font-size: var(--font-size-sm);
-		color: var(--subtle-accent);
+		font-size: var(--fs-3);
+		color: var(--c-black-1-accent);
 	}
 </style>
diff --git a/src/lib/videos/PlaylistCard.svelte b/src/lib/videos/PlaylistCard.svelte
index 302322223..9142ac922 100644
--- a/src/lib/videos/PlaylistCard.svelte
+++ b/src/lib/videos/PlaylistCard.svelte
@@ -4,12 +4,12 @@
 
 	interface Props {
 		playlist: Playlist & {
-		item_count: number;
-		videos: PlaylistOnVideo[] &
-			{
-				video: Video;
-			}[];
-	};
+			item_count: number;
+			videos: PlaylistOnVideo[] &
+				{
+					video: Video;
+				}[];
+		};
 	}
 
 	let { playlist }: Props = $props();
@@ -38,31 +38,36 @@
 	}
 
 	article {
-		--bg: var(--bg-1);
+		--c-bg: var(--c-bg-1);
+
 		container: show-card / inline-size;
 		display: grid;
 		padding: 20px;
-		background-color: var(--bg);
-		background-image: var(--bg-grit);
+		background-color: var(--c-bg);
+		background-image: var(--c-bg-grit);
 		position: relative;
 		overflow: hidden;
 		align-items: start;
+
 		& a {
 			display: flex;
 			gap: 10px;
 		}
 
 		&:hover {
-			background-color: color-mix(in lch, var(--fg), var(--bg) 96%);
+			background-color: color-mix(in lch, var(--c-fg), var(--c-bg) 96%);
 		}
+
 		&.card {
-			border-radius: var(--brad);
-			border: solid var(--border-size) var(--subtle);
+			border-radius: var(--br-medium);
+			border: solid var(--border-size) var(--c-black-1);
 		}
+
 		.playlist-grid {
 			display: grid;
-			grid-gap: 20px;
+			gap: 20px;
 			grid-template-columns: 1fr;
+
 			@media (--above-med) {
 				grid-template-columns: repeat(3, minmax(190px, 1fr));
 			}
@@ -79,21 +84,23 @@
 		font-size: var(--font-size-lg);
 		line-height: 1.2;
 		text-shadow:
-			1px 0 0 var(--bg),
-			0 1px 0 var(--bg),
-			-1px 0 0 var(--bg),
-			0 -1px 0 var(--bg);
+			1px 0 0 var(--c-bg),
+			0 1px 0 var(--c-bg),
+			-1px 0 0 var(--c-bg),
+			0 -1px 0 var(--c-bg);
 	}
 
 	.date {
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 		margin: 0;
 		view-transition-name: var(--transition-name);
 		width: max-content;
+
 		@media (prefers-color-scheme: dark) {
-			background: var(--bg);
+			background: var(--c-bg);
 		}
+
 		/* adds contrast when light text overlaps show number */
-		text-shadow: 2px 1px 0px var(--bg);
+		text-shadow: 2px 1px 0 var(--c-bg);
 	}
 </style>
diff --git a/src/lib/videos/PlaylistVideo.svelte b/src/lib/videos/PlaylistVideo.svelte
index aacef2300..5e9800d06 100644
--- a/src/lib/videos/PlaylistVideo.svelte
+++ b/src/lib/videos/PlaylistVideo.svelte
@@ -29,7 +29,7 @@
 
 	.thumbnail {
 		overflow: hidden;
-		border-radius: var(--brad);
+		border-radius: var(--br-medium);
 	}
 
 	img {
diff --git a/src/params/ThemeMaker.svelte b/src/params/ThemeMaker.svelte
index cc6de1089..2e877ab16 100644
--- a/src/params/ThemeMaker.svelte
+++ b/src/params/ThemeMaker.svelte
@@ -85,7 +85,7 @@
 		height: 100vh;
 		overflow: hidden;
 		backdrop-filter: blur(10px);
-		color: var(--sheet-fg);
+		color: var(--c-fg);
 		padding: var(--default-padding);
 		overflow-y: scroll;
 		border-left: var(--border);
@@ -111,8 +111,8 @@
 
 	.theme-preview {
 		display: block;
-		background: var(--bg-sheet);
-		color: var(--fg-sheet);
+		background: var(--c-bg);
+		color: var(--c-fg);
 		padding: 10px;
 
 		& p {
@@ -127,7 +127,7 @@
 	}
 
 	.color {
-		background: var(--fg-sheet);
+		background: var(--c-fg);
 	}
 
 	.primary {
@@ -135,16 +135,16 @@
 	}
 
 	.accent {
-		background: var(--accent);
+		background: var(--c-primary);
 	}
 
 	.warning {
-		background: var(--warning);
+		background: var(--c-red);
 	}
 
 	.theme-maker-buttons {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-		grid-gap: 1rem;
+		gap: 1rem;
 	}
 </style>
diff --git a/src/routes/(blank)/embed/[show_number]/+page.svelte b/src/routes/(blank)/embed/[show_number]/+page.svelte
index 40b1b9be5..7d4860471 100644
--- a/src/routes/(blank)/embed/[show_number]/+page.svelte
+++ b/src/routes/(blank)/embed/[show_number]/+page.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <div class={'theme-system theme-wrapper zone'}>
-	<figure class="zone" style:--transition-name-bg="var(--black)" style:--fg="var(--white)">
+	<figure class="zone" style:--transition-name-bg="var(--c-black)" style:--c-fg="var(--c-white)">
 		<span style:--="show-date-{show.number}" class="show-number fv-900 grit">{show.number}</span>
 
 		<p class="show-page-date" style:--transition-name="show-date-{show.number}">
@@ -52,7 +52,7 @@
 									slot="play"
 									style="
 
---icon_size: 32px;"
+--icon-size: 32px;"
 								>
 									<Icon name="play" />
 								</span>
@@ -60,7 +60,7 @@
 									slot="pause"
 									style="
 
---icon_size: 32px;"
+--icon-size: 32px;"
 								>
 									<Icon name="pause" />
 								</span>
@@ -70,7 +70,7 @@
 							<media-time-display></media-time-display>
 							<div class="media-range-bookmarks">
 								<media-time-range
-									style:--media-range-bar-color="var(--white)"
+									style:--media-range-bar-color="var(--c-white)"
 									style:--media-range-thumb-background="var(--c-primary)"
 								></media-time-range>
 							</div>
@@ -111,7 +111,7 @@
 
 <style lang="postcss">
 	figure {
-		border-bottom: solid var(--fg) 1px;
+		border-bottom: solid var(--c-fg) 1px;
 		position: relative;
 		z-index: 1;
 		margin: 0;
@@ -120,7 +120,7 @@
 		padding: 20px;
 		background-size: contain;
 		background-image:
-			var(--bg-grit-dark),
+			var(--c-bg-grit-dark),
 			radial-gradient(farthest-side circle at 50% 0%, #3a006b66 4% 4%, #000 100%);
 	}
 
@@ -130,7 +130,7 @@
 
 	.overtake {
 		position: absolute;
-		background: var(--bg);
+		background: var(--c-bg);
 		inset: 0;
 		z-index: 1;
 		padding: 20px;
@@ -148,7 +148,7 @@
 	}
 
 	h1 {
-		font-size: var(--font-size-md);
+		font-size: var(--fs-4);
 		height: 64px;
 	}
 
@@ -168,7 +168,7 @@
 	}
 
 	.show-page-date {
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 	}
 
 	.show-number {
diff --git a/src/routes/(blank)/links/+page.svelte b/src/routes/(blank)/links/+page.svelte
index e63652377..a85269420 100644
--- a/src/routes/(blank)/links/+page.svelte
+++ b/src/routes/(blank)/links/+page.svelte
@@ -20,7 +20,7 @@
 	<div class="logo">
 		<a href="/"><Logo /></a>
 	</div>
-	<main class="layout zone" style:--bg="var(--bg-sheet)" style:--fg="var(--fg-sheet)">
+	<main class="layout zone" style:--c-bg="var(--c-bg)" style:--c-fg="var(--c-fg)">
 		<section>
 			<h3 class="h4" style="margin: 2rem 0;">Subscribe to the podcast</h3>
 			<PodcastLinks />
@@ -70,7 +70,7 @@
 			</div>
 		</section>
 
-		<div class="zone layout full" style:--bg="var(--black)" style:--fg="var(--white)">
+		<div class="zone layout full" style:--c-bg="var(--c-black)" style:--c-fg="var(--c-white)">
 			<div>
 				<NewsletterForm show_logo={false} />
 			</div>
@@ -98,7 +98,7 @@
 	}
 
 	a {
-		font-size: var(--font-size-md);
+		font-size: var(--fs-4);
 		font-variation-settings: var(--fv-400);
 	}
 </style>
diff --git a/src/routes/(blank)/og/[show_number_or_title]/+page.svelte b/src/routes/(blank)/og/[show_number_or_title]/+page.svelte
index 132845c08..5eca7db17 100644
--- a/src/routes/(blank)/og/[show_number_or_title]/+page.svelte
+++ b/src/routes/(blank)/og/[show_number_or_title]/+page.svelte
@@ -19,6 +19,6 @@
 	.og-container {
 		aspect-ratio: 1200 / 630;
 		overflow: hidden;
-		box-shadow: inset 0 0 0 10px var(--yellow);
+		box-shadow: inset 0 0 0 10px var(--c-yellow);
 	}
 </style>
diff --git a/src/routes/(blank)/og/[show_number_or_title]/ShowOg.svelte b/src/routes/(blank)/og/[show_number_or_title]/ShowOg.svelte
index 3546f878e..a97598189 100644
--- a/src/routes/(blank)/og/[show_number_or_title]/ShowOg.svelte
+++ b/src/routes/(blank)/og/[show_number_or_title]/ShowOg.svelte
@@ -13,10 +13,12 @@
 	let { show, show_date = show.date ? new Date(show.date) : null }: Props = $props();
 
 	let hosts = (
-		show.hosts?.length > 0 ? show.hosts : [
-			{ name: 'Wes Bos', username: 'wesbos' },
-			{ name: 'Scott Tolinski', username: 'stolinski' }
-		]
+		show.hosts?.length > 0
+			? show.hosts
+			: [
+					{ name: 'Wes Bos', username: 'wesbos' },
+					{ name: 'Scott Tolinski', username: 'stolinski' }
+				]
 	).map((host) => ({
 		name: host.name || '',
 		github: host.username || ''
@@ -30,7 +32,6 @@
 		}))
 	];
 
-
 	function fitText(node: HTMLHeadElement) {
 		node.classList.remove('finish-sizing-text');
 		// Find out how many lines this text needs to be.
@@ -109,10 +110,7 @@
 		</h1>
 
 		<div class="brand-footer">
-			<FacePile
-				size="120px"
-				faces={allFaces}
-			/>
+			<FacePile size="120px" faces={allFaces} />
 			<div class="grit logos">
 				<svg height="100px" viewBox="0 0 1371 1212" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<title>Syntax</title>
@@ -139,15 +137,16 @@
 
 <style lang="postcss">
 	article {
-		border: 10px solid var(--yellow);
+		border: 10px solid var(--c-yellow);
 		border-radius: 35px;
 		container: show-card / inline-size;
 		display: grid;
 		padding: 20px;
-		background-image: var(--bg-grit-dark),
+		background-image:
+			var(--c-bg-grit-dark),
 			radial-gradient(farthest-side circle at 50% 0%, #3a006b66 4% 4%, #000 100%);
-		background-color: black;
-		color: var(--fg);
+		background-color: var(--c-black);
+		color: var(--c-fg);
 		position: relative;
 		align-items: start;
 		height: 100%;
@@ -171,21 +170,21 @@
 		transform: rotate(-1deg);
 		text-align: center;
 
-		/* black text outline in case white h1 text goes over yellow show number */
+		/* var(--c-black) text outline in case var(--c-white) h1 text goes over yellow show number */
 		text-shadow:
-			2px 0 0 black,
-			0 2px 0 black,
-			-2px 0 0 black,
-			0 -2px 0 black;
+			2px 0 0 var(--c-black),
+			0 2px 0 var(--c-black),
+			-2px 0 0 var(--c-black),
+			0 -2px 0 var(--c-black);
 	}
 
 	.date {
-		font-size: var(--font-size-md);
+		font-size: var(--fs-4);
 		margin: 0;
 	}
 
 	.sentry {
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 		width: 100%;
 	}
 
@@ -195,7 +194,7 @@
 		top: 0;
 		transform: translate(6.9%, -22%);
 		font-size: 20cqw;
-		color: var(--yellow);
+		color: var(--c-yellow);
 		line-height: 1;
 		z-index: -1;
 	}
diff --git a/src/routes/(site)/+layout.svelte b/src/routes/(site)/+layout.svelte
index 9349b3e49..803b20100 100644
--- a/src/routes/(site)/+layout.svelte
+++ b/src/routes/(site)/+layout.svelte
@@ -45,12 +45,7 @@
 	<Icon name="list" />
 	<Icon name="mail-send" />
 
-	<main
-		id="main-content"
-		class="layout zone"
-		style:--bg="var(--bg-sheet)"
-		style:--fg="var(--fg-sheet)"
-	>
+	<main id="main-content" class="layout zone" style:--c-bg="var(--c-bg)" style:--c-fg="var(--c-fg)">
 		{@render children?.()}
 	</main>
 
@@ -81,7 +76,7 @@
 		left: -1000px;
 		z-index: 1000;
 		background-color: var(--c-primary);
-		color: var(--bg);
+		color: var(--c-bg);
 		padding: 0.5rem;
 
 		&:focus {
diff --git a/src/routes/(site)/admin/+layout.svelte b/src/routes/(site)/admin/+layout.svelte
index 18fe259d1..d3ee73f3e 100644
--- a/src/routes/(site)/admin/+layout.svelte
+++ b/src/routes/(site)/admin/+layout.svelte
@@ -48,13 +48,16 @@
 		padding: 1rem 0;
 		display: flex;
 		gap: 20px;
+
 		a {
-			color: var(--fg);
+			color: var(--c-fg);
 		}
+
 		.active {
 			text-decoration: underline;
 		}
 	}
+
 	.admin {
 		padding-bottom: 4rem;
 	}
diff --git a/src/routes/(site)/admin/shows/[show_number]/+page.svelte b/src/routes/(site)/admin/shows/[show_number]/+page.svelte
index 50f8ff418..132954bf0 100644
--- a/src/routes/(site)/admin/shows/[show_number]/+page.svelte
+++ b/src/routes/(site)/admin/shows/[show_number]/+page.svelte
@@ -53,17 +53,18 @@
 	}
 
 	.errors {
-		color: red;
+		color: var(--c-red);
 	}
+
 	/* a[href^='#t='] {
-		background: var(--bg-1);
+		background: var(--c-bg-1);
 		padding: 4px 6px;
 		border-bottom: none;
 		text-decoration: none;
 		color: var(--color-2);
 		border-radius: 4px;
 		position: relative;
-		font-size: var(--font-size-sm);
+		font-size: var(--fs-3);
 		font-variation-settings: var(--fv-800);
 
 		@media (--above-med) {
diff --git a/src/routes/(site)/admin/shows/[show_number]/Dump.svelte b/src/routes/(site)/admin/shows/[show_number]/Dump.svelte
index 77bbe7f1e..424482f2d 100644
--- a/src/routes/(site)/admin/shows/[show_number]/Dump.svelte
+++ b/src/routes/(site)/admin/shows/[show_number]/Dump.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Dump from './Dump.svelte';
-	import { onMount } from 'svelte';
 
 	interface Props {
 		data: Record<any, any> | any[];
@@ -54,20 +53,23 @@
 
 <style lang="postcss">
 	table {
-		border: 1px solid black;
+		border: 1px solid var(--c-black);
 		width: 100%;
 		border-collapse: collapse;
 		position: relative;
+		color: var(--c-black);
 	}
+
 	th {
 		padding: 10px;
 		text-align: left;
-		background: black;
-		color: white;
+		background: var(--c-black);
+		color: var(--c-white);
 	}
+
 	td,
 	th {
-		border-bottom: 1px solid black;
+		border-bottom: 1px solid var(--c-black);
 		padding: 10px;
 		min-width: 50px;
 	}
diff --git a/src/routes/(site)/admin/submissions/+page.svelte b/src/routes/(site)/admin/submissions/+page.svelte
index a39572538..1c5c31243 100644
--- a/src/routes/(site)/admin/submissions/+page.svelte
+++ b/src/routes/(site)/admin/submissions/+page.svelte
@@ -101,7 +101,7 @@
 					<span class="pill">{submission.status}</span>
 				</h4>
 
-				<textarea class="submission_body"
+				<textarea class="submission-body"
 					>{submission.body.replaceAll('\n', '\n\n').trim()}
 				</textarea>
 				<footer>
@@ -149,11 +149,11 @@
 	}
 
 	h4 {
-		word-wrap: break-word;
+		overflow-wrap: break-word;
 	}
 
 	.submission {
-		border: 1px solid var(--fg);
+		border: 1px solid var(--c-fg);
 		padding: 2rem;
 		max-width: 100%;
 		display: grid;
@@ -162,12 +162,18 @@
 	}
 
 	footer {
-		display: flex;
 		flex-wrap: wrap;
+		border-top: 2px solid var(--c-fg);
+		display: grid;
+		padding-top: 1rem;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
 		gap: 1rem;
+		justify-content: end;
+		place-items: center;
 	}
 
-	.submission_body {
+	.submission-body {
 		max-height: 400px;
 		overflow-x: auto;
 		white-space: pre-wrap;
@@ -177,8 +183,8 @@
 	}
 
 	.pill {
-		font-size: 12px;
-		background: var(--subtle);
+		font-size: var(--fs-1);
+		background: var(--c-black-1);
 		padding: 2px 5px;
 		border-radius: 5px;
 	}
@@ -188,15 +194,4 @@
 		gap: 1rem;
 		padding: 1rem 0;
 	}
-
-	footer {
-		border-top: 2px solid var(--fg);
-		display: grid;
-		padding-top: 1rem;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		gap: 1rem;
-		justify-content: end;
-		place-items: center;
-	}
 </style>
diff --git a/src/routes/(site)/show/[show_number]/[slug]/+layout.svelte b/src/routes/(site)/show/[show_number]/[slug]/+layout.svelte
index 0b7226ffb..aa7f2a8ba 100644
--- a/src/routes/(site)/show/[show_number]/[slug]/+layout.svelte
+++ b/src/routes/(site)/show/[show_number]/[slug]/+layout.svelte
@@ -107,7 +107,7 @@
 		class="show-actions zone"
 		style="
 
---fg: var(--fg-root);"
+--c-fg: var(--c-fg);"
 	>
 		<div class="show-actions-flex">
 			<button onclick={play_show} data-testid="play-show">
@@ -187,17 +187,17 @@
 		h1 {
 			view-transition-name: var(--transition-name);
 			margin-top: 0;
-			font-size: var(--font-size-xxl);
+			font-size: var(--fs-9);
 			text-shadow:
-				1px 0 0 var(--bg),
-				0 1px 0 var(--bg),
-				-1px 0 0 var(--bg),
-				0 -1px 0 var(--bg);
+				1px 0 0 var(--c-bg),
+				0 1px 0 var(--c-bg),
+				-1px 0 0 var(--c-bg),
+				0 -1px 0 var(--c-bg);
 		}
 
 		.description span {
 			/* helps a11y when light text overlaps show number */
-			background-color: color-mix(in lch, var(--bg), transparent 50%);
+			background-color: color-mix(in lch, var(--c-bg), transparent 50%);
 		}
 
 		.show-actions-wrap {
@@ -205,10 +205,8 @@
 		}
 
 		.show-actions {
-			background: var(--bg-root);
-			color: var(--fg-root);
-
-			/* color: color-mix(as lch, var(--bg-sheet), transparent 50%); */
+			background: var(--c-bg);
+			color: var(--c-fg);
 			width: 110%;
 			left: -5%;
 			overflow: hidden;
@@ -232,7 +230,7 @@
 			align-items: center;
 
 			a {
-				color: var(--fg);
+				color: var(--c-fg);
 			}
 
 			@media (--below-med) {
@@ -242,7 +240,7 @@
 			}
 
 			.waves {
-				color: var(--accent);
+				color: var(--c-primary);
 				position: absolute;
 				z-index: 0;
 				background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1440px' fill='%23FABF46' height='51px' viewBox='0 0 1440 51' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Ewaves%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='%23fill' fill-rule='evenodd'%3E%3Cg id='waves' fill-rule='nonzero'%3E%3Cpath d='M0,39.906568 L6.2,39.906568 C12.3,39.906568 25,39.906568 37,34.3598519 C49.2,28.8131359 62,17.7197039 74,12.1729879 C86.2,6.62627186 98,6.62627186 111,4.77158869 C123.1,2.98623947 135,-0.82712779 148,0.160881 C160,1.07955584 172,6.62627186 185,6.62627186 C196.9,6.62627186 209,1.07955584 222,6.62627186 C233.8,12.1729879 246,28.8131359 258,28.8131359 C270.8,28.8131359 283,12.1729879 295,5.70759702 C307.7,-0.82712779 320,2.98623947 332,8.48095503 C344.6,14.0796715 357,21.3597363 369,25.1211031 C381.5,28.8131359 394,28.8131359 406,25.1211031 C418.5,21.3597363 431,14.0796715 443,13.0916627 C455.4,12.1729879 468,17.7197039 480,23.2664199 C492.3,28.8131359 505,34.3598519 517,38.0518848 C529.2,41.8132516 542,43.5466004 554,37.13321 C566.2,30.7198196 578,15.8130203 591,11.254313 C603.1,6.62627186 615,12.1729879 628,18.6383787 C640,25.1731035 652,32.4531683 665,34.3598519 C676.9,36.2665356 689,32.4531683 702,32.5051688 C713.8,32.4531683 726,36.2665356 738,34.3598519 C750.8,32.4531683 763,25.1731035 775,19.5743871 C787.7,14.0796715 800,10.2663042 812,8.48095503 C824.6,6.62627186 837,6.62627186 849,11.254313 C861.5,15.8130203 874,25.1731035 886,29.7318108 C898.5,34.3598519 911,34.3598519 923,33.4411771 C935.4,32.4531683 948,30.7198196 960,26.9584528 C972.3,23.2664199 985,17.7197039 997,18.6383787 C1009.2,19.6263875 1022,26.9064523 1034,33.4411771 C1046.2,39.906568 1058,45.453284 1071,41.7612511 C1083.1,37.9998843 1095,25.1731035 1108,22.3477451 C1120,19.6263875 1132,26.9064523 1145,27.8944611 C1156.9,28.8131359 1169,23.2664199 1182,24.1850948 C1193.8,25.1731035 1206,32.4531683 1218,38.0518848 C1230.8,43.5466004 1243,47.3599676 1255,44.5346091 C1267.7,41.8132516 1280,32.4531683 1292,26.9584528 C1304.6,21.3597363 1317,19.6263875 1329,14.9463459 C1341.5,10.2663042 1354,2.98623947 1366,1.99823068 C1378.5,1.07955584 1391,6.62627186 1403,14.027671 C1415.4,21.3597363 1428,30.7198196 1434,35.2785268 L1440,39.906568 L1440,51 L1433.8,51 C1427.7,51 1415,51 1403,51 C1390.8,51 1378,51 1366,51 C1353.8,51 1342,51 1329,51 C1316.9,51 1305,51 1292,51 C1280,51 1268,51 1255,51 C1243.1,51 1231,51 1218,51 C1206.2,51 1194,51 1182,51 C1169.2,51 1157,51 1145,51 C1132.3,51 1120,51 1108,51 C1095.4,51 1083,51 1071,51 C1058.5,51 1046,51 1034,51 C1021.5,51 1009,51 997,51 C984.6,51 972,51 960,51 C947.7,51 935,51 923,51 C910.8,51 898,51 886,51 C873.8,51 862,51 849,51 C836.9,51 825,51 812,51 C800,51 788,51 775,51 C763.1,51 751,51 738,51 C726.2,51 714,51 702,51 C689.2,51 677,51 665,51 C652.3,51 640,51 628,51 C615.4,51 603,51 591,51 C578.5,51 566,51 554,51 C541.5,51 529,51 517,51 C504.6,51 492,51 480,51 C467.7,51 455,51 443,51 C430.8,51 418,51 406,51 C393.8,51 382,51 369,51 C356.9,51 345,51 332,51 C320,51 308,51 295,51 C283.1,51 271,51 258,51 C246.2,51 234,51 222,51 C209.2,51 197,51 185,51 C172.3,51 160,51 148,51 C135.4,51 123,51 111,51 C98.5,51 86,51 74,51 C61.5,51 49,51 37,51 C24.6,51 12,51 6,51 L0,51 L0,39.906568 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
@@ -274,7 +272,7 @@
 
 			--max-font-size: 15rem;
 
-			font-size: clamp(1.5rem, 45cqw, var(--max-font-size));
+			font-size: clamp(1.5rem, 45cqw, var(--fs-6));
 			color: var(--c-primary);
 			line-height: 1;
 			transform: rotate(-2deg);
diff --git a/src/routes/(site)/show/[show_number]/[slug]/+page.svelte b/src/routes/(site)/show/[show_number]/[slug]/+page.svelte
index ee1aac91d..3c7c05d1d 100644
--- a/src/routes/(site)/show/[show_number]/[slug]/+page.svelte
+++ b/src/routes/(site)/show/[show_number]/[slug]/+page.svelte
@@ -32,7 +32,7 @@
 	.thumbnail {
 		width: 100%;
 		overflow: hidden;
-		border-radius: var(--brad);
+		border-radius: var(--br-medium);
 	}
 
 	.related-videos {
diff --git a/src/routes/(site)/snackpack/[issue_id]/+page.svelte b/src/routes/(site)/snackpack/[issue_id]/+page.svelte
index fe14b3267..deb5799e8 100644
--- a/src/routes/(site)/snackpack/[issue_id]/+page.svelte
+++ b/src/routes/(site)/snackpack/[issue_id]/+page.svelte
@@ -52,11 +52,8 @@ table {
 </main>
 
 <style>
-	header {
-		padding: var(--default-padding);
-	}
 	.newsletter-output {
-		border: 5px solid black;
-		background: white;
+		border: 5px solid var(--c-black);
+		background: var(--c-white);
 	}
 </style>
diff --git a/src/routes/(site)/videos/[p_slug]/+page.svelte b/src/routes/(site)/videos/[p_slug]/+page.svelte
index 1366bd9b8..cf5d5a212 100644
--- a/src/routes/(site)/videos/[p_slug]/+page.svelte
+++ b/src/routes/(site)/videos/[p_slug]/+page.svelte
@@ -19,12 +19,15 @@
 	img {
 		width: 100%;
 	}
+
 	.h6 {
 		margin-bottom: 0;
 	}
+
 	.playlist-grid {
 		display: grid;
-		grid-gap: 20px;
+		gap: 20px;
+
 		@media (--above-med) {
 			grid-template-columns: repeat(3, minmax(260px, 1fr));
 		}
diff --git a/src/routes/(site)/videos/[p_slug]/[v_slug]/+page.svelte b/src/routes/(site)/videos/[p_slug]/[v_slug]/+page.svelte
index a2a7406e3..207a90eac 100644
--- a/src/routes/(site)/videos/[p_slug]/[v_slug]/+page.svelte
+++ b/src/routes/(site)/videos/[p_slug]/[v_slug]/+page.svelte
@@ -21,7 +21,7 @@
 </script>
 
 {#if video}
-	<div class="video_page layout full">
+	<div class="video-page layout full">
 		<div class="content">
 			<youtube-video controls src="https://www.youtube.com/watch?v={video.id}"></youtube-video>
 			<h1 class="h3">{video.title}</h1>
@@ -44,12 +44,12 @@
 {/if}
 
 <style lang="postcss">
-	.video_page {
+	.video-page {
 		padding: 1rem 0;
 	}
 
 	youtube-video {
-		border-radius: var(--brad);
+		border-radius: var(--br-medium);
 		overflow: hidden;
 		aspect-ratio: 16 / 9;
 		width: 100%;
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index f3a7cb77c..6edebaf02 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -3,13 +3,12 @@
 	import Layout from './(site)/+layout.svelte';
 	import type { UserWithRoles } from '$/server/auth/users';
 
-	
 	interface Props {
 		// error page does not automatically infer layout data...
 		data: {
-		user: UserWithRoles;
-		user_theme: string;
-	};
+			user: UserWithRoles;
+			user_theme: string;
+		};
 	}
 
 	let { data }: Props = $props();
@@ -30,6 +29,6 @@
 
 <style>
 	.error {
-		color: var(--warning);
+		color: var(--c-red);
 	}
 </style>
diff --git a/src/styles/Variables.svelte b/src/styles/Variables.svelte
index a416a1119..4b493f4f5 100644
--- a/src/styles/Variables.svelte
+++ b/src/styles/Variables.svelte
@@ -338,11 +338,6 @@
 		margin-bottom: 2rem;
 	}
 
-	h2 {
-		margin-bottom: 1rem;
-		font-size: var(--fs-3);
-	}
-
 	.breakpoints {
 		display: flex;
 		flex-direction: column;
@@ -389,7 +384,7 @@
 
 	.var-name,
 	.color-name {
-		font-size: var(--fs-micro);
+		font-size: var(--fs-1);
 		margin-bottom: 0.5rem;
 	}
 
@@ -405,7 +400,7 @@
 	}
 
 	.var-value {
-		font-size: var(--fs-micro);
+		font-size: var(--fs-1);
 		color: var(--c-shade-or-tint-hard);
 	}
 
@@ -422,7 +417,7 @@
 	}
 
 	.typography-item code {
-		font-size: var(--fs-micro);
+		font-size: var(--fs-1);
 		color: var(--c-shade-or-tint-hard);
 	}
 
diff --git a/src/styles/bass.css b/src/styles/bass.css
index d18432df7..068057c0a 100644
--- a/src/styles/bass.css
+++ b/src/styles/bass.css
@@ -1,8 +1,11 @@
-/* Freeze!
+/* 
+https://www.youtube.com/watch?v=7bCdrDhUjPo
+Freeze!
 Rock (rock rock rock rock rock rock rock)
 Aaah, aaah, aaah, aaah
 Uh raah!
-Bass! */
+Bass!
+ */
 
 /* FR tho, base styles should only be styles on elements themselves. */
 
@@ -33,8 +36,6 @@ Bass! */
 			url('https://fonts.tolin.ski/fonts/MDIOVariable.woff') format('woff'),
 			local('MD IO Variable Regular'),
 			local('MDIOVariable-Regular');
-		font-weight: 100 900;
-		font-style: normal italic;
 	}
 
 	p,
@@ -139,7 +140,7 @@ Bass! */
 	}
 
 	thead th + th {
-		border-left: var(--border);
+		border-left: var(--b-light);
 	}
 
 	td {
@@ -147,8 +148,8 @@ Bass! */
 	}
 
 	::selection {
-		background: var(--c-primary);
-		color: var(--c-dark);
+		background: var(--c-fg);
+		color: var(--c-bg);
 	}
 
 	a[href^='http']:not(.social-icon)::after {
diff --git a/src/styles/reset.css b/src/styles/reset.css
index c911e3926..6dc44f484 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -11,13 +11,6 @@
 		margin: 0;
 	}
 
-	/* 3. Enable keyword animations */
-	@media (prefers-reduced-motion: no-preference) {
-		html {
-			interpolate-size: allow-keywords;
-		}
-	}
-
 	body {
 		/* 4. Add accessible line-height */
 		line-height: 1.5;
diff --git a/src/styles/theme.css b/src/styles/theme.css
index bcc9fc2a7..7ba5e08f8 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,4 +1 @@
-@layer theme {
-	body {
-	}
-}
+/* Hold */
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index e9cd0f029..6d9f41d49 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -1,51 +1,53 @@
 /* System theme */
-.theme-system {
-	--bg-sheet: var(--white);
-	--bg: var(--black);
-	--fg: var(--white);
-	--fg-sheet: var(--black);
-	--c-primary: var(--yellow);
-	--accent: var(--teal);
-	--warning: var(--red);
-	--bg-grit: var(--bg-grit-light);
+
+/* .theme-system {
+	--c-bg-sheet: var(--c-white);
+	--c-bg: var(--c-black);
+	--c-fg: var(--c-white);
+	--c-fg-sheet: var(--c-black);
+	--c-primary: var(--c-yellow);
+	--accent: var(--c-teal);
+	--warning: var(--c-red);
+	--c-bg-grit: var(--c-bg-grit-light);
 
 	@media (prefers-color-scheme: dark) {
-		--fg-sheet: var(--white);
-		--bg-sheet: var(--black);
-		--c-primary: var(--yellow);
-		--accent: var(--teal);
-		--subtle-accent: var(--yellow-1);
-		--warning: var(--red);
-		--bg-2: var(--black);
-		--bg-1: var(--black);
-		--bg: var(--black);
-		--fg-1: var(--white);
-		--fg-2: var(--black-3);
-		--border: solid var(--border-size) var(--fg-sheet);
-		--bg-grit: var(--bg-grit-dark);
+		--c-fg-sheet: var(--c-white);
+		--c-bg-sheet: var(--c-black);
+		--c-primary: var(--c-yellow);
+		--accent: var(--c-teal);
+		--c-black-1-accent: var(--c-yellow-1);
+		--warning: var(--c-red);
+		--c-bg-2: var(--c-black);
+		--c-bg-1: var(--c-black);
+		--c-bg: var(--c-black);
+		--c-fg-1: var(--c-white);
+		--c-fg-2: var(--c-black-3);
+		--border: solid var(--border-size) var(--c-fg-sheet);
+		--c-bg-grit: var(--c-bg-grit-dark);
 
 		.border-on-dark {
 			border: var(--border);
 		}
 	}
-}
+} */
 
 /* Same as prefers color scheme dark */
-.theme-dark {
-	--fg-sheet: var(--white);
-	--bg-sheet: var(--black);
-	--c-primary: var(--yellow);
-	--accent: var(--teal);
-	--subtle-accent: var(--yellow-1);
-	--warning: var(--red);
-	--bg-2: var(--black-8);
-	--bg-1: var(--black);
-	--bg: var(--black);
-	--fg-1: var(--white);
-	--fg-2: var(--black-3);
-	--border-color: var(--bg-sheet);
-	--border: solid var(--border-size) var(--fg-sheet);
-	--bg-grit: var(--bg-grit-dark);
+
+/* .theme-dark {
+	--c-fg-sheet: var(--c-white);
+	--c-bg-sheet: var(--c-black);
+	--c-primary: var(--c-yellow);
+	--accent: var(--c-teal);
+	--c-black-1-accent: var(--c-yellow-1);
+	--warning: var(--c-red);
+	--c-bg-2: var(--c-black-8);
+	--c-bg-1: var(--c-black);
+	--c-bg: var(--c-black);
+	--c-fg-1: var(--c-white);
+	--c-fg-2: var(--c-black-3);
+	--border-color: var(--c-bg-sheet);
+	--border: solid var(--border-size) var(--c-fg-sheet);
+	--c-bg-grit: var(--c-bg-grit-dark);
 
 	.border-on-dark {
 		border: var(--border);
@@ -53,12 +55,12 @@
 }
 
 .theme-light {
-	--bg-sheet: var(--white);
-	--bg: var(--black);
-	--fg: var(--white);
-	--fg-sheet: var(--black);
-	--c-primary: var(--yellow);
-	--accent: var(--teal);
-	--warning: var(--red);
-	--bg-grit: var(--bg-grit-light);
-}
+	--c-bg-sheet: var(--c-white);
+	--c-bg: var(--c-black);
+	--c-fg: var(--c-white);
+	--c-fg-sheet: var(--c-black);
+	--c-primary: var(--c-yellow);
+	--accent: var(--c-teal);
+	--warning: var(--c-red);
+	--c-bg-grit: var(--c-bg-grit-light);
+} */
diff --git a/src/styles/themes/hail.css b/src/styles/themes/hail.css
index 0416a3e2d..4516c9ebb 100644
--- a/src/styles/themes/hail.css
+++ b/src/styles/themes/hail.css
@@ -1,14 +1,14 @@
-.theme-hail {
-	--bg-sheet: var(--white);
-	--bg: #00274c;
-	--fg: var(--white);
-	--fg-1: var(--white);
-	--black: #131516;
-	--fg-sheet: var(--black);
-	--bg-grit: var(--bg-grit-light);
+/* .theme-hail {
+	--c-bg-sheet: var(--c-white);
+	--c-bg: #00274c;
+	--c-fg: var(--c-white);
+	--c-fg-1: var(--c-white);
+	--c-black: #131516;
+	--c-fg-sheet: var(--c-black);
+	--c-bg-grit: var(--c-bg-grit-light);
 	--c-primary: #ffcb05;
 	--accent: #ffcb05;
 	--warning: #9a3324;
 	--success: #ffcb05;
 	--line: #cfc096;
-}
+} */
diff --git a/src/styles/themes/level-up.css b/src/styles/themes/level-up.css
index f47c76a76..b0c026778 100644
--- a/src/styles/themes/level-up.css
+++ b/src/styles/themes/level-up.css
@@ -1,15 +1,16 @@
 /* Level Up Theme */
-.theme-level-up {
+
+/* .theme-level-up {
 	background-image: none;
 
-	--fg-1: var(--white);
-	--fg-sheet: #ebebe3;
-	--bg: #191324;
-	--bg-1: #191324;
-	--bg-2: var(--black-6);
-	--bg-sheet: #191324;
+	--c-fg-1: var(--c-white);
+	--c-fg-sheet: #ebebe3;
+	--c-bg: #191324;
+	--c-bg-1: #191324;
+	--c-bg-2: var(--c-black-6);
+	--c-bg-sheet: #191324;
 	--c-primary: #82d8d8;
 	--border-color: #82d8d8;
 	--border: solid 4px var(--border-color);
-	--subtle-accent: var(--purple-3);
-}
+	--c-black-1-accent: var(--purple-3);
+} */
diff --git a/src/styles/themes/sentry.css b/src/styles/themes/sentry.css
index d62f3ce7d..b57113eb1 100644
--- a/src/styles/themes/sentry.css
+++ b/src/styles/themes/sentry.css
@@ -1,10 +1,10 @@
-.theme-sentry {
-	--bg-sheet: var(--white);
-	--bg: #2d1130;
-	--fg: var(--white);
-	--fg-1: var(--white);
-	--fg-sheet: var(--black);
-	--bg-grit: var(--bg-grit-light);
+/* .theme-sentry {
+	--c-bg-sheet: var(--c-white);
+	--c-bg: #2d1130;
+	--c-fg: var(--c-white);
+	--c-fg-1: var(--c-white);
+	--c-fg-sheet: var(--c-black);
+	--c-bg-grit: var(--c-bg-grit-light);
 	--c-primary: #d15f7c;
 	--accent: #f9dc65;
-}
+} */
diff --git a/src/styles/themes/trigun.css b/src/styles/themes/trigun.css
index 6ff335c29..8a855b6e3 100644
--- a/src/styles/themes/trigun.css
+++ b/src/styles/themes/trigun.css
@@ -1,18 +1,18 @@
 /* Trigun Theme */
 
-.theme-trigun {
+/* .theme-trigun {
 	--c-primary: #d15f7c;
 	--accent: #f9dc65;
-	--fg: #e5d7ba;
-	--fg-1: white;
-	--fg-sheet: #43524d;
-	--bg: #43524d;
-	--bg-1: #eaede0;
-	--bg-sheet: #e5d7ba;
-	--bg-grit: var(--bg-grit-light);
-	--line: var(--bg);
+	--c-fg: #e5d7ba;
+	--c-fg-1: white;
+	--c-fg-sheet: #43524d;
+	--c-bg: #43524d;
+	--c-bg-1: #eaede0;
+	--c-bg-sheet: #e5d7ba;
+	--c-bg-grit: var(--c-bg-grit-light);
+	--line: var(--c-bg);
 	--hero-gradient-1: #253535;
 	--hero-gradient-2: #e5d7ba;
 	--c-sentry-footer-bg:
 		url('$assets/squiggle-greyscale.webp'), linear-gradient(315deg, #43524d 0.57%, #452650 100%);
-}
+} */
diff --git a/src/styles/themes/wave-race-64.css b/src/styles/themes/wave-race-64.css
index fb9aebb52..547dbc6a2 100644
--- a/src/styles/themes/wave-race-64.css
+++ b/src/styles/themes/wave-race-64.css
@@ -1,21 +1,21 @@
 /* Wave Race 64 Theme */
 
-.theme-wave-race-64 {
+/* .theme-wave-race-64 {
 	--purp: #a37592;
-	--green: hsl(111deg 100% 54%);
+	--c-green: hsl(111deg 100% 54%);
 	--blue: hsl(208deg 97% 37%);
-	--c-primary: var(--green);
+	--c-primary: var(--c-green);
 	--accent: var(--blue);
 	--warning: hsl(356deg 58% 55%);
-	--fg: #eee;
-	--fg-1: white;
-	--fg-sheet: #111;
+	--c-fg: #eee;
+	--c-fg-1: white;
+	--c-fg-sheet: #111;
 	--logo-color: #111;
-	--bg: #111;
-	--bg-1: #eaede0;
-	--bg-sheet: #eee;
-	--bg-grit: var(--bg-grit-light);
-	--line: var(--bg);
+	--c-bg: #111;
+	--c-bg-1: #eaede0;
+	--c-bg-sheet: #eee;
+	--c-bg-grit: var(--c-bg-grit-light);
+	--line: var(--c-bg);
 	--hero-gradient-1: #69cffa;
 	--hero-gradient-2: #3d4ef6;
 	--header-gradient-1: var(--hero-gradient-1);
@@ -25,7 +25,7 @@
 		linear-gradient(315deg, var(--purp) 0.57%, var(--blue) 100%);
 
 	nav {
-		--fg: #111;
+		--c-fg: #111;
 		--nav-a-bg: rgb(255 255 255 / 0.8);
 	}
-}
+} */
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 7e70f240a..0869ea02e 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -63,7 +63,6 @@
 		padding: 0;
 		border: 0;
 		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
 		white-space: nowrap;
 	}
 
@@ -105,6 +104,8 @@
 }
 
 .size {
+	--size: 0px;
+
 	width: var(--size);
 	height: var(--size);
 }
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 2e60bd41f..4af6e6c3d 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -23,76 +23,70 @@
 	/* Relative Colors */
 
 	/** Yellow variants **/
-	--c-yellow-1: oklch(from var(--c-yellow) calc(l + 0.35) calc(c - 0.12) h);
-	--c-yellow-2: oklch(from var(--c-yellow) calc(l + 0.25) calc(c - 0.08) h);
-	--c-yellow-3: oklch(from var(--c-yellow) calc(l + 0.15) calc(c - 0.05) h);
-	--c-yellow-4: oklch(from var(--c-yellow) calc(l + 0.07) c h);
-	--c-yellow-5: var(--c-yellow);
-	--c-yellow-6: oklch(from var(--c-yellow) calc(l - 0.07) c h);
-	--c-yellow-7: oklch(from var(--c-yellow) calc(l - 0.15) c h);
-	--c-yellow-8: oklch(from var(--c-yellow) calc(l - 0.22) c h);
-	--c-yellow-9: oklch(from var(--c-yellow) calc(l - 0.3) c h);
-	--c-yellow-10: oklch(from var(--c-yellow) calc(l - 0.75) c h);
+	--c-yellow-1: oklch(from var(--c-yellow) l c h / 0.1);
+	--c-yellow-2: oklch(from var(--c-yellow) l c h / 0.2);
+	--c-yellow-3: oklch(from var(--c-yellow) l c h / 0.3);
+	--c-yellow-4: oklch(from var(--c-yellow) l c h / 0.4);
+	--c-yellow-5: oklch(from var(--c-yellow) l c h / 0.5);
+	--c-yellow-6: oklch(from var(--c-yellow) l c h / 0.6);
+	--c-yellow-7: oklch(from var(--c-yellow) l c h / 0.7);
+	--c-yellow-8: oklch(from var(--c-yellow) l c h / 0.8);
+	--c-yellow-9: oklch(from var(--c-yellow) l c h / 0.9);
 
 	/** Teal variants **/
-	--c-teal-1: oklch(from var(--c-teal) calc(l + 0.2) calc(c - 0.14) h);
-	--c-teal-2: oklch(from var(--c-teal) calc(l + 0.25) calc(c - 0.1) h);
-	--c-teal-3: oklch(from var(--c-teal) calc(l + 0.15) calc(c - 0.05) h);
-	--c-teal-4: oklch(from var(--c-teal) calc(l + 0.07) calc(c - 0.03) h);
-	--c-teal-5: var(--c-teal);
-	--c-teal-6: oklch(from var(--c-teal) calc(l - 0.07) c h);
-	--c-teal-7: oklch(from var(--c-teal) calc(l - 0.15) c h);
-	--c-teal-8: oklch(from var(--c-teal) calc(l - 0.22) c h);
-	--c-teal-9: oklch(from var(--c-teal) calc(l - 0.3) c h);
-	--c-teal-10: oklch(from var(--c-teal) calc(l - 0.75) c h);
+	--c-teal-1: oklch(from var(--c-teal) l c h / 0.1);
+	--c-teal-2: oklch(from var(--c-teal) l c h / 0.2);
+	--c-teal-3: oklch(from var(--c-teal) l c h / 0.3);
+	--c-teal-4: oklch(from var(--c-teal) l c h / 0.4);
+	--c-teal-5: oklch(from var(--c-teal) l c h / 0.5);
+	--c-teal-6: oklch(from var(--c-teal) l c h / 0.6);
+	--c-teal-7: oklch(from var(--c-teal) l c h / 0.7);
+	--c-teal-8: oklch(from var(--c-teal) l c h / 0.8);
+	--c-teal-9: oklch(from var(--c-teal) l c h / 0.9);
 
 	/** Green variants **/
-	--c-green-1: oklch(from var(--c-green) calc(l + 0.35) calc(c - 0.15) h);
-	--c-green-2: oklch(from var(--c-green) calc(l + 0.25) calc(c - 0.1) h);
-	--c-green-3: oklch(from var(--c-green) calc(l + 0.15) calc(c - 0.05) h);
-	--c-green-4: oklch(from var(--c-green) calc(l + 0.07) calc(c - 0.03) h);
-	--c-green-5: var(--c-green);
-	--c-green-6: oklch(from var(--c-green) calc(l - 0.07) c h);
-	--c-green-7: oklch(from var(--c-green) calc(l - 0.15) c h);
-	--c-green-8: oklch(from var(--c-green) calc(l - 0.22) c h);
-	--c-green-9: oklch(from var(--c-green) calc(l - 0.3) c h);
-	--c-green-10: oklch(from var(--c-green) calc(l - 0.75) calc(c - 0.1) h);
+	--c-green-1: oklch(from var(--c-green) l c h / 0.1);
+	--c-green-2: oklch(from var(--c-green) l c h / 0.2);
+	--c-green-3: oklch(from var(--c-green) l c h / 0.3);
+	--c-green-4: oklch(from var(--c-green) l c h / 0.4);
+	--c-green-5: oklch(from var(--c-green) l c h / 0.5);
+	--c-green-6: oklch(from var(--c-green) l c h / 0.6);
+	--c-green-7: oklch(from var(--c-green) l c h / 0.7);
+	--c-green-8: oklch(from var(--c-green) l c h / 0.8);
+	--c-green-9: oklch(from var(--c-green) l c h / 0.9);
 
 	/** Red variants **/
-	--c-red-1: oklch(from var(--c-red) calc(l + 0.35) calc(c - 0.1) h);
-	--c-red-2: oklch(from var(--c-red) calc(l + 0.25) calc(c - 0.09) h);
-	--c-red-3: oklch(from var(--c-red) calc(l + 0.15) calc(c - 0.07) h);
-	--c-red-4: oklch(from var(--c-red) calc(l + 0.07) calc(c - 0.03) h);
-	--c-red-5: var(--c-red);
-	--c-red-6: oklch(from var(--c-red) calc(l - 0.07) c h);
-	--c-red-7: oklch(from var(--c-red) calc(l - 0.15) c h);
-	--c-red-8: oklch(from var(--c-red) calc(l - 0.22) c h);
-	--c-red-9: oklch(from var(--c-red) calc(l - 0.3) c h);
-	--c-red-10: oklch(from var(--c-red) calc(l - 0.4) c h);
+	--c-red-1: oklch(from var(--c-red) l c h / 0.1);
+	--c-red-2: oklch(from var(--c-red) l c h / 0.2);
+	--c-red-3: oklch(from var(--c-red) l c h / 0.3);
+	--c-red-4: oklch(from var(--c-red) l c h / 0.4);
+	--c-red-5: oklch(from var(--c-red) l c h / 0.5);
+	--c-red-6: oklch(from var(--c-red) l c h / 0.6);
+	--c-red-7: oklch(from var(--c-red) l c h / 0.7);
+	--c-red-8: oklch(from var(--c-red) l c h / 0.8);
+	--c-red-9: oklch(from var(--c-red) l c h / 0.9);
 
 	/** Purple variants **/
-	--c-purple-1: oklch(from var(--c-purple) calc(l + 0.6) c h);
-	--c-purple-2: oklch(from var(--c-purple) calc(l + 0.5) c h);
-	--c-purple-3: oklch(from var(--c-purple) calc(l + 0.3) c h);
-	--c-purple-4: oklch(from var(--c-purple) calc(l + 0.1) c h);
-	--c-purple-5: var(--c-purple);
-	--c-purple-6: oklch(from var(--c-purple) calc(l - 0.07) c h);
-	--c-purple-7: oklch(from var(--c-purple) calc(l - 0.15) c h);
-	--c-purple-8: oklch(from var(--c-purple) calc(l - 0.22) c h);
-	--c-purple-9: oklch(from var(--c-purple) calc(l - 0.3) c h);
-	--c-purple-10: oklch(from var(--c-purple) calc(l - 0.4) c h);
+	--c-purple-1: oklch(from var(--c-purple) l c h / 0.1);
+	--c-purple-2: oklch(from var(--c-purple) l c h / 0.2);
+	--c-purple-3: oklch(from var(--c-purple) l c h / 0.3);
+	--c-purple-4: oklch(from var(--c-purple) l c h / 0.4);
+	--c-purple-5: oklch(from var(--c-purple) l c h / 0.5);
+	--c-purple-6: oklch(from var(--c-purple) l c h / 0.6);
+	--c-purple-7: oklch(from var(--c-purple) l c h / 0.7);
+	--c-purple-8: oklch(from var(--c-purple) l c h / 0.8);
+	--c-purple-9: oklch(from var(--c-purple) l c h / 0.9);
 
 	/** Black variants **/
-	--c-black-1: oklch(from var(--c-black) calc(l + 0.95) c h);
-	--c-black-2: oklch(from var(--c-black) calc(l + 0.85) c h);
-	--c-black-3: oklch(from var(--c-black) calc(l + 0.75) c h);
-	--c-black-4: oklch(from var(--c-black) calc(l + 0.65) c h);
-	--c-black-5: oklch(from var(--c-black) calc(l + 0.55) c h);
-	--c-black-6: oklch(from var(--c-black) calc(l + 0.45) c h);
-	--c-black-7: oklch(from var(--c-black) calc(l + 0.35) c h);
-	--c-black-8: oklch(from var(--c-black) calc(l + 0.25) c h);
-	--c-black-9: oklch(from var(--c-black) calc(l + 0.15) c h);
-	--c-black-10: oklch(from var(--c-black) calc(l + 0.05) c h);
+	--c-black-1: oklch(from var(--c-black) l c h / 0.1);
+	--c-black-2: oklch(from var(--c-black) l c h / 0.2);
+	--c-black-3: oklch(from var(--c-black) l c h / 0.3);
+	--c-black-4: oklch(from var(--c-black) l c h / 0.4);
+	--c-black-5: oklch(from var(--c-black) l c h / 0.5);
+	--c-black-6: oklch(from var(--c-black) l c h / 0.6);
+	--c-black-7: oklch(from var(--c-black) l c h / 0.7);
+	--c-black-8: oklch(from var(--c-black) l c h / 0.8);
+	--c-black-9: oklch(from var(--c-black) l c h / 0.9);
 
 	/* Color Usage */
 	--c-fg: light-dark(var(--c-black), var(--c-white));
@@ -112,15 +106,15 @@
 	--ff-heading: '💪', 'Operator Mono', consolas, menlo, monaco, 'Courier New', monospace;
 
 	/* Font Sizes */
-	--fs-micro: 14px;
-	--fs-caption: 17px;
-	--fs-body: 20px;
-	--fs-6: 24px;
+	--fs-1: 14px;
+	--fs-2: 17px;
+	--fs-3: 20px;
+	--fs-4: 24px;
 	--fs-5: 29px;
-	--fs-4: 35px;
-	--fs-3: 41px;
-	--fs-2: 50px;
-	--fs-1: 60px;
+	--fs-6: 35px;
+	--fs-7: 41px;
+	--fs-8: 50px;
+	--fs-9: 60px;
 
 	/* Font Variations */
 	--fv-100: 'wght' 100;
@@ -151,10 +145,10 @@
 	/* BORDERS */
 
 	--b-feed: solid 12px var(--c-primary);
-	--b-xtra-light: soild 1px var(--c-fg);
-	--b-light: soild 2px var(--c-fg);
-	--b-medium: soild 4px var(--c-fg);
-	--b-heavy: soild 5px var(--c-fg);
+	--b-xtra-light: solid 1px var(--c-fg);
+	--b-light: solid 2px var(--c-fg);
+	--b-medium: solid 4px var(--c-fg);
+	--b-heavy: solid 5px var(--c-fg);
 
 	/* BORDER RADIUS */
 	--br-small: 4px;
@@ -165,6 +159,11 @@
 	--br-huge: 24px;
 
 	/* GRIT */
-	--grit-light: url('/svg/grit.svg?light&count=50&w=1000&h=2000');
-	--grit-dark: url('/svg/grit.svg?dark&count=50&w=1000&h=2000');
+	--c-bg-grit-light: url('/svg/grit.svg?light&count=50&w=1000&h=2000');
+	--c-bg-grit-dark: url('/svg/grit.svg?dark&count=50&w=1000&h=2000');
+
+	/* Misc */
+
+	/* Some of these are to appease stylelint */
+	--transition-name: 'null';
 }