refactor(css): add border-radius design tokens (#662)

* refactor(css): add border-radius design tokens

adds a border-radius scale to the design system and replaces hardcoded
values across 46 frontend files.

tokens added:
- --radius-sm: 4px
- --radius-base: 6px
- --radius-md: 8px
- --radius-lg: 12px
- --radius-xl: 16px
- --radius-2xl: 24px
- --radius-full: 9999px

285/296 occurrences tokenized (96%). remaining 11 are intentional edge
cases (partial radii, calc(), 2px slider tracks).

normalizations:
- 5px, 3px → --radius-sm (4px)
- 10px → --radius-md (8px)
- 20px → --radius-xl (16px)

closes #657

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* chore: update STATUS.md for end-of-year QoL mode

- sprint #625 complete, moved to quality of life mode
- documented what shipped (moderation consolidation, atprotofans)
- deferred rules engine and time-release gating to aspirational

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

---------

Co-authored-by: Claude Opus 4.5 <[e-mail]>

STATUS.md

···
 
 ## immediate priorities
 
-### end-of-year sprint (Dec 20-31)
+### quality of life mode (Dec 29-31)
 
-see [sprint tracking issue #625](https://github.com/zzstoatzz/plyr.fm/issues/625) for details.
+end-of-year sprint [#625](https://github.com/zzstoatzz/plyr.fm/issues/625) complete. remaining days before 2026 are for minor polish and bug fixes as they arise.
+
+**what shipped in the sprint:**
+- moderation consolidation: sensitive images moved to moderation service (#644)
+- atprotofans: supporter badges (#627) and content gating (#637)
 
-| track | focus | status |
-|-------|-------|--------|
-| moderation | consolidate architecture, add rules engine | core cleanup shipped (PR #617), sensitive images moved (PR #644) |
-| atprotofans | supporter validation, content gating | shipped |
+**aspirational (deferred until scale justifies):**
+- configurable rules engine for moderation
+- time-release gating (#642)
 
 ### known issues
 - playback auto-start on refresh (#225)
···
 
 ---
 
-this is a living document. last updated 2025-12-26.
+this is a living document. last updated 2025-12-29.

frontend/src/lib/components/AddToMenu.svelte

···
 		justify-content: center;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.2s;
···
 		min-width: 200px;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 		overflow: hidden;
 		z-index: 10;
···
 
 	.playlist-list::-webkit-scrollbar-track {
 		background: transparent;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.playlist-list::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.playlist-list::-webkit-scrollbar-thumb:hover {
···
 	.playlist-thumb-placeholder {
 		width: 32px;
 		height: 32px;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		flex-shrink: 0;
 	}
 
···
 		padding: 0.625rem 0.75rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-family: inherit;
 		font-size: 0.9rem;
···
 		padding: 0.625rem 1rem;
 		background: var(--accent);
 		border: none;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: white;
 		font-family: inherit;
 		font-size: 0.9rem;
···
 		height: 16px;
 		border: 2px solid var(--border-default);
 		border-top-color: var(--accent);
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		animation: spin 0.8s linear infinite;
 	}
 

frontend/src/lib/components/AlbumSelect.svelte

···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
···
 		overflow-y: auto;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		margin-top: 0.25rem;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 	}
···
 
 	.album-results::-webkit-scrollbar-track {
 		background: var(--bg-primary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.album-results::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.album-results::-webkit-scrollbar-thumb:hover {

frontend/src/lib/components/BrokenTracks.svelte

···
 		margin-bottom: 3rem;
 		background: color-mix(in srgb, var(--warning) 5%, transparent);
 		border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1.5rem;
 	}
 
···
 		padding: 0.5rem 1rem;
 		background: color-mix(in srgb, var(--warning) 20%, transparent);
 		border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--warning);
 		font-family: inherit;
 		font-size: 0.9rem;
···
 		background: color-mix(in srgb, var(--warning) 20%, transparent);
 		color: var(--warning);
 		padding: 0.25rem 0.6rem;
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 		font-size: 0.85rem;
 		font-weight: 600;
 	}
···
 	.broken-track-item {
 		background: var(--bg-tertiary);
 		border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		padding: 1rem;
 		display: flex;
 		align-items: center;
···
 		padding: 0.5rem 1rem;
 		background: color-mix(in srgb, var(--warning) 15%, transparent);
 		border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--warning);
 		font-family: inherit;
 		font-size: 0.9rem;
···
 	.info-box {
 		background: var(--bg-primary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		padding: 1rem;
 		font-size: 0.9rem;
 		color: var(--text-secondary);

frontend/src/lib/components/ColorSettings.svelte

···
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);
 		padding: 0.5rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		cursor: pointer;
 		transition: all 0.2s;
 		display: flex;
···
 		right: 0;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		padding: 1rem;
 		min-width: 240px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
···
 		width: 48px;
 		height: 32px;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		cursor: pointer;
 		background: transparent;
 	}
···
 	.preset-btn {
 		width: 32px;
 		height: 32px;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		border: 2px solid transparent;
 		cursor: pointer;
 		transition: all 0.2s;

frontend/src/lib/components/HandleAutocomplete.svelte

···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
···
 		overflow-y: auto;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		margin-top: 0.25rem;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 		scrollbar-width: thin;
···
 
 	.results::-webkit-scrollbar-track {
 		background: var(--bg-primary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.results::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.results::-webkit-scrollbar-thumb:hover {
···
 	.avatar {
 		width: 36px;
 		height: 36px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		object-fit: cover;
 		border: 2px solid var(--border-default);
 		flex-shrink: 0;
···
 	.avatar-placeholder {
 		width: 36px;
 		height: 36px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: var(--border-default);
 		flex-shrink: 0;
 	}

frontend/src/lib/components/HandleSearch.svelte

···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
···
 		overflow-y: auto;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		margin-top: 0.25rem;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 	}
···
 
 	.search-results::-webkit-scrollbar-track {
 		background: var(--bg-primary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.search-results::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.search-results::-webkit-scrollbar-thumb:hover {
···
 	.result-avatar {
 		width: 36px;
 		height: 36px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		object-fit: cover;
 		border: 2px solid var(--border-default);
 		flex-shrink: 0;
···
 		padding: 0.5rem 0.75rem;
 		background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary));
 		border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
-		border-radius: 20px;
+		border-radius: var(--radius-xl);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 	}
···
 	.chip-avatar {
 		width: 24px;
 		height: 24px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		object-fit: cover;
 		border: 1px solid var(--border-default);
 	}
···
 		padding: 0.75rem;
 		background: color-mix(in srgb, var(--warning) 10%, var(--bg-primary));
 		border: 1px solid color-mix(in srgb, var(--warning) 20%, var(--border-subtle));
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--warning);
 		font-size: 0.9rem;
 		text-align: center;

frontend/src/lib/components/Header.svelte

···
 		justify-content: center;
 		width: 44px;
 		height: 44px;
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		background: transparent;
 		border: none;
 		color: var(--text-secondary);
···
 		border: 1px solid var(--border-emphasis);
 		color: var(--text-secondary);
 		padding: 0.5rem 1rem;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		font-size: 0.9rem;
 		font-family: inherit;
 		cursor: pointer;
···
 	}
 
 	.tangled-icon {
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		opacity: 0.7;
 		transition: opacity 0.2s, box-shadow 0.2s;
 	}
···
 		align-items: center;
 		gap: 0.4rem;
 		padding: 0.4rem 0.75rem;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		border: 1px solid transparent;
 	}
 
···
 		font-size: 0.9rem;
 		padding: 0.4rem 0.75rem;
 		background: var(--bg-tertiary);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		border: 1px solid var(--border-default);
 		transition: all 0.2s;
 		white-space: nowrap;
···
 		border: 1px solid var(--accent);
 		color: var(--accent);
 		padding: 0.5rem 1rem;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		font-size: 0.9rem;
 		text-decoration: none;
 		transition: all 0.2s;

frontend/src/lib/components/HiddenTagsFilter.svelte

···
 		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.15s;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 	}
 
 	.filter-toggle:hover {
···
 		background: transparent;
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 		font-size: 0.75rem;
 		font-family: inherit;
 		cursor: pointer;
···
 		padding: 0;
 		background: transparent;
 		border: 1px dashed var(--border-default);
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 		color: var(--text-tertiary);
 		font-size: 0.8rem;
 		cursor: pointer;
···
 		min-height: 24px;
 		width: 70px;
 		outline: none;
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 	}
 
 	.add-input:focus {

frontend/src/lib/components/LikeButton.svelte

···
 		justify-content: center;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.2s;

frontend/src/lib/components/LikersTooltip.svelte

···
 		margin-bottom: 0.5rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 0.75rem;
 		min-width: 240px;
 		max-width: 320px;
···
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.5rem;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		text-decoration: none;
 		transition: background 0.2s;
 	}
···
 	.avatar-placeholder {
 		width: 32px;
 		height: 32px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		flex-shrink: 0;
 	}
 
···
 
 	.likers-list::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 	}
 
 	.likers-list::-webkit-scrollbar-thumb:hover {

frontend/src/lib/components/LinksMenu.svelte

···
 		height: 32px;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.2s;
···
 		width: min(320px, calc(100vw - 2rem));
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 		z-index: 101;
 		animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
···
 		height: 28px;
 		background: transparent;
 		border: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.2s;
···
 		gap: 1rem;
 		padding: 1rem;
 		background: transparent;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		text-decoration: none;
 		color: var(--text-primary);
 		transition: all 0.2s;
···
 	}
 
 	.tangled-menu-icon {
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		opacity: 0.7;
 		transition: opacity 0.2s, box-shadow 0.2s;
 	}

frontend/src/lib/components/MigrationBanner.svelte

···
 	.migration-banner {
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1rem;
 		margin-bottom: 1.5rem;
 	}
···
 		gap: 1rem;
 		background: color-mix(in srgb, var(--success) 10%, transparent);
 		border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		padding: 1rem;
 		animation: slideIn 0.3s ease-out;
 	}
···
 	.collection-name {
 		background: color-mix(in srgb, var(--text-primary) 5%, transparent);
 		padding: 0.15em 0.4em;
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 		font-family: monospace;
 		font-size: 0.95em;
 		color: var(--text-primary);
···
 	.migrate-button,
 	.dismiss-button {
 		padding: 0.5rem 1rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 0.9em;
 		font-family: inherit;
 		cursor: pointer;

frontend/src/lib/components/PlatformStats.svelte

···
 		background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-hover) 50%, var(--bg-tertiary) 100%);
 		background-size: 200% 100%;
 		animation: shimmer 1.5s ease-in-out infinite;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 	}
 
 	.stats-menu-grid {
···
 		gap: 0.15rem;
 		padding: 0.6rem 0.4rem;
 		background: var(--bg-tertiary, #1a1a1a);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 	}
 
 	.menu-stat-icon {

frontend/src/lib/components/ProfileMenu.svelte

···
 		height: 44px;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		overflow-y: auto;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 16px;
+		border-radius: var(--radius-xl);
 		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 		z-index: 101;
 		animation: slideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
···
 		height: 36px;
 		background: transparent;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		min-height: 56px;
 		background: transparent;
 		border: none;
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 		text-decoration: none;
 		color: var(--text-primary);
 		font-family: inherit;
···
 		padding: 0.5rem 0.75rem;
 		background: transparent;
 		border: none;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-secondary);
 		font-family: inherit;
 		font-size: 0.85rem;
···
 		min-height: 54px;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		width: 44px;
 		height: 44px;
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		cursor: pointer;
 		background: transparent;
 		flex-shrink: 0;
···
 	}
 
 	.color-input::-webkit-color-swatch {
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		border: none;
 	}
 
···
 	.preset-btn {
 		width: 36px;
 		height: 36px;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		border: 2px solid transparent;
 		cursor: pointer;
 		transition: all 0.15s;
···
 		appearance: none;
 		width: 48px;
 		height: 28px;
-		border-radius: 999px;
+		border-radius: var(--radius-full);
 		background: var(--border-default);
 		position: relative;
 		cursor: pointer;
···
 		left: 3px;
 		width: 20px;
 		height: 20px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: var(--text-secondary);
 		transition: transform 0.15s, background 0.15s;
 	}

frontend/src/lib/components/Queue.svelte

···
 		background: transparent;
 		border: 1px solid var(--border-subtle);
 		color: var(--text-tertiary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		cursor: pointer;
 		transition: all 0.15s ease;
 	}
···
 		align-items: center;
 		justify-content: space-between;
 		padding: 1rem 1.1rem;
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
 		gap: 1rem;
···
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.85rem 0.9rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		cursor: pointer;
 		transition: all 0.2s;
 		border: 1px solid var(--border-subtle);
···
 		color: var(--text-muted);
 		cursor: grab;
 		touch-action: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		transition: all 0.2s;
 		flex-shrink: 0;
 	}
···
 		align-items: center;
 		justify-content: center;
 		transition: all 0.2s;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		opacity: 0;
 		flex-shrink: 0;
 	}
···
 
 	.empty-up-next {
 		border: 1px dashed var(--border-subtle);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		padding: 1.25rem;
 		text-align: center;
 		color: var(--text-tertiary);
···
 
 	.queue-tracks::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.queue-tracks::-webkit-scrollbar-thumb:hover {

frontend/src/lib/components/SearchModal.svelte

···
 		backdrop-filter: blur(20px) saturate(180%);
 		-webkit-backdrop-filter: blur(20px) saturate(180%);
 		border: 1px solid var(--border-subtle);
-		border-radius: 16px;
+		border-radius: var(--radius-xl);
 		box-shadow:
 			0 24px 80px color-mix(in srgb, var(--bg-primary) 50%, transparent),
 			0 0 1px var(--border-subtle) inset;
···
 		padding: 0.25rem 0.5rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 		color: var(--text-muted);
 		font-family: inherit;
 	}
···
 		height: 16px;
 		border: 2px solid var(--border-default);
 		border-top-color: var(--accent);
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		animation: spin 0.6s linear infinite;
 	}
 
···
 
 	.search-results::-webkit-scrollbar-track {
 		background: transparent;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.search-results::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.search-results::-webkit-scrollbar-thumb:hover {
···
 		padding: 0.75rem;
 		background: transparent;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		cursor: pointer;
 		text-align: left;
 		font-family: inherit;
···
 		align-items: center;
 		justify-content: center;
 		background: var(--bg-tertiary);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-size: 0.9rem;
 		flex-shrink: 0;
 		position: relative;
···
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 	}
 
 	.result-icon[data-type='track'] {
···
 		color: var(--text-muted);
 		padding: 0.2rem 0.45rem;
 		background: var(--bg-tertiary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		flex-shrink: 0;
 	}
 
···
 		padding: 0.15rem 0.35rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-family: inherit;
 	}
 

frontend/src/lib/components/SearchTrigger.svelte

···
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);
 		padding: 0.5rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		cursor: pointer;
 		transition: all 0.2s;
 		display: flex;

frontend/src/lib/components/SensitiveImage.svelte

···
 		margin-bottom: 4px;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		padding: 0.25rem 0.5rem;
 		font-size: 0.7rem;
 		color: var(--text-tertiary);

frontend/src/lib/components/SettingsMenu.svelte

···
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);
 		padding: 0.5rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		cursor: pointer;
 		transition: all 0.2s;
 		display: flex;
···
 		right: 0;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1.25rem;
 		min-width: 280px;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
···
 		padding: 0.6rem 0.5rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.2s;
···
 		width: 48px;
 		height: 32px;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		cursor: pointer;
 		background: transparent;
 	}
···
 	.preset-btn {
 		width: 32px;
 		height: 32px;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		border: 2px solid transparent;
 		cursor: pointer;
 		transition: all 0.2s;
···
 		appearance: none;
 		width: 42px;
 		height: 22px;
-		border-radius: 999px;
+		border-radius: var(--radius-full);
 		background: var(--border-default);
 		position: relative;
 		cursor: pointer;
···
 		left: 2px;
 		width: 16px;
 		height: 16px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: var(--text-secondary);
 		transition: transform 0.2s, background 0.2s;
 	}

frontend/src/lib/components/ShareButton.svelte

···
 	.share-btn {
 		background: var(--glass-btn-bg, transparent);
 		border: 1px solid var(--glass-btn-border, var(--border-default));
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		width: 32px;
 		height: 32px;
 		padding: 0;
···
 		border: 1px solid var(--accent);
 		color: var(--accent);
 		padding: 0.25rem 0.75rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 0.75rem;
 		white-space: nowrap;
 		pointer-events: none;

frontend/src/lib/components/SupporterBadge.svelte

···
 		padding: 0.2rem 0.5rem;
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--accent);
 		font-size: 0.75rem;
 		font-weight: 500;

frontend/src/lib/components/TagInput.svelte

···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		min-height: 48px;
 		transition: all 0.2s;
 	}
···
 		background: color-mix(in srgb, var(--accent) 10%, transparent);
 		border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
 		color: var(--accent-hover);
-		border-radius: 20px;
+		border-radius: var(--radius-xl);
 		font-size: 0.9rem;
 		font-weight: 500;
 	}
···
 		overflow-y: auto;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		margin-top: 0.25rem;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 		scrollbar-width: thin;
···
 
 	.suggestions::-webkit-scrollbar-track {
 		background: var(--bg-primary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.suggestions::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.suggestions::-webkit-scrollbar-thumb:hover {

frontend/src/lib/components/Toast.svelte

···
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		pointer-events: none;
 		font-size: 0.85rem;
 		max-width: 450px;

frontend/src/lib/components/TrackActionsMenu.svelte

···
 		justify-content: center;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.2s;
···
 	.playlist-thumb-placeholder {
 		width: 36px;
 		height: 36px;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		flex-shrink: 0;
 	}
 
···
 		padding: 0.75rem 1rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-primary);
 		font-family: inherit;
 		font-size: 1rem;
···
 		padding: 0.75rem 1rem;
 		background: var(--accent);
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: white;
 		font-family: inherit;
 		font-size: 1rem;
···
 		height: 18px;
 		border: 2px solid var(--border-default);
 		border-top-color: var(--accent);
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		animation: spin 0.8s linear infinite;
 	}
 
···
 			top: 50%;
 			transform: translateY(-50%);
 			margin-right: 0.5rem;
-			border-radius: 8px;
+			border-radius: var(--radius-md);
 			min-width: 180px;
 			max-height: none;
 			animation: slideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);

frontend/src/lib/components/TrackItem.svelte

···
 		gap: 0.75rem;
 		background: var(--track-bg, var(--bg-secondary));
 		border: 1px solid var(--track-border, var(--border-subtle));
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1rem;
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 		transition:
···
 		position: absolute;
 		inset: 0;
 		background: rgba(0, 0, 0, 0.3);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		pointer-events: none;
 	}
 
