refactor(css): add typography scale tokens (#663)

* refactor(css): add typography scale tokens

adds a typography scale to the design system and replaces hardcoded
font-size values across the frontend.

tokens added:
- --text-xs: 0.75rem
- --text-sm: 0.85rem
- --text-base: 0.9rem
- --text-lg: 1rem
- --text-xl: 1.1rem
- --text-2xl: 1.25rem
- --text-3xl: 1.5rem

semantic aliases updated to use scale:
- --text-page-heading: var(--text-3xl)
- --text-body: var(--text-lg)
- --text-small: var(--text-base)

397/471 occurrences tokenized (84%). remaining 74 are edge cases
(large display text, very small text, pixel values).

normalizations:
- 0.7rem → --text-xs (0.75rem)
- 0.8rem → --text-sm (0.85rem)
- 0.95rem → --text-base (0.9rem)

closes #658

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

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

* chore: add digest slash command for external resource analysis

---------

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

.claude/commands/digest.md

···
+---
+description: Extract actionable insights from an external resource
+argument-hint: [URL, AT-URI, or description of resource]
+---
+
+# digest
+
+break down an external resource and identify what it means for us.
+
+## process
+
+1. **fetch the resource**: $ARGUMENTS
+   - use pdsx MCP for AT-URIs (bsky posts, leaflet docs, etc.)
+   - use WebFetch for URLs
+   - ask for clarification if the resource type is unclear
+
+2. **extract concrete information**:
+   - what are they doing?
+   - what's their architecture/approach?
+   - what are their constraints and priorities?
+   - what's their roadmap?
+
+3. **cross-reference with our state**:
+   - check open issues for overlap or gaps
+   - grep codebase for related implementations
+   - identify where we align or diverge
+
+4. **identify actionable implications** - the core output:
+   - "given that X is true, we should consider Y"
+   - specific issues to open or update
+   - code changes to consider
+   - integration opportunities
+   - things we're missing or doing wrong
+
+5. **present findings** - be direct:
+   - lead with the implications, not the summary
+   - include specific file:line or issue references
+   - propose concrete next steps
+
+## anti-patterns
+
+- philosophical musing without action items
+- "we're complementary" without specifics
+- agreeing that everything is fine
+- backpedaling when challenged
+
+## output format
+
+```
+## implications
+
+1. **[actionable item]**: [reasoning]
+   - related: `file.py:123` or issue #456
+   - suggested: [specific change or issue to create]
+
+2. **[actionable item]**: ...
+
+## extracted facts
+
+- [concrete thing from the resource]
+- [another concrete thing]
+
+## open questions
+
+- [things to clarify or investigate further]
+```

frontend/src/lib/components/AddToMenu.svelte

···
 		background: transparent;
 		border: none;
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: background 0.15s;
···
 		border: none;
 		border-bottom: 1px solid var(--border-subtle);
 		color: var(--text-secondary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-family: inherit;
 		cursor: pointer;
 		transition: background 0.15s;
···
 		background: transparent;
 		border: none;
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: background 0.15s;
···
 		gap: 0.5rem;
 		padding: 1.5rem 1rem;
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	.create-playlist-btn {
···
 		border: none;
 		border-top: 1px solid var(--border-subtle);
 		color: var(--accent);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: background 0.15s;
···
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.create-form input:focus {
···
 		border-radius: var(--radius-base);
 		color: white;
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		cursor: pointer;
 		transition: opacity 0.15s;
···
 
 		.menu-item {
 			padding: 1rem 1.25rem;
-			font-size: 1rem;
+			font-size: var(--text-lg);
 		}
 
 		.back-button {

frontend/src/lib/components/AlbumSelect.svelte

···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		transition: all 0.2s;
 	}
···
 	}
 
 	.album-stats {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.similar-hint {
 		margin-top: 0.5rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--warning);
 		font-style: italic;
 		margin-bottom: 0;

frontend/src/lib/components/BrokenTracks.svelte

···
 	}
 
 	.section-header h2 {
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		margin: 0;
 		color: var(--warning);
 	}
···
 		border-radius: var(--radius-sm);
 		color: var(--warning);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		cursor: pointer;
 		transition: all 0.2s;
···
 		color: var(--warning);
 		padding: 0.25rem 0.6rem;
 		border-radius: var(--radius-lg);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 600;
 	}
 
···
 	}
 
 	.warning-icon {
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		flex-shrink: 0;
 	}
 
···
 
 	.track-title {
 		font-weight: 600;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		margin-bottom: 0.25rem;
 		color: var(--text-primary);
 	}
 
 	.track-meta {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 		margin-bottom: 0.5rem;
 	}
 
 	.issue-description {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--warning);
 	}
 
···
 		border-radius: var(--radius-sm);
 		color: var(--warning);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.2s;
···
 		border: 1px solid var(--border-subtle);
 		border-radius: var(--radius-base);
 		padding: 1rem;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 	}
 

frontend/src/lib/components/ColorSettings.svelte

···
 		align-items: center;
 		margin-bottom: 1rem;
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.close-btn {
 		background: transparent;
 		border: none;
 		color: var(--text-secondary);
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		cursor: pointer;
 		padding: 0;
 		width: 24px;
···
 
 	.color-value {
 		font-family: monospace;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 	}
 
···
 	}
 
 	.presets-label {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 	}
 

frontend/src/lib/components/HandleAutocomplete.svelte

···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		transition: border-color 0.2s;
 		box-sizing: border-box;
···
 		top: 50%;
 		transform: translateY(-50%);
 		color: var(--text-muted);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	.results {
···
 	}
 
 	.handle {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		overflow: hidden;
 		text-overflow: ellipsis;

frontend/src/lib/components/HandleSearch.svelte

···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		transition: all 0.2s;
 	}
