web-player: fix icon size guardrail and add larger icon tokens

web-player/CLAUDE.md

@@ -63,7 +63,7 @@ npm run lint:tokens      # scripts/check-tokens.mjs, the design system guardrail
 The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utility` recipes) and in `src/lib/theme/` (`theme.css` for the static neutrals, `tokens.ts` for the dynamic tokens that depend on the user's hue). `scripts/check-tokens.mjs` (run as `npm run lint:tokens`, part of `lint`) fails on a stock radius, an `h-N w-N` pair, fractional quarter spacing, a literal hex/`rgba()`, or an arbitrary `-[…]` value outside its whitelist, so check that script before adding one.
 
 - **Radii:** always `rounded-tag/thumb/control/art/art-lg/panel/panel-lg` (or `rounded-full` for pills and circles). Never `rounded-sm/md/lg/xl/2xl/3xl` or a bare `rounded`.
-- **Square sizes:** use `size-*` instead of repeating `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl`; covers: `size-cover-xs` through `size-cover-hero`).
+- **Square sizes:** use `size-*` instead of repeating `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl/2xl/3xl`; covers: `size-cover-xs` through `size-cover-hero`).
 - **Typography:** use the recipes `text-display-1/2/3/4`, `text-eyebrow`, `text-body`, with tracking through `tracking-display`/`tracking-eyebrow` rather than a loose `tracking-[…]`.
 - **Spacing:** stick to the Tailwind scale in `.5` steps and avoid quarters like `.25`/`.75`, unless the semantic token calls for it (for example `mb-4.5` in `SectionHeading`).
 - **Colors:** always use `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never a literal hex or `rgba()` inside a `.svelte` file; those literals only belong in `theme.css`/`tokens.ts` as the source of truth.

web-player/scripts/check-tokens.mjs

@@ -45,7 +45,7 @@ for (const file of files) {
 		}
 
 		for (const icon of icons) {
-			const tag = line.match(new RegExp(`<${icon}\s[^>]*`));
+			const tag = line.match(new RegExp(`<${icon}\\s[^>]*`));
 			if (!tag) continue;
 			if (ICON_PIXEL_SIZE.test(tag[0])) {
 				violations.push(`${file}:${lineNo} — icono con size={N}: usa una clase size-icon-*`);

web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte

@@ -42,7 +42,7 @@
 
 <div bind:this={sentinel} class="flex min-h-12 items-center justify-center py-8">
 	{#if loading}
-		<LoaderCircle class="size-5 animate-spin text-fg-2" />
+		<LoaderCircle class="size-icon-lg animate-spin text-fg-2" />
 	{:else if error}
 		<div class="flex items-center gap-3 text-sm text-fg-2">
 			No se pudo cargar más.

web-player/src/routes/(app)/upload/+page.svelte

@@ -149,7 +149,7 @@
 	{#if status === 'done'}
 		<Surface padding="lg" class="mt-10 bg-accent-tint text-center">
 			<span class="mx-auto grid size-14 place-items-center rounded-full bg-accent-soft text-ink">
-				<Check class="size-7" />
+				<Check class="size-icon-2xl" />
 			</span>
 			<h2 class="mt-6 font-display text-2xl font-semibold tracking-display text-fg">¡Subida!</h2>
 			<p class="mt-3 text-sm text-fg-2">
@@ -210,9 +210,9 @@
 					aria-label="Seleccionar archivo de audio"
 				/>
 				{#if audioName === ''}
-					<Headphones class="size-9 text-fg-2 sm:size-10" />
+					<Headphones class="size-icon-xl text-fg-2 sm:size-icon-3xl" />
 				{:else}
-					<Music class="size-9 text-accent-soft sm:size-10" />
+					<Music class="size-icon-xl text-accent-soft sm:size-icon-3xl" />
 				{/if}
 				{#if audioName === ''}
 					<p class="mt-4 text-sm font-medium text-fg">

web-player/src/routes/layout.css

@@ -57,6 +57,8 @@
 	--spacing-icon-md: 1.125rem;
 	--spacing-icon-lg: 1.25rem;
 	--spacing-icon-xl: 2.25rem;
+	--spacing-icon-2xl: 1.75rem;
+	--spacing-icon-3xl: 2.5rem;
 	--spacing-section: 2.875rem;
 
 	--container-prose-sm: 26rem;