···
 		justify-content: center;
 		background: var(--accent);
 		border: 2px solid var(--bg-secondary);
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		color: white;
 		z-index: 1;
 	}
···
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		overflow: hidden;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
···
 	}
 
 	.track-avatar img {
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		border: 2px solid var(--border-default);
 		transition: border-color 0.2s;
 	}
···
 		padding: 0.1rem 0.4rem;
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		color: var(--accent-hover);
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 		font-size: 0.75rem;
 		font-weight: 500;
 		text-decoration: none;
···
 		background: var(--bg-tertiary);
 		color: var(--text-muted);
 		border: none;
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 		font-size: 0.75rem;
 		font-weight: 500;
 		font-family: inherit;
···
 		justify-content: center;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.2s;

frontend/src/lib/components/player/PlaybackControls.svelte

···
 		align-items: center;
 		justify-content: center;
 		transition: all 0.2s;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 	}
 
 	.control-btn svg {
···
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		transition: all 0.2s;
 		position: relative;
 	}
···
 		background: var(--accent);
 		height: 14px;
 		width: 14px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		margin-top: -5px;
 		transition: all 0.2s;
 		box-shadow: 0 0 0 8px transparent;
···
 		background: var(--accent);
 		height: 14px;
 		width: 14px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		border: none;
 		transition: all 0.2s;
 		box-shadow: 0 0 0 8px transparent;