···
 		right: 0.75rem;
 		top: 50%;
 		transform: translateY(-50%);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 	}
 
···
 	}
 
 	.result-handle {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 		border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
 		border-radius: var(--radius-xl);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.chip-avatar {
···
 
 	.max-features-message {
 		margin-top: 0.5rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--warning);
 	}
 
···
 		border: 1px solid color-mix(in srgb, var(--warning) 20%, var(--border-subtle));
 		border-radius: var(--radius-sm);
 		color: var(--warning);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		text-align: center;
 	}
 
···
 
 		.selected-artist-chip {
 			padding: 0.4rem 0.6rem;
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.chip-avatar {

frontend/src/lib/components/Header.svelte

···
 		color: var(--text-secondary);
 		padding: 0.5rem 1rem;
 		border-radius: var(--radius-base);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	h1 {
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		margin: 0;
 		color: var(--text-primary);
 		transition: color 0.2s;
···
 	.nav-link {
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		transition: all 0.2s;
 		white-space: nowrap;
 		display: flex;
···
 	.user-handle {
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		padding: 0.4rem 0.75rem;
 		background: var(--bg-tertiary);
 		border-radius: var(--radius-base);
···
 		color: var(--accent);
 		padding: 0.5rem 1rem;
 		border-radius: var(--radius-base);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		text-decoration: none;
 		transition: all 0.2s;
 		cursor: pointer;
···
 
 		.nav-link {
 			padding: 0.3rem 0.5rem;
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 
 		.nav-link span {
···
 		}
 
 		.user-handle {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			padding: 0.3rem 0.5rem;
 		}
 
 		.btn-primary {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			padding: 0.3rem 0.65rem;
 		}
 	}

frontend/src/lib/components/HiddenTagsFilter.svelte

···
 		align-items: center;
 		gap: 0.5rem;
 		flex-wrap: wrap;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 	}
 
 	.filter-toggle {
···
 	}
 
 	.filter-count {
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 	}
 
 	.filter-label {
 		color: var(--text-tertiary);
 		white-space: nowrap;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-family: inherit;
 	}
 
···
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);
 		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.15s;
···
 	}
 
 	.remove-icon {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		line-height: 1;
 		opacity: 0.5;
 	}
···
 		border: 1px dashed var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-tertiary);
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		cursor: pointer;
 		transition: all 0.15s;
 	}
···
 		background: transparent;
 		border: 1px solid var(--border-default);
 		color: var(--text-primary);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-family: inherit;
 		min-height: 24px;
 		width: 70px;

frontend/src/lib/components/LikersTooltip.svelte

···
 	.error,
 	.empty {
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		text-align: center;
 		padding: 0.5rem;
 	}