frontend/src/lib/components/player/TrackInfo.svelte

···
 		flex-shrink: 0;
 		width: 56px;
 		height: 56px;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		overflow: hidden;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);

frontend/src/routes/+error.svelte

···
 		font-size: 1.1rem;
 		padding: 0.75rem 1.5rem;
 		border: 1px solid var(--accent);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		transition: all 0.2s;
 	}
 

frontend/src/routes/+layout.svelte

···
 		--text-body: 1rem;
 		--text-small: 0.9rem;
 
+		/* border radius scale */
+		--radius-sm: 4px;
+		--radius-base: 6px;
+		--radius-md: 8px;
+		--radius-lg: 12px;
+		--radius-xl: 16px;
+		--radius-2xl: 24px;
+		--radius-full: 9999px;
+
 		/* semantic */
 		--success: #4ade80;
 		--warning: #fbbf24;
···
 		right: 20px;
 		width: 48px;
 		height: 48px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);

frontend/src/routes/costs/+page.svelte

···
 		padding: 2rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 	}
 
 	.total-label {
···
 	.cost-item {
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1rem;
 	}
 
···
 	.cost-bar-bg {
 		height: 8px;
 		background: var(--bg-primary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		overflow: hidden;
 		margin-bottom: 0.5rem;
 	}
···
 	.cost-bar {
 		height: 100%;
 		background: var(--accent);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		transition: width 0.3s ease;
 	}
 
···
 		gap: 0.25rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		padding: 0.25rem;
 	}
 
···
 		font-weight: 500;
 		background: transparent;
 		border: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		padding: 2rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 	}
 
 	.audd-stats {
···
 		padding: 1rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 	}
 
 	.stat-value {
···
 	.daily-chart {
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1rem;
 		overflow: hidden;
 	}
···
 			var(--bg-tertiary)
 		);
 		border: 1px solid var(--border-subtle);
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 	}
 
 	.support-icon {
···
 		padding: 0.75rem 1.5rem;
 		background: var(--accent);
 		color: white;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		text-decoration: none;
 		font-weight: 600;
 		font-size: 0.9rem;

frontend/src/routes/embed/track/[id]/+page.svelte

···
 	.play-btn {
 		width: 48px;
 		height: 48px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: #fff;
 		color: #000;
 		border: none;

frontend/src/routes/library/+page.svelte

···
 		padding: 1rem 1.25rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 		text-decoration: none;
 		color: inherit;
 		transition: all 0.15s;
···
 	.collection-icon {
 		width: 48px;
 		height: 48px;
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		display: flex;
 		align-items: center;
 		justify-content: center;
···
 	.playlist-artwork {
 		width: 48px;
 		height: 48px;
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		object-fit: cover;
 		flex-shrink: 0;
 	}
···
 		background: var(--accent);
 		color: white;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-family: inherit;
 		font-size: 0.875rem;
 		font-weight: 500;
···
 		padding: 3rem 2rem;
 		background: var(--bg-secondary);
 		border: 1px dashed var(--border-default);
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 		text-align: center;
 	}
 
 	.empty-icon {
 		width: 64px;
 		height: 64px;
-		border-radius: 16px;
+		border-radius: var(--radius-xl);
 		display: flex;
 		align-items: center;
 		justify-content: center;
···
 	.modal {
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 16px;
+		border-radius: var(--radius-xl);
 		width: 100%;
 		max-width: 400px;
 		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
···
 		height: 32px;
 		background: transparent;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		padding: 0.75rem 1rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-family: inherit;
 		font-size: 1rem;
 		color: var(--text-primary);
···
 	.cancel-btn,
 	.confirm-btn {
 		padding: 0.625rem 1.25rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 500;

frontend/src/routes/liked/+page.svelte

···
 		color: var(--text-tertiary);
 		background: var(--bg-tertiary);
 		padding: 0.2rem 0.55rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.header-actions {
···
 	.queue-button,
 	.reorder-button {
 		padding: 0.75rem 1.5rem;
-		border-radius: 24px;
+		border-radius: var(--radius-2xl);
 		font-weight: 600;
 		font-size: 0.95rem;
 		font-family: inherit;
···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		transition: all 0.2s;
 		position: relative;
 	}
···
 		color: var(--text-muted);
 		cursor: grab;
 		touch-action: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		transition: all 0.2s;
 		flex-shrink: 0;
 	}

frontend/src/routes/liked/[handle]/+page.svelte

···
 	.avatar {
 		width: 64px;
 		height: 64px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		object-fit: cover;
 		flex-shrink: 0;
 	}
···
 		background: transparent;
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		font-size: 0.85rem;
 		font-family: inherit;
 		cursor: pointer;

frontend/src/routes/login/+page.svelte

···
 	.login-card {
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 		padding: 2.5rem;
 		max-width: 420px;
 		width: 100%;
···
 		background: var(--accent);
 		color: white;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-size: 0.95rem;
 		font-weight: 500;
 		font-family: inherit;
···
 	.faq-content code {
 		background: var(--bg-secondary);
 		padding: 0.15rem 0.4rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 0.85em;
 	}
 

frontend/src/routes/playlist/[id]/+page.svelte

···
 	.playlist-art {
 		width: 200px;
 		height: 200px;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		object-fit: cover;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 	}
···
 	.playlist-art-placeholder {
 		width: 200px;
 		height: 200px;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
 		display: flex;
···
 		opacity: 0;
 		transition: opacity 0.2s;
 		pointer-events: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-family: inherit;
 	}
 
···
 		height: 32px;
 		background: var(--glass-btn-bg, rgba(18, 18, 18, 0.75));
 		border: 1px solid var(--glass-btn-border, rgba(255, 255, 255, 0.1));
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 	.play-button,
 	.queue-button {
 		padding: 0.75rem 1.5rem;
-		border-radius: 24px;
+		border-radius: var(--radius-2xl);
 		font-weight: 600;
 		font-size: 0.95rem;
 		font-family: inherit;
···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		transition: all 0.2s;
 		position: relative;
 	}
···
 		color: var(--text-muted);
 		cursor: grab;
 		touch-action: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		transition: all 0.2s;
 		flex-shrink: 0;
 	}
···
 		padding: 0.5rem;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-muted);
 		cursor: pointer;
 		transition: all 0.2s;
···
 		margin-top: 0.5rem;
 		background: transparent;
 		border: 1px dashed var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-tertiary);
 		font-family: inherit;
 		font-size: 0.9rem;
···
 	.empty-icon {
 		width: 64px;
 		height: 64px;
-		border-radius: 16px;
+		border-radius: var(--radius-xl);
 		display: flex;
 		align-items: center;
 		justify-content: center;
···
 		background: var(--accent);
 		color: white;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 500;
···
 	.modal {
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 16px;
+		border-radius: var(--radius-xl);
 		width: 100%;
 		max-width: 400px;
 		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
···
 		height: 32px;
 		background: transparent;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 	.result-image-placeholder {
 		width: 40px;
 		height: 40px;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		flex-shrink: 0;
 	}
 
···
 		height: 36px;
 		background: var(--accent);
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: white;
 		cursor: pointer;
 		transition: all 0.15s;
···
 	.cancel-btn,
 	.confirm-btn {
 		padding: 0.625rem 1.25rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 500;
···
 		height: 16px;
 		border: 2px solid currentColor;
 		border-top-color: transparent;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		animation: spin 0.6s linear infinite;
 	}
 

frontend/src/routes/portal/+page.svelte

···
 		font-size: 0.8rem;
 		padding: 0.35rem 0.6rem;
 		background: var(--bg-tertiary);
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 		border: 1px solid var(--border-default);
 		transition: all 0.15s;
 		white-space: nowrap;
···
 		font-size: 0.8rem;
 		padding: 0.35rem 0.6rem;
 		background: var(--bg-tertiary);
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 		border: 1px solid var(--border-default);
 		transition: all 0.15s;
 		white-space: nowrap;
···
 		padding: 1rem 1.25rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		text-decoration: none;
 		color: var(--text-primary);
 		transition: all 0.15s;
···
 		width: 44px;
 		height: 44px;
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		color: var(--accent);
 		flex-shrink: 0;
 	}
···
 	form {
 		background: var(--bg-tertiary);
 		padding: 1.25rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		border: 1px solid var(--border-subtle);
 	}
 
···
 		padding: 0.6rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 0.95rem;
 		font-family: inherit;
···
 		padding: 0.6rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 0.95rem;
 		font-family: inherit;
···
 		padding: 0.6rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		cursor: pointer;
 		transition: all 0.15s;
 		margin-bottom: 0;
···
 		padding: 0.6rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 0.95rem;
 		font-family: inherit;
···
 	.avatar-preview img {
 		width: 64px;
 		height: 64px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		object-fit: cover;
 		border: 2px solid var(--border-default);
 	}
···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
···
 		background: var(--accent);
 		color: var(--text-primary);
 		border: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 1rem;
 		font-weight: 600;
 		font-family: inherit;
···
 		padding: 2rem;
 		text-align: center;
 		background: var(--bg-tertiary);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		border: 1px solid var(--border-subtle);
 	}
 
···
 		gap: 1rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		padding: 1rem;
 		transition: all 0.2s;
 	}
···
 	.track-artwork {
 		width: 48px;
 		height: 48px;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		overflow: hidden;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-subtle);
···
 		padding: 0.1rem 0.4rem;
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		color: var(--accent-hover);
-		border-radius: 3px;
+		border-radius: var(--radius-sm);
 		font-size: 0.8rem;
 		font-weight: 500;
 		text-decoration: none;
···
 		padding: 0;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		padding: 0.5rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
···
 		padding: 0.5rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		margin-bottom: 0.5rem;
 	}
 
 	.current-image-preview img {
 		width: 48px;
 		height: 48px;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		object-fit: cover;
 	}
 
···
 	.album-card {
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1rem;
 		transition: all 0.2s;
 		display: flex;
···
 	.album-cover {
 		width: 100%;
 		aspect-ratio: 1;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		object-fit: cover;
 	}
 
 	.album-cover-placeholder {
 		width: 100%;
 		aspect-ratio: 1;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		background: linear-gradient(135deg, rgba(var(--accent-rgb, 139, 92, 246), 0.15), rgba(var(--accent-rgb, 139, 92, 246), 0.05));
 		display: flex;
 		align-items: center;
···
 		font-size: 0.8rem;
 		padding: 0.35rem 0.6rem;
 		background: var(--bg-tertiary);
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 		border: 1px solid var(--border-default);
 		transition: all 0.15s;
 		white-space: nowrap;
···
 	.playlist-card {
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1rem;
 		transition: all 0.2s;
 		display: flex;
···
 	.playlist-cover {
 		width: 100%;
 		aspect-ratio: 1;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		object-fit: cover;
 	}
 
 	.playlist-cover-placeholder {
 		width: 100%;
 		aspect-ratio: 1;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		background: linear-gradient(135deg, rgba(var(--accent-rgb, 139, 92, 246), 0.15), rgba(var(--accent-rgb, 139, 92, 246), 0.05));
 		display: flex;
 		align-items: center;
···
 		padding: 1rem 1.25rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
···
 		background: var(--accent);
 		color: var(--text-primary);
 		border: none;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		font-size: 0.9rem;
 		font-weight: 600;
 		cursor: pointer;
···
 		background: transparent;
 		color: var(--error);
 		border: 1px solid var(--error);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 600;
···
 		padding: 1rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 	}
 
 	.delete-warning {
···
 		margin-bottom: 1rem;
 		padding: 0.75rem;
 		background: var(--bg-tertiary);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 	}
 
 	.atproto-option {
···
 		margin: 0.5rem 0 0;
 		padding: 0.5rem;
 		background: color-mix(in srgb, var(--warning) 10%, transparent);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 0.8rem;
 		color: var(--warning);
 	}
···
 		padding: 0.6rem 0.75rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
···
 		padding: 0.6rem;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-secondary);
 		font-family: inherit;
 		font-size: 0.9rem;
···
 		padding: 0.6rem;
 		background: var(--error);
 		border: none;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: white;
 		font-family: inherit;
 		font-size: 0.9rem;

frontend/src/routes/profile/setup/+page.svelte

···
 
 	.error {
 		padding: 1rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		margin-bottom: 1.5rem;
 		background: color-mix(in srgb, var(--error) 10%, transparent);
 		border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
···
 	form {
 		background: var(--bg-tertiary);
 		padding: 2rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		border: 1px solid var(--border-subtle);
 	}
 
···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
···
 		background: var(--accent);
 		color: white;
 		border: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 1rem;
 		font-weight: 600;
 		cursor: pointer;

frontend/src/routes/settings/+page.svelte

···
 	.token-overlay-content {
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-default);
-		border-radius: 16px;
+		border-radius: var(--radius-xl);
 		padding: 2rem;
 		max-width: 500px;
 		width: 100%;
···
 		gap: 0.5rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1rem;
 		margin-bottom: 1rem;
 	}
···
 		padding: 0.5rem 1rem;
 		background: var(--accent);
 		border: none;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-family: inherit;
 		font-size: 0.85rem;
···
 		padding: 0.75rem 2rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		font-family: inherit;
 		font-size: 0.9rem;
···
 		font-size: 0.85rem;
 		padding: 0.4rem 0.75rem;
 		background: var(--bg-tertiary);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		border: 1px solid var(--border-default);
 		transition: all 0.15s;
 	}
···
 	.settings-card {
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		padding: 1rem 1.25rem;
 	}
 
···
 		padding: 0.6rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		width: 40px;
 		height: 40px;
 		border: 1px solid var(--border-default);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		cursor: pointer;
 		background: transparent;
 	}
···
 	}
 
 	.color-input::-webkit-color-swatch {
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		border: none;
 	}
 
···
 	.preset-btn {
 		width: 32px;
 		height: 32px;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		border: 2px solid transparent;
 		cursor: pointer;
 		transition: all 0.15s;
···
 		padding: 0.5rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-size: 0.85rem;
 		font-family: inherit;
···
 		width: 48px;
 		height: 28px;
 		background: var(--border-default);
-		border-radius: 999px;
+		border-radius: var(--radius-full);
 		position: relative;
 		cursor: pointer;
 		transition: background 0.2s;
···
 		left: 4px;
 		width: 20px;
 		height: 20px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: var(--text-secondary);
 		transition: transform 0.2s, background 0.2s;
 	}
···
 		padding: 0.75rem;
 		background: color-mix(in srgb, var(--warning) 10%, transparent);
 		border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		margin-top: 0.75rem;
 		font-size: 0.8rem;
 		color: var(--warning);
···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 	}
 
 	.token-info {
···
 		padding: 0.4rem 0.75rem;
 		background: transparent;
 		border: 1px solid var(--border-emphasis);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-secondary);
 		font-family: inherit;
 		font-size: 0.8rem;
···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 	}
 
 	.token-value {
···
 		padding: 0.4rem 0.6rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-secondary);
 		font-family: inherit;
 		font-size: 0.8rem;
···
 		padding: 0.6rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