···
 		justify-content: center;
 		color: var(--text-tertiary);
 		font-weight: 600;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.liker-info {
···
 	.display-name {
 		color: var(--text-primary);
 		font-weight: 500;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.handle {
 		color: var(--text-tertiary);
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.liked-time {
 		color: var(--text-muted);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		flex-shrink: 0;
 	}
 

frontend/src/lib/components/LinksMenu.svelte

···
 	}
 
 	.menu-header span {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		color: var(--text-primary);
 		text-transform: uppercase;
···
 	}
 
 	.link-title {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		color: var(--text-primary);
 	}
 
 	.link-subtitle {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 	}
 

frontend/src/lib/components/PlatformStats.svelte

···
 		gap: 0.5rem;
 		margin-bottom: 0.75rem;
 		color: var(--text-secondary);
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
···
 	}
 
 	.stats-menu-value {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		color: var(--text-primary);
 		font-variant-numeric: tabular-nums;

frontend/src/lib/components/ProfileMenu.svelte

···
 	}
 
 	.menu-header span {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		color: var(--text-primary);
 		text-transform: uppercase;
···
 	}
 
 	.item-title {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		color: var(--text-primary);
 	}
 
 	.item-subtitle {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 		border-radius: var(--radius-base);
 		color: var(--text-secondary);
 		font-family: inherit;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		cursor: pointer;
 		transition: all 0.15s;
 		-webkit-tap-highlight-color: transparent;
···
 
 	.settings-section h3 {
 		margin: 0;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		color: var(--text-tertiary);
···
 	}
 
 	.theme-btn span {
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
···
 		align-items: center;
 		gap: 0.75rem;
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		cursor: pointer;
 		padding: 0.5rem 0;
 	}
···
 		border-top: 1px solid var(--border-subtle);
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		transition: color 0.15s;
 	}
 

frontend/src/lib/components/Queue.svelte

···
 
 	.queue-header h2 {
 		margin: 0;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		text-transform: uppercase;
 		letter-spacing: 0.12em;
 		color: var(--text-tertiary);
···
 
 	.clear-btn {
 		padding: 0.25rem 0.75rem;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-family: inherit;
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
···
 	}
 
 	.section-label {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		color: var(--text-tertiary);
···
 	}
 
 	.now-playing-card .track-artist {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 	}
 
···
 		justify-content: space-between;
 		align-items: center;
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 	}
 
 	.section-header h3 {
 		margin: 0;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 600;
 		color: var(--text-secondary);
 		text-transform: uppercase;
···
 	}
 
 	.track-artist {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		white-space: nowrap;
 		overflow: hidden;
···
 
 	.empty-state p {
 		margin: 0.5rem 0 0.25rem;
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		color: var(--text-secondary);
 	}
 
 	.empty-state span {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.queue-tracks::-webkit-scrollbar {

frontend/src/lib/components/SearchModal.svelte

···
 		background: transparent;
 		border: none;
 		outline: none;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		color: var(--text-primary);
 	}
···
 	}
 
 	.search-shortcut {
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		padding: 0.25rem 0.5rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-default);
···
 		justify-content: center;
 		background: var(--bg-tertiary);
 		border-radius: var(--radius-md);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		flex-shrink: 0;
 		position: relative;
 		overflow: hidden;
···
 	}
 
 	.result-title {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		white-space: nowrap;
 		overflow: hidden;
···
 	}
 
 	.result-subtitle {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-secondary);
 		white-space: nowrap;
 		overflow: hidden;
···
 		padding: 2rem;
 		text-align: center;
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.search-hints {
···
 	.search-hints p {
 		margin: 0 0 1rem 0;
 		color: var(--text-secondary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	.hint-shortcuts {
···
 		justify-content: center;
 		gap: 1.5rem;
 		color: var(--text-muted);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 	}
 
 	.hint-shortcuts span {
···
 		padding: 1rem;
 		text-align: center;
 		color: var(--error);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	/* mobile optimizations */
···
 		}
 
 		.search-input::placeholder {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.search-results {

frontend/src/lib/components/SensitiveImage.svelte

···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		padding: 0.25rem 0.5rem;
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 		white-space: nowrap;
 		opacity: 0;
···
 		transform: translate(-50%, -50%);
 		margin-bottom: 0;
 		padding: 0.5rem 0.75rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 	}
 
 	.sensitive-wrapper.blur:hover .sensitive-tooltip {

frontend/src/lib/components/SettingsMenu.svelte

···
 		align-items: center;
 		color: var(--text-primary);
 		font-weight: 600;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 	}
 
 	.close-btn {
···
 
 	.settings-section h3 {
 		margin: 0;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		color: var(--text-tertiary);
···
 	}
 
 	.theme-btn span {
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
···
 
 	.color-value {
 		font-family: monospace;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 	}
 
···
 		align-items: center;
 		gap: 0.65rem;
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.toggle input {
···
 	.toggle-hint {
 		margin: 0;
 		color: var(--text-tertiary);
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		line-height: 1.3;
 	}
 
···
 		border-top: 1px solid var(--border-subtle);
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		transition: color 0.15s;
 	}
 

frontend/src/lib/components/ShareButton.svelte

···
 		color: var(--accent);
 		padding: 0.25rem 0.75rem;
 		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		white-space: nowrap;
 		pointer-events: none;
 		animation: fadeIn 0.2s ease-in;

frontend/src/lib/components/SupporterBadge.svelte

···
 		border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
 		border-radius: var(--radius-sm);
 		color: var(--accent);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-weight: 500;
 		text-transform: lowercase;
 		white-space: nowrap;

frontend/src/lib/components/TagInput.svelte

···
 		border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
 		color: var(--accent-hover);
 		border-radius: var(--radius-xl);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 	}
 
···
 		background: transparent;
 		border: none;
 		color: var(--text-primary);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		outline: none;
 	}
···
 
 	.spinner {
 		color: var(--text-muted);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		margin-left: auto;
 	}
 
···
 	}
 
 	.tag-count {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 	}
 
···
 
 		.tag-chip {
 			padding: 0.3rem 0.5rem;
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 	}
 </style>

frontend/src/lib/components/Toast.svelte

···
 		border: 1px solid rgba(255, 255, 255, 0.06);
 		border-radius: var(--radius-md);
 		pointer-events: none;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		max-width: 450px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 	}
 
 	.toast-icon {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		flex-shrink: 0;
 		opacity: 0.7;
 		margin-top: 0.1rem;
···
 
 		.toast {
 			padding: 0.35rem 0.7rem;
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			max-width: 90vw;
 		}
 
 		.toast-icon {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 		}
 
 		.toast-message {

frontend/src/lib/components/TrackActionsMenu.svelte

···
 	}
 
 	.menu-item span {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 400;
 		flex: 1;
 	}
···
 		border: none;
 		border-bottom: 1px solid var(--border-default);
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: background 0.15s;
···
 		border: none;
 		border-bottom: 1px solid var(--border-subtle);
 		color: var(--text-primary);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		cursor: pointer;
 		transition: background 0.15s;
···
 		gap: 0.5rem;
 		padding: 2rem 1rem;
 		color: var(--text-tertiary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.create-playlist-btn {
···
 		border: none;
 		border-top: 1px solid var(--border-subtle);
 		color: var(--accent);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		cursor: pointer;
 		transition: background 0.15s;
···
 		border-radius: var(--radius-md);
 		color: var(--text-primary);
 		font-family: inherit;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 	}
 
 	.create-form input:focus {
···
 		border-radius: var(--radius-md);
 		color: white;
 		font-family: inherit;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 500;
 		cursor: pointer;
 		transition: opacity 0.15s;
···
 		}
 
 		.menu-item span {
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		.menu-item svg {
···
 
 		.playlist-item {
 			padding: 0.625rem 1rem;
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		.playlist-thumb,

frontend/src/lib/components/TrackItem.svelte

···
 
 	.track-index {
 		width: 24px;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 		text-align: center;
 		flex-shrink: 0;
···
 		align-items: flex-start;
 		gap: 0.15rem;
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		min-width: 0;
 		width: 100%;
···
 
 	.metadata-separator {
 		display: none;
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 	}
 
 	.artist-link {
···
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		color: var(--accent-hover);
 		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-weight: 500;
 		text-decoration: none;
 		transition: all 0.15s;
···
 		color: var(--text-muted);
 		border: none;
 		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-weight: 500;
 		font-family: inherit;
 		cursor: pointer;
···
 	}
 
 	.track-meta {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		display: flex;
 		align-items: center;
···
 
 	.meta-separator {
 		color: var(--text-muted);
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 	}
 
 	.likes {
···
 		}
 
 		.track-title {
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		.track-metadata {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			gap: 0.35rem;
 		}
 
 		.track-meta {
-			font-size: 0.7rem;
+			font-size: var(--text-xs);
 		}
 
 		.track-actions {
···
 		}
 
 		.track-title {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.track-metadata {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 		}
 
 		.metadata-separator {

frontend/src/lib/components/WaveLoading.svelte

···
 	.message {
 		margin: 0;
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		text-align: center;
 	}
 </style>

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

···
 	}
 
 	.time {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		min-width: 45px;
 		font-variant-numeric: tabular-nums;
···
 		}
 
 		.time {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 			min-width: 38px;
 		}
 

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

···
 
 	.player-title,
 	.player-title-link {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin-bottom: 0;
···
 
 		.player-title,
 		.player-title-link {
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 			margin-bottom: 0;
 		}
 
 		.player-metadata {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 
 		.player-title.scrolling,

frontend/src/routes/+error.svelte

···
 	}
 
 	.error-message {
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.error-detail {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		color: var(--text-tertiary);
 		margin: 0 0 2rem 0;
 	}
···
 	.home-link {
 		color: var(--accent);
 		text-decoration: none;
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		padding: 0.75rem 1.5rem;
 		border: 1px solid var(--accent);
 		border-radius: var(--radius-base);
···
 		}
 
 		.error-message {
-			font-size: 1.1rem;
+			font-size: var(--text-xl);
 		}
 	}
 </style>

frontend/src/routes/+layout.svelte

···
 		--text-muted: #666666;
 
 		/* typography scale */
-		--text-page-heading: 1.5rem;
+		--text-xs: 0.75rem;
+		--text-sm: 0.85rem;
+		--text-base: 0.9rem;
+		--text-lg: 1rem;
+		--text-xl: 1.1rem;
+		--text-2xl: 1.25rem;
+		--text-3xl: 1.5rem;
+
+		/* semantic typography (aliases) */
+		--text-page-heading: var(--text-3xl);
 		--text-section-heading: 1.2rem;
-		--text-body: 1rem;
-		--text-small: 0.9rem;
+		--text-body: var(--text-lg);
+		--text-small: var(--text-base);
 
 		/* border radius scale */
 		--radius-sm: 4px;

frontend/src/routes/+page.svelte

···
 		}
 
 		.section-header h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 	}
 </style>

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

···
 
 	.subtitle {
 		color: var(--text-tertiary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		margin: 0;
 	}
 
···
 
 	.error-state .hint {
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		margin-top: 0.5rem;
 	}
 
···
 	}
 
 	.total-label {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		color: var(--text-tertiary);
···
 
 	.updated {
 		text-align: center;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 		margin-top: 0.75rem;
 	}
···
 
 	.breakdown-section h2,
 	.audd-section h2 {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		color: var(--text-tertiary);
···
 	}
 
 	.cost-note {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 	}
 
···
 	.time-range-toggle button {
 		padding: 0.35rem 0.75rem;
 		font-family: inherit;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-weight: 500;
 		background: transparent;
 		border: none;
···
 	.no-data {
 		text-align: center;
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		padding: 2rem;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-subtle);
···
 	}
 
 	.audd-explainer {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 		margin-bottom: 1.5rem;
 		line-height: 1.5;
···
 	}
 
 	.stat-value {
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		font-weight: 700;
 		color: var(--text-primary);
 		font-variant-numeric: tabular-nums;
 	}
 
 	.stat-label {
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 		text-align: center;
 		margin-top: 0.25rem;
···
 	}
 
 	.daily-chart h3 {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		color: var(--text-tertiary);
···
 
 	.support-text h3 {
 		margin: 0 0 0.5rem;
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		color: var(--text-primary);
 	}
 
 	.support-text p {
 		margin: 0 0 1.5rem;
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.support-button {
···
 		border-radius: var(--radius-md);
 		text-decoration: none;
 		font-weight: 600;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		transition: transform 0.15s, box-shadow 0.15s;
 	}
 
···
 	/* footer */
 	.footer-note {
 		text-align: center;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		padding-bottom: 1rem;
 	}

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

···
 	}
 
 	.page-header p {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-tertiary);
 		margin: 0;
 	}
···
 	}
 
 	.collection-info h3 {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0 0 0.15rem 0;
···
 	}
 
 	.collection-info p {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		margin: 0;
 	}
···
 	}
 
 	.section-header h2 {
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0;
···
 	}
 
 	.empty-state p {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 500;
 		color: var(--text-secondary);
 		margin: 0 0 0.25rem 0;
 	}
 
 	.empty-state span {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 	}
 
···
 	}
 
 	.modal-header h3 {
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0;
···
 
 	.modal-body label {
 		display: block;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 500;
 		color: var(--text-secondary);
 		margin-bottom: 0.5rem;
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-md);
 		font-family: inherit;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		color: var(--text-primary);
 		transition: border-color 0.15s;
 	}
···
 
 	.modal-body .error {
 		margin: 0.5rem 0 0 0;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: #ef4444;
 	}
 
···
 		padding: 0.625rem 1.25rem;
 		border-radius: var(--radius-md);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.15s;
···
 		}
 
 		.page-header h1 {
-			font-size: 1.5rem;
+			font-size: var(--text-3xl);
 		}
 
 		.collection-card {
···
 		}
 
 		.collection-info h3 {
-			font-size: 0.95rem;
+			font-size: var(--text-base);
 		}
 
 		.section-header h2 {
-			font-size: 1rem;
+			font-size: var(--text-lg);
 		}
 
 		.create-btn {
 			padding: 0.5rem 0.875rem;
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.empty-state {

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

···
 	}
 
 	.count {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 500;
 		color: var(--text-tertiary);
 		background: var(--bg-tertiary);
···
 		padding: 0.75rem 1.5rem;
 		border-radius: var(--radius-2xl);
 		font-weight: 600;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	.empty-state h2 {
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		font-weight: 600;
 		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.empty-state p {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		margin: 0;
 	}
 
···
 		}
 
 		.section-header h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.count {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			padding: 0.15rem 0.45rem;
 		}
 
···
 		}
 
 		.empty-state h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.header-actions {
···
 		.queue-button,
 		.reorder-button {
 			padding: 0.6rem 1rem;
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.queue-button svg,

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

···
 		justify-content: center;
 		background: var(--bg-tertiary);
 		color: var(--text-secondary);
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		font-weight: 600;
 	}
 
···
 	}
 
 	.user-info h1 {
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		font-weight: 700;
 		color: var(--text-primary);
 		margin: 0;
···
 	}
 
 	.handle {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-tertiary);
 		text-decoration: none;
 		transition: color 0.15s;
···
 	}
 
 	.count {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		color: var(--text-secondary);
 	}
···
 		border: 1px solid var(--border-default);
 		color: var(--text-secondary);
 		border-radius: var(--radius-base);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.15s;
···
 	}
 
 	.empty-state h2 {
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		font-weight: 600;
 		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.empty-state p {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		margin: 0;
 	}
 
···
 		}
 
 		.avatar-placeholder {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.user-info h1 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.handle {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.section-header h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.count {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.empty-state {
···
 		}
 
 		.empty-state h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.btn-action {
 			padding: 0.45rem 0.7rem;
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 
 		.btn-action svg {

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

···
 
 	label {
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	button.primary {
···
 		color: white;
 		border: none;
 		border-radius: var(--radius-md);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		font-family: inherit;
 		cursor: pointer;
···
 		border: none;
 		color: var(--text-secondary);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		cursor: pointer;
 		text-align: left;
 	}
···
 	.faq-content {
 		padding: 0 0 1rem 0;
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		line-height: 1.6;
 	}
 
···
 		}
 
 		h1 {
-			font-size: 1.5rem;
+			font-size: var(--text-3xl);
 		}
 	}
 </style>

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

···
 
 	.art-edit-overlay span {
 		font-family: inherit;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 500;
 	}
 
···
 
 	.playlist-type {
 		text-transform: uppercase;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-weight: 600;
 		letter-spacing: 0.1em;
 		color: var(--text-tertiary);
···
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 	}
 
···
 
 	.meta-separator {
 		color: var(--text-muted);
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 	}
 
 	.show-on-profile-toggle {
···
 		gap: 0.5rem;
 		margin-top: 0.75rem;
 		cursor: pointer;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 	}
 
···
 		padding: 0.75rem 1.5rem;
 		border-radius: var(--radius-2xl);
 		font-weight: 600;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	.section-heading {
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin-bottom: 1rem;
···
 		border-radius: var(--radius-md);
 		color: var(--text-tertiary);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		cursor: pointer;
 		transition: all 0.2s;
 	}
···
 	}
 
 	.empty-state p {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 500;
 		color: var(--text-secondary);
 		margin: 0 0 0.25rem 0;
 	}
 
 	.empty-state span {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 		margin-bottom: 1.5rem;
 	}
···
 		border: none;
 		border-radius: var(--radius-md);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.15s;
···
 	}
 
 	.modal-header h3 {
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0;
···
 		background: transparent;
 		border: none;
 		font-family: inherit;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		color: var(--text-primary);
 		outline: none;
 	}
···
 		padding: 2rem 1.5rem;
 		text-align: center;
 		color: var(--text-muted);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		margin: 0;
 	}
 
···
 	}
 
 	.result-title {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		color: var(--text-primary);
 		white-space: nowrap;
···
 	}
 
 	.result-artist {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		white-space: nowrap;
 		overflow: hidden;
···
 	.modal-body p {
 		margin: 0;
 		color: var(--text-secondary);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		line-height: 1.5;
 	}
 
···
 		padding: 0.625rem 1.25rem;
 		border-radius: var(--radius-md);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.15s;
···
 		}
 
 		.playlist-meta {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.playlist-actions {
···
 		}
 
 		.playlist-meta {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			flex-wrap: wrap;
 		}
 	}

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

···
 	.view-profile-link {
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		padding: 0.35rem 0.6rem;
 		background: var(--bg-tertiary);
 		border-radius: var(--radius-sm);
···
 	.settings-link {
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		padding: 0.35rem 0.6rem;
 		background: var(--bg-tertiary);
 		border-radius: var(--radius-sm);
···
 	.upload-card-title {
 		display: block;
 		font-weight: 600;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		color: var(--text-primary);
 	}
 
 	.upload-card-subtitle {
 		display: block;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 	}
 
···
 		display: block;
 		color: var(--text-secondary);
 		margin-bottom: 0.4rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	input[type='text'] {
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		transition: all 0.15s;
 	}
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		transition: all 0.15s;
 		resize: vertical;
···
 
 	.hint {
 		margin-top: 0.35rem;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-muted);
 	}
 
···
 		display: block;
 		color: var(--text-secondary);
 		margin-bottom: 0.6rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	.support-options {
···
 	}
 
 	.support-option span {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-primary);
 	}
 
 	.support-status {
 		margin-left: auto;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 	}
 
 	.support-setup-link,
 	.support-status-link {
 		margin-left: auto;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		text-decoration: none;
 	}
 
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		transition: all 0.15s;
 		margin-bottom: 0.5rem;
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 	}
···
 
 	.file-info {
 		margin-top: 0.5rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 	}
 
···
 		color: var(--text-primary);
 		border: none;
 		border-radius: var(--radius-sm);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
···
 	}
 
 	.track-view-link {
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 		color: var(--text-muted);
 		text-decoration: none;
 		transition: color 0.15s;
···
 	}
 
 	.edit-label {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 	}
 
···
 		align-items: center;
 		gap: 0.5rem;
 		cursor: pointer;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-primary);
 	}
 
···
 	}
 
 	.field-hint {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		margin-top: 0.25rem;
 	}
···
 
 	.track-title {
 		font-weight: 600;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		margin-bottom: 0.25rem;
 		color: var(--text-primary);
 		display: flex;
···
 	}
 
 	.track-meta {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 		margin-bottom: 0.25rem;
 		display: flex;
···
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		color: var(--accent-hover);
 		border-radius: var(--radius-sm);
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		font-weight: 500;
 		text-decoration: none;
 		transition: all 0.15s;
···
 	}
 
 	.track-date {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 	}
 
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 	}
 
···
 
 	.current-image-label {
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	.edit-input:focus {
···
 	}
 
 	.album-title {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0 0 0.25rem 0;
···
 	}
 
 	.album-stats {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		margin: 0;
 	}
···
 	.view-playlists-link {
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		padding: 0.35rem 0.6rem;
 		background: var(--bg-tertiary);
 		border-radius: var(--radius-sm);
···
 	}
 
 	.playlist-title {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0 0 0.25rem 0;
···
 	}
 
 	.playlist-stats {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		margin: 0;
 	}
···
 	}
 
 	.control-info h3 {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		margin: 0 0 0.15rem 0;
 		color: var(--text-primary);
 	}
 
 	.control-description {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 		margin: 0;
 		line-height: 1.4;
···
 		color: var(--text-primary);
 		border: none;
 		border-radius: var(--radius-base);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		cursor: pointer;
 		transition: all 0.2s;
···
 		border: 1px solid var(--error);
 		border-radius: var(--radius-base);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	.delete-warning {
 		margin: 0 0 1rem;
 		color: var(--error);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		line-height: 1.5;
 	}
 
···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-primary);
 		cursor: pointer;
 	}