···
 		padding: 0.5rem 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-size: 0.85rem;
 		font-family: inherit;
···
 		padding: 0.6rem 1rem;
 		background: var(--accent);
 		border: none;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-family: inherit;
 		font-size: 0.9rem;

frontend/src/routes/tag/[name]/+page.svelte

···
 		background: var(--glass-btn-bg, transparent);
 		border: 1px solid var(--glass-btn-border, var(--accent));
 		color: var(--accent);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		font-size: 0.9rem;
 		font-family: inherit;
 		cursor: pointer;

frontend/src/routes/track/[id]/+page.svelte

···
 		width: 100%;
 		max-width: 300px;
 		aspect-ratio: 1;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		overflow: hidden;
 		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 	}
···
 		padding: 0.25rem 0.6rem;
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		color: var(--accent-hover);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 0.85rem;
 		font-weight: 500;
 		text-decoration: none;
···
 		background: var(--accent);
 		color: var(--bg-primary);
 		border: none;
-		border-radius: 24px;
+		border-radius: var(--radius-2xl);
 		font-size: 0.95rem;
 		font-weight: 600;
 		font-family: inherit;
···
 		background: transparent;
 		color: var(--text-primary);
 		border: 1px solid var(--border-emphasis);
-		border-radius: 24px;
+		border-radius: var(--radius-2xl);
 		font-size: 0.95rem;
 		font-weight: 500;
 		font-family: inherit;
···
 		padding: 0.6rem 0.8rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
···
 		background: var(--accent);
 		color: var(--bg-primary);
 		border: none;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		font-size: 0.9rem;
 		font-weight: 600;
 		font-family: inherit;
···
 
 	.comments-list::-webkit-scrollbar-track {
 		background: var(--bg-primary);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.comments-list::-webkit-scrollbar-thumb {
 		background: var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.comments-list::-webkit-scrollbar-thumb:hover {
···
 		gap: 0.6rem;
 		padding: 0.5rem 0.6rem;
 		background: var(--bg-tertiary);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		transition: background 0.15s;
 	}
 
···
 		color: var(--accent);
 		background: color-mix(in srgb, var(--accent) 10%, transparent);
 		padding: 0.2rem 0.5rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		white-space: nowrap;
 		height: fit-content;
 		border: none;
···
 	.comment-avatar {
 		width: 20px;
 		height: 20px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		object-fit: cover;
 	}
 
 	.comment-avatar-placeholder {
 		width: 20px;
 		height: 20px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: var(--border-default);
 	}
 
···
 		padding: 0.5rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
···
 		padding: 0.25rem 0.6rem;
 		font-size: 0.8rem;
 		font-family: inherit;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		cursor: pointer;
 		transition: all 0.15s;
 	}
···
 		);
 		background-size: 200% 100%;
 		animation: shimmer 1.5s ease-in-out infinite;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	.comment-timestamp-skeleton {
···
 	.comment-avatar-skeleton {
 		width: 20px;
 		height: 20px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 	}
 
 	.comment-author-skeleton {

frontend/src/routes/u/[handle]/+error.svelte

···
 		font-size: 1.1rem;
 		padding: 0.75rem 1.5rem;
 		border: 1px solid var(--accent);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		transition: all 0.2s;
 		display: inline-block;
 	}

frontend/src/routes/u/[handle]/+page.svelte

···
 		padding: 2rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 	}
 
 	.artist-details {
···
 		padding: 0 0.75rem;
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--accent);
 		font-size: 0.85rem;
 		text-decoration: none;