···
 
 	.atproto-note {
 		margin: 0.5rem 0 0;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 	}
 
···
 		padding: 0.5rem;
 		background: color-mix(in srgb, var(--warning) 10%, transparent);
 		border-radius: var(--radius-sm);
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--warning);
 	}
 
 	.confirm-prompt {
 		margin: 0 0 0.5rem;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 	}
 
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		margin-bottom: 1rem;
 	}
···
 		border-radius: var(--radius-base);
 		color: var(--text-secondary);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		cursor: pointer;
 		transition: all 0.15s;
 	}
···
 		border-radius: var(--radius-base);
 		color: white;
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		cursor: pointer;
 		transition: all 0.15s;
···
 		}
 
 		.portal-header h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.profile-section h2,
···
 		.albums-section h2,
 		.playlists-section h2,
 		.data-section h2 {
-			font-size: 1.1rem;
+			font-size: var(--text-xl);
 		}
 
 		.section-header {
···
 		}
 
 		.view-profile-link {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 			padding: 0.3rem 0.5rem;
 		}
 
···
 		}
 
 		label {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			margin-bottom: 0.3rem;
 		}
 
···
 		input[type='url'],
 		textarea {
 			padding: 0.5rem 0.6rem;
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		textarea {
···
 		}
 
 		.hint {
-			font-size: 0.7rem;
+			font-size: var(--text-xs);
 		}
 
 		.avatar-preview img {
···
 
 		button[type="submit"] {
 			padding: 0.6rem;
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		/* upload card mobile */
···
 		}
 
 		.upload-card-title {
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		.upload-card-subtitle {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 		}
 
 		/* tracks mobile */
···
 		}
 
 		.track-title {
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		.track-meta {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 
 		.track-date {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 		}
 
 		.track-actions {
···
 		}
 
 		.edit-label {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 
 		.edit-input {
 			padding: 0.45rem 0.5rem;
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.edit-actions {
···
 		}
 
 		.control-info h3 {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.control-description {
-			font-size: 0.7rem;
+			font-size: var(--text-xs);
 		}
 
 		.export-btn {
 			padding: 0.5rem 0.85rem;
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 
 		/* albums mobile */
···
 		}
 
 		.album-title {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		/* playlists mobile */
···
 		}
 
 		.playlist-title {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.playlist-stats {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 		}
 
 		.view-playlists-link {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 			padding: 0.3rem 0.5rem;
 		}
 	}

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

···
 		display: block;
 		color: var(--text-secondary);
 		margin-bottom: 0.5rem;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 	}
 
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		transition: all 0.2s;
 	}
···
 
 	.hint {
 		margin-top: 0.5rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 	}
 
···
 		color: white;
 		border: none;
 		border-radius: var(--radius-sm);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 600;
 		cursor: pointer;
 		transition: all 0.2s;

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

···
 
 	.token-overlay-content h2 {
 		margin: 0 0 0.75rem;
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		color: var(--text-primary);
 	}
 
 	.token-overlay-warning {
 		color: var(--warning);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		margin: 0 0 1.5rem;
 		line-height: 1.5;
 	}
···
 
 	.token-overlay-display code {
 		flex: 1;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		word-break: break-all;
 		color: var(--accent);
 		text-align: left;
···
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-family: inherit;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 600;
 		cursor: pointer;
 		white-space: nowrap;
···
 	}
 
 	.token-overlay-hint {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		margin: 0 0 1.5rem;
 	}
···
 		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		cursor: pointer;
 		transition: all 0.15s;
 	}
···
 	.portal-link {
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		padding: 0.4rem 0.75rem;
 		background: var(--bg-tertiary);
 		border-radius: var(--radius-base);
···
 	}
 
 	.settings-section h2 {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		color: var(--text-tertiary);
···
 
 	.setting-info h3 {
 		margin: 0 0 0.25rem;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		color: var(--text-primary);
 	}
 
 	.setting-info p {
 		margin: 0;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		line-height: 1.4;
 	}
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-family: inherit;
 	}
 
···
 		display: flex;
 		align-items: center;
 		gap: 0.4rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 		cursor: pointer;
 	}
···
 		border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
 		border-radius: var(--radius-base);
 		margin-top: 0.75rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--warning);
 	}
 
···
 	/* developer tokens */
 	.loading-tokens {
 		color: var(--text-tertiary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 	}
 
 	.existing-tokens {
···
 	}
 
 	.tokens-header {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		color: var(--text-tertiary);
···
 	.token-name {
 		font-weight: 500;
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	.token-meta {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-tertiary);
 	}
 
···
 		border-radius: var(--radius-sm);
 		color: var(--text-secondary);
 		font-family: inherit;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		cursor: pointer;
 		transition: all 0.15s;
 		white-space: nowrap;
···
 
 	.token-value {
 		flex: 1;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		word-break: break-all;
 		color: var(--accent);
 	}
···
 		border-radius: var(--radius-sm);
 		color: var(--text-secondary);
 		font-family: inherit;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		cursor: pointer;
 		transition: all 0.15s;
 	}
···
 
 	.token-warning {
 		margin-top: 0.5rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--warning);
 	}
 
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 	}
 