···
 	.artist-avatar {
 		width: 120px;
 		height: 120px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		object-fit: cover;
 		border: 3px solid var(--border-default);
 	}
···
 		padding: 1rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		color: inherit;
 		text-decoration: none;
 		transition: transform 0.15s ease, border-color 0.15s ease;
···
 	.album-cover-wrapper {
 		width: 72px;
 		height: 72px;
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		overflow: hidden;
 		flex-shrink: 0;
 		background: var(--bg-tertiary);
···
 	.stat-card {
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		padding: 1.5rem;
 		transition: border-color 0.2s;
 	}
···
 		);
 		background-size: 200% 100%;
 		animation: shimmer 1.5s ease-in-out infinite;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 	}
 
 	/* match .stat-value dimensions: 2.5rem font + 0.5rem margin-bottom */
···
 		padding: 0.75rem 1.5rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		font-family: inherit;
 		font-size: 0.95rem;
···
 		padding: 3rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 	}
 
 	.empty-message {
···
 		font-size: 1rem;
 		padding: 0.75rem 1.5rem;
 		border: 1px solid var(--accent);
-		border-radius: 6px;
+		border-radius: var(--radius-base);
 		transition: all 0.2s;
 		display: inline-block;
 	}
···
 		.album-cover-wrapper {
 			width: 56px;
 			height: 56px;
-			border-radius: 4px;
+			border-radius: var(--radius-sm);
 		}
 
 		.album-card-meta h3 {
···
 		padding: 1.25rem 1.5rem;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-subtle);