···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 	}
 
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-family: inherit;
 		cursor: pointer;
 	}
···
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
 		font-family: inherit;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		cursor: pointer;
 		transition: all 0.15s;

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

···
 	}
 
 	.subtitle {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		color: var(--text-tertiary);
 		margin: 0;
 		text-shadow: var(--text-shadow, none);
···
 		border: 1px solid var(--glass-btn-border, var(--accent));
 		color: var(--accent);
 		border-radius: var(--radius-base);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	.empty-state h2 {
-		font-size: 1.5rem;
+		font-size: var(--text-3xl);
 		font-weight: 600;
 		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.empty-state p {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		margin: 0;
 	}
 
···
 		text-align: center;
 		padding: 4rem 1rem;
 		color: var(--text-tertiary);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 	}
 
 	.tracks-list {
···
 		}
 
 		.empty-state h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 
 		.btn-queue-all {
 			padding: 0.5rem 0.75rem;
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.btn-queue-all svg {
···
 		}
 
 		.subtitle {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.btn-queue-all {
 			padding: 0.45rem 0.65rem;
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 
 		.btn-queue-all svg {

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

···
 		gap: 0.75rem;
 		flex-wrap: wrap;
 		color: var(--text-secondary);
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 	}
 
 	.separator {
 		color: var(--text-muted);
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 	}
 
 	.artist-link {
···
 
 	.track-stats {
 		color: var(--text-tertiary);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
···
 	}
 
 	.track-stats .separator {
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 	}
 
 	.track-tags {
···
 		background: color-mix(in srgb, var(--accent) 15%, transparent);
 		color: var(--accent-hover);
 		border-radius: var(--radius-sm);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 500;
 		text-decoration: none;
 		transition: all 0.15s;
···
 		color: var(--bg-primary);
 		border: none;
 		border-radius: var(--radius-2xl);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
···
 		color: var(--text-primary);
 		border: 1px solid var(--border-emphasis);
 		border-radius: var(--radius-2xl);
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-weight: 500;
 		font-family: inherit;
 		cursor: pointer;
···
 		}
 
 		.track-title {
-			font-size: 1.5rem;
+			font-size: var(--text-3xl);
 		}
 
 		.track-metadata {
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 			gap: 0.5rem;
 		}
 
 		.track-stats {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.track-actions {
···
 			min-width: calc(50% - 0.25rem);
 			justify-content: center;
 			padding: 0.6rem 1rem;
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		.btn-play svg {
···
 			min-width: calc(50% - 0.25rem);
 			justify-content: center;
 			padding: 0.6rem 1rem;
-			font-size: 0.9rem;
+			font-size: var(--text-base);
 		}
 
 		.btn-queue svg {
···
 	}
 
 	.comments-title {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0 0 0.75rem 0;
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-base);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 	}
 
···
 		color: var(--bg-primary);
 		border: none;
 		border-radius: var(--radius-base);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
···
 
 	.login-prompt {
 		color: var(--text-tertiary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		margin-bottom: 1rem;
 	}
 
···
 
 	.no-comments {
 		color: var(--text-muted);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		text-align: center;
 		padding: 1rem;
 	}
···
 	}
 
 	.comment-timestamp {
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		font-weight: 600;
 		color: var(--accent);
 		background: color-mix(in srgb, var(--accent) 10%, transparent);
···
 	}
 
 	.comment-time {
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		color: var(--text-muted);
 	}
 
···
 	}
 
 	.comment-author {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		font-weight: 500;
 		color: var(--text-secondary);
 		text-decoration: none;
···
 	}
 
 	.comment-text {
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-primary);
 		margin: 0;
 		line-height: 1.4;
···
 		border: none;
 		padding: 0;
 		color: var(--text-muted);
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		cursor: pointer;
 		transition: color 0.15s;
 		font-family: inherit;
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 	}
 
···
 
 	.edit-form-btn {
 		padding: 0.25rem 0.6rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		font-family: inherit;
 		border-radius: var(--radius-sm);
 		cursor: pointer;
···
 		}
 
 		.comment-timestamp {
-			font-size: 0.75rem;
+			font-size: var(--text-xs);
 			padding: 0.15rem 0.4rem;
 		}
 	}

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

···
 	}
 
 	.error-message {
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.error-detail {
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		color: var(--text-tertiary);
 		margin: 0 0 2rem 0;
 	}
···
 	.bsky-link {
 		color: var(--accent);
 		text-decoration: none;
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		padding: 0.75rem 1.5rem;
 		border: 1px solid var(--accent);
 		border-radius: var(--radius-base);
···
 		}
 
 		.error-message {
-			font-size: 1.1rem;
+			font-size: var(--text-xl);
 		}
 
 		.actions {

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

···
 		border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
 		border-radius: var(--radius-sm);
 		color: var(--accent);
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		text-decoration: none;
 		transition: all 0.2s ease;
 	}
···
 
 	.handle {
 		color: var(--text-tertiary);
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		text-decoration: none;
 		transition: color 0.2s;
 	}
···
 
 	.section-header span {
 		color: var(--text-tertiary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 	}
···
 	.album-card-meta p {
 		margin: 0;
 		color: var(--text-tertiary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		display: flex;
 		align-items: center;
 		gap: 0.4rem;
···
 
 	.stat-label {
 		color: var(--text-tertiary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		text-transform: lowercase;
 		line-height: 1;
 	}
 
 	.stat-duration {
 		margin-top: 0.5rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-secondary);
 		font-variant-numeric: tabular-nums;
 	}
···
 
 	.top-item-plays {
 		color: var(--accent);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		line-height: 1;
 	}
 
···
 		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		font-family: inherit;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		cursor: pointer;
 		transition: all 0.2s ease;
 	}
···
 
 	.tracks-loading {
 		margin-left: 0.75rem;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 		font-weight: 400;
 		text-transform: lowercase;
···
 
 	.empty-message {
 		color: var(--text-secondary);
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		margin: 0 0 0.5rem 0;
 	}
 
···
 	.bsky-link {
 		color: var(--accent);
 		text-decoration: none;
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		padding: 0.75rem 1.5rem;
 		border: 1px solid var(--accent);
 		border-radius: var(--radius-base);
···
 
 		.support-btn {
 			height: 28px;
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			padding: 0 0.6rem;
 		}
 
···
 		}
 
 		.album-card-meta h3 {
-			font-size: 0.95rem;
+			font-size: var(--text-base);
 			margin-bottom: 0.25rem;
 		}
 
 		.album-card-meta p {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 		}
 	}
 
···
 
 	.collection-info h3 {
 		margin: 0 0 0.25rem 0;
-		font-size: 1.1rem;
+		font-size: var(--text-xl);
 		color: var(--text-primary);
 	}
 
 	.collection-info p {
 		margin: 0;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		color: var(--text-tertiary);
 	}
 

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

···
 		justify-content: center;
 		gap: 0.5rem;
 		color: white;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		opacity: 0;
 		transition: opacity 0.2s;
 	}
···
 
 	.album-type {
 		text-transform: uppercase;
-		font-size: 0.75rem;
+		font-size: var(--text-xs);
 		font-weight: 600;
 		letter-spacing: 0.1em;
 		color: var(--text-tertiary);
···
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		color: var(--text-secondary);
 		text-shadow: var(--text-shadow, none);
 	}
···
 
 	.meta-separator {
 		color: var(--text-muted);
-		font-size: 0.7rem;
+		font-size: var(--text-xs);
 	}
 
 	.album-actions {
···
 		padding: 0.75rem 1.5rem;
 		border-radius: var(--radius-2xl);
 		font-weight: 600;
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	.section-heading {
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		font-weight: 600;
 		color: var(--text-primary);
 		margin-bottom: 1rem;
···
 		}
 
 		.album-meta {
-			font-size: 0.85rem;
+			font-size: var(--text-sm);
 		}
 
 		.album-actions {
···
 		}
 
 		.album-meta {
-			font-size: 0.8rem;
+			font-size: var(--text-sm);
 			flex-wrap: wrap;
 		}
 	}
···
 
 	.modal-header h3 {
 		margin: 0;
-		font-size: 1.25rem;
+		font-size: var(--text-2xl);
 		font-weight: 600;
 		color: var(--text-primary);
 	}
···
 		padding: 0.625rem 1.25rem;
 		border-radius: var(--radius-md);
 		font-weight: 500;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.2s;

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

···
 		display: block;
 		color: var(--text-secondary);
 		margin-bottom: 0.5rem;
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 	}
 
 	input[type="text"] {
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-family: inherit;
 		transition: all 0.2s;
 	}
···
 		border: 1px solid var(--border-default);
 		border-radius: var(--radius-sm);
 		color: var(--text-primary);
-		font-size: 0.9rem;
+		font-size: var(--text-base);
 		font-family: inherit;
 		cursor: pointer;
 	}
 
 	.format-hint {
 		margin-top: 0.25rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 	}
 
 	.file-info {
 		margin-top: 0.5rem;
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		color: var(--text-muted);
 	}
 
···
 		color: var(--text-primary);
 		border: none;
 		border-radius: var(--radius-sm);
-		font-size: 1rem;
+		font-size: var(--text-lg);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
···
 	}
 
 	.checkbox-text {
-		font-size: 0.95rem;
+		font-size: var(--text-base);
 		color: var(--text-primary);
 		line-height: 1.4;
 	}
···
 	.attestation-note {
 		margin-top: 0.75rem;
 		margin-left: 2rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		line-height: 1.4;
 	}
···
 	.gating-note {
 		margin-top: 0.5rem;
 		margin-left: 2rem;
-		font-size: 0.8rem;
+		font-size: var(--text-sm);
 		color: var(--text-tertiary);
 		line-height: 1.4;
 	}
···
 	}
 
 	.gating-disabled-text {
-		font-size: 0.85rem;
+		font-size: var(--text-sm);
 		line-height: 1.4;
 	}
 
···
 		}
 
 		.section-header h2 {
-			font-size: 1.25rem;
+			font-size: var(--text-2xl);
 		}
 	}
 </style>