-		border-radius: 10px;
+		border-radius: var(--radius-md);
 		color: inherit;
 		text-decoration: none;
 		transition: transform 0.15s ease, border-color 0.15s ease;
···
 	.collection-icon {
 		width: 48px;
 		height: 48px;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		display: flex;
 		align-items: center;
 		justify-content: center;

frontend/src/routes/u/[handle]/album/[slug]/+page.svelte

···
 	.album-art {
 		width: 200px;
 		height: 200px;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		object-fit: cover;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 	}
···
 	.album-art-placeholder {
 		width: 200px;
 		height: 200px;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
 		display: flex;
···
 		height: 32px;
 		background: transparent;
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.15s;
···
 		position: absolute;
 		inset: 0;
 		background: rgba(0, 0, 0, 0.6);
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
···
 	.play-button,
 	.queue-button {
 		padding: 0.75rem 1.5rem;
-		border-radius: 24px;
+		border-radius: var(--radius-2xl);
 		font-weight: 600;
 		font-size: 0.95rem;
 		font-family: inherit;
···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		transition: all 0.2s;
 		position: relative;
 	}
···
 		color: var(--text-muted);
 		cursor: grab;
 		touch-action: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		transition: all 0.2s;
 		flex-shrink: 0;
 	}
···
 		justify-content: center;
 		width: 32px;
 		height: 32px;
-		border-radius: 50%;
+		border-radius: var(--radius-full);
 		background: transparent;
 		border: none;
 		color: var(--text-muted);
···
 
 	.modal {
 		background: var(--bg-secondary);
-		border-radius: 12px;
+		border-radius: var(--radius-lg);
 		padding: 1.5rem;
 		max-width: 400px;
 		width: calc(100% - 2rem);
···
 	.cancel-btn,
 	.confirm-btn {
 		padding: 0.625rem 1.25rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		font-weight: 500;
 		font-size: 0.9rem;
 		font-family: inherit;

frontend/src/routes/upload/+page.svelte

···
 	form {
 		background: var(--bg-tertiary);
 		padding: 2rem;
-		border-radius: 8px;
+		border-radius: var(--radius-md);
 		border: 1px solid var(--border-subtle);
 	}
 
···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
···
 		padding: 0.75rem;
 		background: var(--bg-primary);
 		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
···
 		background: var(--accent);
 		color: var(--text-primary);
 		border: none;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		font-size: 1rem;
 		font-weight: 600;
 		font-family: inherit;
···
 	.attestation {
 		background: var(--bg-primary);
 		padding: 1rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		border: 1px solid var(--border-default);
 	}
 
···
 	.supporter-gating {
 		background: color-mix(in srgb, var(--accent) 8%, var(--bg-primary));
 		padding: 1rem;
-		border-radius: 4px;
+		border-radius: var(--radius-sm);
 		border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-default));
 	}