dark mode style overhaul

.claude/DARK_MODE.md

···
+# Dark Mode Style Guide
+
+## The Problem (Pre-January 2025)
+
+Our dark mode was "very blue" and garish because:
+
+1. **Slate is blue-tinted** - Tailwind's slate scale has a cool/blue undertone
+2. **Cyan accent overload** - used for links, buttons, icons, focus states, everything
+3. **Rainbow badge syndrome** - purple, indigo, rose, emerald, amber all fighting
+4. **Inconsistent gray scales** - mixing `gray-` and `slate-` classes
+
+## The Fix: Neutral Grays + Restrained Accent
+
+Inspired by Discord and Linear's approach:
+- True neutral backgrounds (zinc instead of slate)
+- Single accent color (cyan) for primary actions only
+- High contrast text (AAA compliant, 7.0+ ratio)
+- Muted/semantic colors for badges and status
+- Visible borders (zinc-600 for definition)
+
+## Design Principles
+
+**60-30-10 rule**: 60% background, 30% secondary/text, 10% accent. Don't overuse the accent color.
+
+**Text contrast for AAA (7.0+)**:
+- zinc-100 on zinc-900 = 16.12:1 ✓
+- zinc-300 on zinc-900 = 11.99:1 ✓ (use for secondary text)
+- zinc-400 on zinc-900 = 6.91:1 ✗ (below AAA, ok for muted/hints)
+- zinc-500 on zinc-900 = 3.67:1 ✗ (placeholder text only)
+
+**Saturated colors glow on dark**: Use 400-shade colors sparingly. Desaturate or use lighter tones for large areas.
+
+**Borders matter more in dark mode**: Less visual differentiation between dark grays means borders need to be more visible (zinc-600 instead of zinc-700).
+
+## Color Palette
+
+### Backgrounds (zinc scale - true neutral)
+
+| Use Case | Light | Dark |
+|----------|-------|------|
+| Page background | `bg-white` | `dark:bg-zinc-900` |
+| Elevated surface (cards, panels) | `bg-gray-50` | `dark:bg-zinc-800` |
+| Hover/active states | `bg-gray-100` | `dark:bg-zinc-700` |
+| Input backgrounds | `bg-white` | `dark:bg-zinc-800` |
+| Subtle dividers | `bg-gray-200` | `dark:bg-zinc-700` |
+
+### Text
+
+| Use Case | Light | Dark | Dark Contrast |
+|----------|-------|------|---------------|
+| Primary text | `text-gray-900` | `dark:text-zinc-100` | 16.12:1 ✓ AAA |
+| Secondary text | `text-gray-600` | `dark:text-zinc-300` | 11.99:1 ✓ AAA |
+| Muted/tertiary | `text-gray-500` | `dark:text-zinc-400` | 6.91:1 ✗ AA only |
+| Placeholder | `text-gray-400` | `dark:text-zinc-500` | 3.67:1 ✗ decorative |
+
+### Borders
+
+| Use Case | Light | Dark |
+|----------|-------|------|
+| Default border | `border-gray-200` | `dark:border-zinc-600` |
+| Subtle border | `border-gray-100` | `dark:border-zinc-700` |
+| Strong border | `border-gray-300` | `dark:border-zinc-500` |
+| Focus ring | `ring-cyan-500` | `dark:ring-cyan-400` |
+
+### Accent Colors (Cyan)
+
+**Light cyan needs dark text; dark cyan can use white text.**
+
+Contrast ratios (calculated via WCAG formula):
+
+| Shade | + White | + Gray-900 | Best Text |
+|-------|---------|------------|-----------|
+| cyan-400 (#22d3ee) | 1.81:1 ✗ | 9.82:1 ✓ AAA | dark |
+| cyan-500 (#06b6d4) | 2.43:1 ✗ | 7.31:1 ✓ AAA | dark |
+| cyan-600 (#0891b2) | 3.68:1 ✗ | 4.82:1 ✓ AA | dark |
+| cyan-700 (#0e7490) | 5.36:1 ✓ AA | 3.31:1 ✗ | white |
+| cyan-800 (#155e75) | 7.27:1 ✓ AAA | 2.44:1 ✗ | white |
+
+| Use Case | Classes | Notes |
+|----------|---------|-------|
+| Primary button | `bg-cyan-400 hover:bg-cyan-300 text-gray-900` | Bright, AAA |
+| Selected/active state | `bg-cyan-400 text-gray-900` | Bright, AAA |
+| Inline card/mention ref | `bg-cyan-700 text-white` | Darker, AA |
+| Link text | `text-cyan-600 dark:text-cyan-400` | Text only |
+| Focus ring | `ring-cyan-500 dark:ring-cyan-400` | Decorative |
+| Toggle switch (on) | `bg-cyan-600` | No text label |
+
+### Status/Semantic Colors
+
+Keep these muted in dark mode:
+
+| Status | Light | Dark |
+|--------|-------|------|
+| Success | `text-green-600` / `bg-green-100` | `dark:text-green-400` / `dark:bg-green-900/30` |
+| Warning | `text-amber-600` / `bg-amber-100` | `dark:text-amber-400` / `dark:bg-amber-900/30` |
+| Error | `text-red-600` / `bg-red-100` | `dark:text-red-400` / `dark:bg-red-900/30` |
+| Info | `text-blue-600` / `bg-blue-100` | `dark:text-blue-400` / `dark:bg-blue-900/30` |
+
+### MTG-Specific
+
+Rarity colors stay as-is (established MTG conventions):
+
+```css
+--color-rarity-common: #1a1718;
+--color-rarity-uncommon: #707883;
+--color-rarity-rare: #a58e4a;
+--color-rarity-mythic: #bf4427;
+--color-rarity-timeshifted: #652978;
+```
+
+For generic badges (set codes, format tags), prefer neutral styling:
+- `bg-zinc-100 dark:bg-zinc-800`
+- `border-zinc-200 dark:border-zinc-700`
+- `text-zinc-600 dark:text-zinc-400`
+
+## Component Patterns
+
+### Cards/Panels
+
+```tsx
+<div className="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg p-4">
+  <h3 className="text-gray-900 dark:text-zinc-100 font-medium">Title</h3>
+  <p className="text-gray-600 dark:text-zinc-300 text-sm">Description</p>
+</div>
+```
+
+### Buttons
+
+```tsx
+// Primary (cyan bg needs dark text for contrast)
+<button className="bg-cyan-400 hover:bg-cyan-300 text-gray-900">
+  Action
+</button>
+
+// Secondary
+<button className="bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-gray-900 dark:text-zinc-100">
+  Secondary
+</button>
+
+// Ghost
+<button className="hover:bg-zinc-100 dark:hover:bg-zinc-800 text-gray-600 dark:text-zinc-400">
+  Ghost
+</button>
+```
+
+### Links
+
+```tsx
+<a className="text-cyan-600 dark:text-cyan-400 hover:underline">
+  Link text
+</a>
+```
+
+### Form Inputs
+
+```tsx
+<input className="bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-zinc-100 placeholder:text-gray-400 dark:placeholder:text-zinc-500 focus:ring-2 focus:ring-cyan-500 dark:focus:ring-cyan-400" />
+```
+
+## Checklist for New Components
+
+- [ ] Uses `zinc-*` for dark backgrounds, not `slate-*`
+- [ ] Primary accent is `cyan-*`
+- [ ] Cyan backgrounds use dark text (`text-gray-900`), not white
+- [ ] Primary text uses `zinc-100`, secondary uses `zinc-300` (AAA compliant)
+- [ ] Colored badges only for semantic meaning (rarity, status)
+- [ ] Borders use `zinc-600` for visibility
+- [ ] Focus states use `cyan-*` ring
+
+## Alternative Accent Colors Considered
+
+If cyan doesn't work out, these were researched as alternatives:
+
+| Color | Hex | Best For | Concerns |
+|-------|-----|----------|----------|
+| amber-400 | `#fbbf24` | Buttons, gaming/treasure feel | Can read as warning |
+| amber-500 | `#f59e0b` | More muted gold | Needs dark text |
+| rose-400 | `#fb7185` | Links and buttons both | Could conflict with error red |
+| teal-400 | `#2dd4bf` | Warmer cyan alternative | Still cool-toned |
+
+## References
+
+- [Discord Color Palette](https://www.color-hex.com/color-palette/114089)
+- [Linear UI Redesign](https://linear.app/now/how-we-redesigned-the-linear-ui)
+- [Tailwind Zinc Scale](https://tailwindcss.com/docs/customizing-colors)
+- [Dark Mode Best Practices](https://appinventiv.com/blog/guide-on-designing-dark-mode-for-mobile-app/)
+- [Yellow/Amber Accessibility](https://stephaniewalter.design/blog/yellow-purple-and-the-myth-of-accessibility-limits-color-palettes/)
+- [USWDS Color Tokens](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)

.claude/settings.local.json

···
       "Bash(curl:*)",
       "Bash(npm run build:lexicons:*)",
       "Bash(npm run lexicons:lint:*)",
-      "Bash(npm run lexicons:all:*)"
+      "Bash(npm run lexicons:all:*)",
+      "Bash(goat lex:*)"
     ],
     "deny": [],
     "ask": []

CLAUDE.md

···
 
 **Dark Mode Support:**
 - All components and pages must support both light and dark mode
-- Use Tailwind's `dark:` variant for dark mode styles (e.g., `bg-white dark:bg-slate-900`)
 - Theme is managed by `ThemeProvider` in `src/lib/useTheme.tsx`
 - Dark mode configuration: `@custom-variant dark (&:where(.dark, .dark *))` in `src/styles.css`
-- Common patterns:
-  - Backgrounds: `bg-white dark:bg-slate-900` (page), `bg-gray-100 dark:bg-slate-800` (panels)
-  - Primary text: `text-gray-900 dark:text-white`
-  - Secondary text: `text-gray-600 dark:text-gray-400`
-  - Borders: `border-gray-300 dark:border-slate-700`
-  - Interactive elements: `hover:bg-gray-100 dark:hover:bg-gray-800`
+- **See `.claude/DARK_MODE.md` for the full style guide**
+- Key patterns:
+  - Backgrounds: `bg-white dark:bg-zinc-900` (page), `bg-gray-50 dark:bg-zinc-800` (panels)
+  - Primary text: `text-gray-900 dark:text-zinc-100`
+  - Secondary text: `text-gray-600 dark:text-zinc-300` (AAA contrast)
+  - Borders: `border-gray-200 dark:border-zinc-600` (visible)
+  - Accent color: `cyan-*` (e.g., `text-cyan-600 dark:text-cyan-400`)
+  - Focus rings: `focus:ring-cyan-500 dark:focus:ring-cyan-400`
+- **DO NOT use**: `slate-*` for dark mode (it's blue-tinted)
 
 **Reduced Motion Support:**
 - Respect `prefers-reduced-motion` for decorative and dramatic animations

package.json

···
     "lexicons:status": "goat lex status",
     "lexicons:diff": "goat lex diff",
     "lexicons:check-dns": "goat lex check-dns --did did:web:deckbelcher.com",
-    "lexicons:publish": "goat lex publish --username deckbelcher.com",
+    "lexicons:prepublish": "npm run lexicons:breaking && npm run lexicons:diff && npm run lexicons:status",
+    "lexicons:publish": "npm run lexicons:prepublish && goat lex publish --username deckbelcher.com",
     "lexicons:codegen": "lex-cli generate -c ./lex.config.js",
     "lexicons:scopes": "node --experimental-strip-types scripts/generate-oauth-scopes.ts",
     "lexicons:all": "npm run lexicons:compile && npm run lexicons:lint && npm run lexicons:breaking && npm run lexicons:codegen && npm run lexicons:scopes",

src/components/ActivityFeed.tsx

···
 
 	if (error || !records) {
 		return (
-			<div className="text-center py-8 text-gray-500 dark:text-gray-400">
+			<div className="text-center py-8 text-gray-500 dark:text-zinc-300">
 				Unable to load recent activity
 			</div>
 		);
···
 
 	if (records.length === 0) {
 		return (
-			<div className="text-center py-8 text-gray-500 dark:text-gray-400">
+			<div className="text-center py-8 text-gray-500 dark:text-zinc-300">
 				No recent activity yet
 			</div>
 		);
···
 				<div
 					// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton
 					key={i}
-					className="flex gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg animate-pulse"
+					className="flex gap-4 p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg animate-pulse"
 				>
-					<div className="flex-shrink-0 w-16 h-[90px] bg-gray-200 dark:bg-slate-700 rounded" />
+					<div className="flex-shrink-0 w-16 h-[90px] bg-gray-200 dark:bg-zinc-700 rounded" />
 					<div className="flex-1 min-w-0">
 						{/* Handle */}
-						<div className="h-5 w-24 bg-gray-200 dark:bg-slate-700 rounded mb-1" />
+						<div className="h-5 w-24 bg-gray-200 dark:bg-zinc-700 rounded mb-1" />
 						{/* Name */}
-						<div className="h-7 w-40 bg-gray-200 dark:bg-slate-700 rounded" />
+						<div className="h-7 w-40 bg-gray-200 dark:bg-zinc-700 rounded" />
 						{/* Format */}
-						<div className="h-5 w-20 bg-gray-200 dark:bg-slate-700 rounded mt-1" />
+						<div className="h-5 w-20 bg-gray-200 dark:bg-zinc-700 rounded mt-1" />
 						{/* Date */}
-						<div className="h-5 w-28 bg-gray-200 dark:bg-slate-700 rounded mt-2" />
+						<div className="h-5 w-28 bg-gray-200 dark:bg-zinc-700 rounded mt-2" />
 					</div>
 				</div>
 			))}

src/components/CardImage.tsx

···
 			<img
 				src={getImageUri(card.id, size, face)}
 				alt={card.name}
-				className={`${baseClassName} bg-gray-200 dark:bg-slate-700`}
+				className={`${baseClassName} bg-gray-200 dark:bg-zinc-700`}
 				style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 				loading="lazy"
 			/>
···
 					<img
 						src={getImageUri(card.id, size, "front")}
 						alt={card.name}
-						className={`${baseClassName} bg-gray-200 dark:bg-slate-700`}
+						className={`${baseClassName} bg-gray-200 dark:bg-zinc-700`}
 						loading="lazy"
 						style={{
 							backfaceVisibility: "hidden",
···
 					<img
 						src={getImageUri(card.id, size, "back")}
 						alt={`${card.name} (back)`}
-						className={`${baseClassName} bg-gray-200 dark:bg-slate-700 absolute inset-0`}
+						className={`${baseClassName} bg-gray-200 dark:bg-zinc-700 absolute inset-0`}
 						loading="lazy"
 						style={{
 							backfaceVisibility: "hidden",
···
 				<img
 					src={getImageUri(card.id, size, face)}
 					alt={card.name}
-					className={`${baseClassName} bg-gray-200 dark:bg-slate-700 motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-in-out`}
+					className={`${baseClassName} bg-gray-200 dark:bg-zinc-700 motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-in-out`}
 					loading="lazy"
 					style={{
 						backgroundImage: PLACEHOLDER_STRIPES,
···
 export function CardSkeleton() {
 	return (
 		<div
-			className="aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-slate-700 animate-pulse"
+			className="aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 animate-pulse"
 			style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 		/>
 	);
···
 						{card.name}
 					</p>
 					{card.set_name && (
-						<p className="text-gray-200 dark:text-gray-300 text-xs mt-1">
+						<p className="text-gray-200 dark:text-zinc-300 text-xs mt-1">
 							{card.set_name}
 						</p>
 					)}

src/components/ClientDate.tsx

···
 		return (
 			<span className={className}>
 				<span
-					className="inline-block align-middle bg-gray-200 dark:bg-slate-700 rounded animate-pulse"
+					className="inline-block align-middle bg-gray-200 dark:bg-zinc-700 rounded animate-pulse"
 					style={{ width: "5.5em", height: "0.75em" }}
 				/>
 			</span>

src/components/DeckPreview.tsx

···
 		<Link
 			to="/profile/$did/deck/$rkey"
 			params={{ did, rkey: asRkey(rkey) }}
-			className="group flex items-start gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
+			className="group flex items-start gap-4 p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
 		>
 			<CardSpread cardIds={previewCardIds} />
 
 			<div className="flex-1 min-w-0">
 				{showHandle &&
 					(handle ? (
-						<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+						<p className="text-sm text-gray-600 dark:text-zinc-300 truncate">
 							@{handle}
 						</p>
 					) : (
-						<div className="h-5 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse" />
+						<div className="h-5 w-24 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse" />
 					))}
 
 				<h2 className="text-lg font-bold text-gray-900 dark:text-white truncate font-display">
 					{deck.name}
 				</h2>
 				{deck.format && (
-					<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+					<p className="text-sm text-gray-600 dark:text-zinc-300 truncate">
 						{formatDisplayName(deck.format)}
 					</p>
 				)}
 				{sectionString && (
-					<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+					<p className="text-sm text-gray-600 dark:text-zinc-300 truncate">
 						{sectionString}
 					</p>
 				)}
-				<p className="text-sm text-gray-500 dark:text-gray-500">
+				<p className="text-sm text-gray-500 dark:text-zinc-400">
 					Updated <ClientDate dateString={dateString} />
 				</p>
 			</div>

src/components/Header.tsx

···
 
 	return (
 		<>
-			<header className="p-2 sm:p-4 flex items-center bg-gray-800 dark:bg-gray-900 text-white shadow-lg">
+			<header className="p-2 sm:p-4 flex items-center bg-zinc-800 dark:bg-zinc-950 text-white shadow-lg">
 				<div className="flex items-center">
 					<button
 						type="button"
 						onClick={() => setIsOpen(true)}
-						className="p-2 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition-colors"
+						className="p-2 hover:bg-zinc-700 dark:hover:bg-zinc-800 rounded-lg transition-colors"
 						aria-label="Open menu"
 					>
 						<Menu size={24} />
···
 					<Link
 						to="/cards"
 						search={{ q: "", sort: undefined, sort2: undefined }}
-						className="flex items-center gap-2 px-3 sm:px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors text-white text-sm font-medium"
+						className="flex items-center gap-2 px-3 sm:px-4 py-2 bg-cyan-400 hover:bg-cyan-300 rounded-lg transition-colors text-gray-900 text-sm font-medium"
 					>
 						<Search size={18} />
 						<span className="hidden sm:inline">Search Cards</span>
···
 
 				<div className="flex items-center gap-2">
 					{isLoading ? (
-						<div className="flex items-center gap-2 px-3 py-2 bg-gray-700 dark:bg-gray-800 rounded-lg animate-pulse">
+						<div className="flex items-center gap-2 px-3 py-2 bg-zinc-700 dark:bg-zinc-800 rounded-lg animate-pulse">
 							<LogIn size={16} className="invisible" />
 							<span className="text-sm font-medium invisible">Sign In</span>
 						</div>
···
 						<Link
 							to="/signin"
 							onClick={handleSignInClick}
-							className="flex items-center gap-2 px-2 sm:px-3 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors"
+							className="flex items-center gap-2 px-2 sm:px-3 py-2 bg-cyan-400 hover:bg-cyan-300 text-gray-900 rounded-lg transition-colors"
 						>
 							<LogIn size={16} />
 							<span className="text-sm font-medium hidden sm:inline">
···
 					<button
 						type="button"
 						onClick={toggleTheme}
-						className="p-2 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition-colors"
+						className="p-2 hover:bg-zinc-700 dark:hover:bg-zinc-800 rounded-lg transition-colors"
 						aria-label="Toggle theme"
 					>
 						{theme === "dark" ? (
···
 			)}
 
 			<aside
-				className={`fixed top-0 left-0 h-full w-80 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
+				className={`fixed top-0 left-0 h-full w-80 bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100 shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
 					isOpen ? "translate-x-0" : "-translate-x-full"
 				}`}
 			>
-				<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+				<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-zinc-600">
 					<h2 className="text-xl font-bold">Navigation</h2>
 					<button
 						type="button"
 						onClick={() => setIsOpen(false)}
-						className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+						className="p-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
 						aria-label="Close menu"
 					>
 						<X size={24} />
···
 						onClick={() => setIsOpen(false)}
 						className="flex items-center gap-3 p-3 rounded-lg transition-colors mb-2"
 						inactiveProps={{
-							className: "hover:bg-gray-100 dark:hover:bg-gray-800",
+							className: "hover:bg-gray-100 dark:hover:bg-zinc-800",
 						}}
 						activeProps={{
-							className: "bg-cyan-600 hover:bg-cyan-700 text-white",
+							className: "bg-cyan-700 hover:bg-cyan-600 text-white",
 						}}
 					>
 						<Home size={20} />
···
 						onClick={() => setIsOpen(false)}
 						className="flex items-center gap-3 p-3 rounded-lg transition-colors mb-2"
 						inactiveProps={{
-							className: "hover:bg-gray-100 dark:hover:bg-gray-800",
+							className: "hover:bg-gray-100 dark:hover:bg-zinc-800",
 						}}
 						activeProps={{
-							className: "bg-cyan-600 hover:bg-cyan-700 text-white",
+							className: "bg-cyan-700 hover:bg-cyan-600 text-white",
 						}}
 					>
 						<Library size={20} />

src/components/HighlightedSearchInput.tsx

···
 
 	return (
 		<div
-			className={`relative flex items-center rounded-lg border transition-colors bg-gray-100 dark:bg-slate-800 ${
+			className={`relative flex items-center rounded-lg border transition-colors bg-gray-100 dark:bg-zinc-800 ${
 				hasError
 					? "border-red-500"
-					: "border-gray-300 dark:border-slate-700 focus-within:border-cyan-500"
+					: "border-gray-300 dark:border-zinc-600 focus-within:border-cyan-500"
 			} ${className}`}
 		>
 			{/* Search icon - fixed, doesn't scroll */}

src/components/ListPreview.tsx

···
 		<Link
 			to="/profile/$did/list/$rkey"
 			params={{ did, rkey: asRkey(rkey) }}
-			className="group flex items-start gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
+			className="group flex items-start gap-4 p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
 		>
 			<CardSpread cardIds={cardIds} />
 
 			<div className="flex-1 min-w-0">
 				{showHandle &&
 					(handle ? (
-						<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+						<p className="text-sm text-gray-600 dark:text-zinc-300 truncate">
 							@{handle}
 						</p>
 					) : (
-						<div className="h-5 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse" />
+						<div className="h-5 w-24 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse" />
 					))}
 
 				<h2 className="text-lg font-bold text-gray-900 dark:text-white truncate font-display">
 					{list.name}
 				</h2>
-				<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+				<p className="text-sm text-gray-600 dark:text-zinc-300 truncate">
 					{itemSummary}
 				</p>
-				<p className="text-sm text-gray-500 dark:text-gray-500">
+				<p className="text-sm text-gray-500 dark:text-zinc-400">
 					Updated <ClientDate dateString={dateString} />
 				</p>
 			</div>

src/components/RouteErrorComponent.tsx

···
 	};
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900 flex items-center justify-center p-6">
+		<div className="min-h-screen bg-white dark:bg-zinc-900 flex items-center justify-center p-6">
 			<div className="max-w-4xl w-full">
 				<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
 					<div className="flex items-start gap-4">
···
 								<button
 									type="button"
 									onClick={copyErrorDetails}
-									className="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
+									className="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600 text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
 								>
 									{copied ? (
 										<Check className="w-4 h-4" />
···
 								</button>
 								<Link
 									to="/"
-									className="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
+									className="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600 text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
 								>
 									<Home className="w-4 h-4" />
 									Go home

src/components/SearchPrimer.tsx

···
 
 function Code({ children }: { children: React.ReactNode }) {
 	return (
-		<code className="font-mono text-sm bg-gray-200 dark:bg-slate-700 px-1.5 py-0.5 rounded text-gray-800 dark:text-gray-200">
+		<code className="font-mono text-sm bg-gray-200 dark:bg-zinc-700 px-1.5 py-0.5 rounded text-gray-800 dark:text-zinc-200">
 			{children}
 		</code>
 	);
···
 		<Link
 			to="/cards"
 			search={{ q, sort: undefined, sort2: undefined }}
-			className="font-mono text-sm bg-gray-200 dark:bg-slate-700 px-1.5 py-0.5 rounded text-cyan-700 dark:text-cyan-300 hover:bg-cyan-100 dark:hover:bg-cyan-900/50 transition-colors"
+			className="font-mono text-sm bg-gray-200 dark:bg-zinc-700 px-1.5 py-0.5 rounded text-cyan-700 dark:text-cyan-300 hover:bg-cyan-100 dark:hover:bg-cyan-900/50 transition-colors"
 		>
 			{q}
 		</Link>
···
 }) {
 	return (
 		<div
-			className={`bg-gray-50 dark:bg-slate-800/50 border border-gray-200 dark:border-slate-700 rounded-lg p-4 ${className}`}
+			className={`bg-gray-50 dark:bg-zinc-800/50 border border-gray-200 dark:border-zinc-600 rounded-lg p-4 ${className}`}
 		>
 			<h3 className="font-semibold text-gray-900 dark:text-white mb-2">
 				{title}
···
 }) {
 	return (
 		<div
-			className={`bg-gray-50/50 dark:bg-slate-800/30 border border-gray-200/50 dark:border-slate-700/50 rounded-lg p-3 ${className}`}
+			className={`bg-gray-50/50 dark:bg-zinc-800/30 border border-gray-200/50 dark:border-zinc-600/50 rounded-lg p-3 ${className}`}
 		>
-			<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+			<h4 className="text-sm font-medium text-gray-500 dark:text-zinc-300 mb-2">
 				{title}
 			</h4>
 			{children}
···
 	return (
 		<div className="space-y-4">
 			{/* Intro blurb */}
-			<div className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+			<div className="text-sm text-gray-600 dark:text-zinc-300 space-y-1">
 				<p>
 					Type anything to search by name—we'll find close matches even with
 					typos.
···
 			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 				{/* Fields with examples */}
 				<MainCard title="Filter by...">
-					<ul className="space-y-1 text-sm text-gray-600 dark:text-gray-300">
+					<ul className="space-y-1 text-sm text-gray-600 dark:text-zinc-300">
 						<li>
 							<Q q="t:vampire" /> type
 						</li>
···
 
 				{/* Operators */}
 				<MainCard title="Comparisons">
-					<ul className="space-y-1 text-sm text-gray-600 dark:text-gray-300">
+					<ul className="space-y-1 text-sm text-gray-600 dark:text-zinc-300">
 						<li>
 							<Q q="manavalue<3" /> less than
 						</li>
···
 
 				{/* Colors - clearer framing */}
 				<MainCard title="Colors" className="sm:row-span-2 lg:row-span-1">
-					<div className="space-y-3 text-sm text-gray-600 dark:text-gray-300">
+					<div className="space-y-3 text-sm text-gray-600 dark:text-zinc-300">
 						{/* Color codes */}
 						<div className="flex flex-wrap gap-x-3 gap-y-1">
 							<span>
···
 
 						{/* Card's colors */}
 						<div>
-							<p className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide mb-1">
+							<p className="text-gray-500 dark:text-zinc-300 text-xs uppercase tracking-wide mb-1">
 								Card's colors
 							</p>
 							<p>
···
 
 						{/* Color identity for commander */}
 						<div>
-							<p className="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide mb-1">
+							<p className="text-gray-500 dark:text-zinc-300 text-xs uppercase tracking-wide mb-1">
 								For commander decks
 							</p>
 							<p>
···
 
 				{/* Combining */}
 				<MainCard title="Combining Filters">
-					<ul className="space-y-1 text-sm text-gray-600 dark:text-gray-300">
+					<ul className="space-y-1 text-sm text-gray-600 dark:text-zinc-300">
 						<li>
 							<Q q="t:goblin r:rare" /> both (AND)
 						</li>

src/components/SetSymbol.tsx

···
 };
 
 const RARITY_CLASSES: Record<string, string> = {
-	common: "text-rarity-common dark:text-gray-400",
+	common: "text-rarity-common dark:text-zinc-300",
 	uncommon: "text-rarity-uncommon",
 	rare: "text-rarity-rare",
 	mythic: "text-rarity-mythic",

src/components/UserMenu.tsx

···
 			<button
 				type="button"
 				onClick={() => setIsOpen(!isOpen)}
-				className="flex items-center gap-2 px-3 py-2 bg-gray-700 dark:bg-gray-800 rounded-lg hover:bg-gray-600 dark:hover:bg-gray-700 transition-colors"
+				className="flex items-center gap-2 px-3 py-2 bg-gray-700 dark:bg-zinc-800 rounded-lg hover:bg-gray-600 dark:hover:bg-zinc-700 transition-colors"
 				aria-label="User menu"
 				aria-expanded={isOpen}
 			>
···
 			</button>
 
 			{isOpen && (
-				<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden z-50">
+				<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg overflow-hidden z-50">
 					<Link
 						to="/profile/$did"
 						params={{ did: session.info.sub }}
 						onClick={() => setIsOpen(false)}
-						className="w-full flex items-center gap-2 px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
+						className="w-full flex items-center gap-2 px-4 py-3 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors text-gray-900 dark:text-white text-sm"
 					>
 						<User size={16} />
 						<span>View Profile</span>
···
 							signOut();
 							setIsOpen(false);
 						}}
-						className="w-full flex items-center gap-2 px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
+						className="w-full flex items-center gap-2 px-4 py-3 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors text-gray-900 dark:text-white text-sm"
 					>
 						<LogOut size={16} />
 						<span>Sign Out</span>

src/components/comments/CommentForm.tsx

···
 			/>
 			<div className="flex items-center justify-end gap-2">
 				{isPending && (
-					<span className="text-sm text-gray-500 dark:text-gray-400">
+					<span className="text-sm text-gray-500 dark:text-zinc-300">
 						Saving...
 					</span>
 				)}
 				{!isPending && isEditMode && isDirty && (
-					<span className="text-sm text-gray-500 dark:text-gray-400">
+					<span className="text-sm text-gray-500 dark:text-zinc-300">
 						Unsaved changes
 					</span>
 				)}
···
 						type="button"
 						onClick={onCancel}
 						disabled={isPending}
-						className="px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-700 dark:text-gray-300 disabled:opacity-50"
+						className="px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-300 disabled:opacity-50"
 					>
 						Cancel
 					</button>
···
 					disabled={!hasContent || isPending}
 					className={`px-3 py-1.5 text-sm font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed ${
 						isEditMode
-							? "bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-700 dark:text-gray-300"
+							? "bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-300"
 							: "bg-blue-600 hover:bg-blue-700 text-white"
 					}`}
 				>

src/components/comments/CommentItem.tsx

···
 
 	if (isError || !record) {
 		return (
-			<div className="py-3 text-sm text-gray-400 dark:text-gray-500 italic">
+			<div className="py-3 text-sm text-gray-400 dark:text-zinc-400 italic">
 				[Failed to load {type}]
 			</div>
 		);
···
 						<Link
 							to="/profile/$did"
 							params={{ did }}
-							className="font-medium text-gray-900 dark:text-gray-100 hover:underline"
+							className="font-medium text-gray-900 dark:text-zinc-100 hover:underline"
 						>
 							@{handle ?? did.slice(0, 16)}
 						</Link>
-						<span className="text-gray-400 dark:text-gray-500">·</span>
+						<span className="text-gray-400 dark:text-zinc-400">·</span>
 						<ClientDate
 							dateString={record.createdAt}
 							format="relative"
-							className="text-gray-500 dark:text-gray-400"
+							className="text-gray-500 dark:text-zinc-300"
 						/>
 						{record.updatedAt && record.updatedAt !== record.createdAt && (
-							<span className="text-gray-400 dark:text-gray-500 text-xs">
+							<span className="text-gray-400 dark:text-zinc-400 text-xs">
 								(edited)
 							</span>
 						)}
 					</div>
 
-					<div className="mt-1 text-gray-800 dark:text-gray-200">
+					<div className="mt-1 text-gray-800 dark:text-zinc-200">
 						<RichtextRenderer doc={record.content} />
 					</div>
 
···
 							<button
 								type="button"
 								onClick={() => setShowReplyForm(!showReplyForm)}
-								className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+								className="flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-300 hover:text-gray-700 dark:hover:text-zinc-200"
 							>
 								<MessageSquare className="w-4 h-4" />
 								{replyCount > 0 && <span>{replyCount}</span>}
 							</button>
 						) : (
 							replyCount > 0 && (
-								<span className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
+								<span className="flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-300">
 									<MessageSquare className="w-4 h-4" />
 									<span>{replyCount}</span>
 								</span>
···
 										deleteCommentMutation.isPending ||
 										deleteReplyMutation.isPending
 									}
-									className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
+									className="flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-300 hover:text-red-600 dark:hover:text-red-400"
 								>
 									<Trash2 className="w-4 h-4" />
 								</button>
···
 			<div className="flex items-start gap-3">
 				<div className="flex-1">
 					<div className="flex items-center gap-2">
-						<div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded motion-safe:animate-pulse" />
-						<div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded motion-safe:animate-pulse" />
+						<div className="h-4 w-24 bg-gray-200 dark:bg-zinc-700 rounded motion-safe:animate-pulse" />
+						<div className="h-4 w-16 bg-gray-200 dark:bg-zinc-700 rounded motion-safe:animate-pulse" />
 					</div>
 					<div className="mt-2 space-y-2">
-						<div className="h-4 w-full bg-gray-200 dark:bg-slate-700 rounded motion-safe:animate-pulse" />
-						<div className="h-4 w-3/4 bg-gray-200 dark:bg-slate-700 rounded motion-safe:animate-pulse" />
+						<div className="h-4 w-full bg-gray-200 dark:bg-zinc-700 rounded motion-safe:animate-pulse" />
+						<div className="h-4 w-3/4 bg-gray-200 dark:bg-zinc-700 rounded motion-safe:animate-pulse" />
 					</div>
 				</div>
 			</div>

src/components/comments/CommentThread.tsx

···
 	return (
 		<div
 			className={
-				depth > 0 ? "pl-4 border-l border-gray-200 dark:border-slate-700" : ""
+				depth > 0 ? "pl-4 border-l border-gray-200 dark:border-zinc-600" : ""
 			}
 		>
 			<CommentItem

src/components/comments/CommentsPanel.tsx

···
 	);
 
 	return (
-		<div className={`flex flex-col ${maxHeight} bg-white dark:bg-slate-900`}>
-			<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-slate-700">
+		<div className={`flex flex-col ${maxHeight} bg-white dark:bg-zinc-900`}>
+			<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-600">
 				<div className="flex items-center gap-2">
-					<MessageSquare className="w-5 h-5 text-gray-600 dark:text-gray-400" />
-					<h2 className="font-semibold text-gray-900 dark:text-gray-100">
+					<MessageSquare className="w-5 h-5 text-gray-600 dark:text-zinc-300" />
+					<h2 className="font-semibold text-gray-900 dark:text-zinc-100">
 						{title}
 					</h2>
 					{count > 0 && (
-						<span className="text-sm text-gray-500 dark:text-gray-400">
+						<span className="text-sm text-gray-500 dark:text-zinc-300">
 							({count})
 						</span>
 					)}
···
 					<button
 						type="button"
 						onClick={onClose}
-						className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-slate-800 text-gray-500 dark:text-gray-400"
+						className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 dark:text-zinc-300"
 					>
 						<X className="w-5 h-5" />
 					</button>
···
 
 			<div className="flex-1 overflow-y-auto px-4">
 				{commentsQuery.isLoading && (
-					<div className="py-8 text-center text-gray-500 dark:text-gray-400">
+					<div className="py-8 text-center text-gray-500 dark:text-zinc-300">
 						Loading comments...
 					</div>
 				)}
 
 				{!commentsQuery.isLoading && comments.length === 0 && (
-					<div className="py-8 text-center text-gray-500 dark:text-gray-400">
+					<div className="py-8 text-center text-gray-500 dark:text-zinc-300">
 						No comments yet. Be the first to comment!
 					</div>
 				)}
 
 				{comments.length > 0 && (
-					<div className="divide-y divide-gray-100 dark:divide-slate-800">
+					<div className="divide-y divide-gray-100 dark:divide-zinc-800">
 						{comments.map((comment) => (
 							<CommentThread
 								key={`${comment.did}/${comment.rkey}`}
···
 			</div>
 
 			{session && (
-				<div className="border-t border-gray-200 dark:border-slate-700 px-4 py-2">
+				<div className="border-t border-gray-200 dark:border-zinc-600 px-4 py-2">
 					{showForm ? (
 						<CommentForm
 							onSubmit={handleSubmit}
···
 						<button
 							type="button"
 							onClick={() => setShowForm(true)}
-							className="w-full text-left px-3 py-2 text-sm text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-slate-800 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+							className="w-full text-left px-3 py-2 text-sm text-gray-500 dark:text-zinc-300 bg-gray-50 dark:bg-zinc-800 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-700"
 						>
 							Write a comment...
 						</button>
···
 			)}
 
 			{!session && (
-				<div className="border-t border-gray-200 dark:border-slate-700 px-4 py-3 text-center text-sm text-gray-500 dark:text-gray-400">
+				<div className="border-t border-gray-200 dark:border-zinc-600 px-4 py-3 text-center text-sm text-gray-500 dark:text-zinc-300">
 					Sign in to comment
 				</div>
 			)}

src/components/deck/BulkEditPreview.tsx

···
 
 export function BulkEditPreview({ lines }: BulkEditPreviewProps) {
 	return (
-		<div className="flex-1 p-4 border-l border-gray-200 dark:border-slate-700">
+		<div className="flex-1 p-4 border-l border-gray-200 dark:border-zinc-600">
 			{lines.map((line) => (
 				<PreviewRow key={line.lineKey} line={line} />
 			))}
···
 		case "pending":
 			return (
 				<div className={ROW_CLASS}>
-					<span className="text-gray-400 dark:text-gray-500 italic truncate">
+					<span className="text-gray-400 dark:text-zinc-400 italic truncate">
 						{line.name}...
 					</span>
 				</div>
···
 		? "bg-amber-50 dark:bg-amber-900/40 hover:bg-amber-100 dark:hover:bg-amber-900/50"
 		: line.isNew
 			? "bg-green-50 dark:bg-green-900/40 hover:bg-green-100 dark:hover:bg-green-900/50"
-			: "hover:bg-gray-100 dark:hover:bg-slate-800";
+			: "hover:bg-gray-100 dark:hover:bg-zinc-800";
 
 	return (
 		<div
 			className={`${ROW_CLASS} flex items-center gap-2 cursor-default rounded px-1 -mx-1 ${bgClass}`}
 			{...hoverProps}
 		>
-			<span className="text-gray-600 dark:text-gray-400 text-xs w-4 text-right flex-shrink-0">
+			<span className="text-gray-600 dark:text-zinc-300 text-xs w-4 text-right flex-shrink-0">
 				{line.quantity}
 			</span>
 			<span className="text-gray-900 dark:text-white truncate flex-1 min-w-0">

src/components/deck/CardDragOverlay.tsx

···
 	return (
 		<DragOverlay>
 			{draggedCardId && cardData ? (
-				<div className="bg-gray-100 dark:bg-slate-800 rounded px-2 py-1 shadow-lg opacity-90 cursor-grabbing">
+				<div className="bg-gray-100 dark:bg-zinc-800 rounded px-2 py-1 shadow-lg opacity-90 cursor-grabbing">
 					<div className="flex items-center gap-2">
 						<span className="text-gray-900 dark:text-white text-sm font-medium">
 							{cardData.name}

src/components/deck/CardModal.tsx

···
 					role="dialog"
 					aria-modal="true"
 					aria-labelledby={titleId}
-					className="bg-white dark:bg-slate-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-slate-700"
+					className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600"
 				>
 					{/* Header */}
-					<div className="flex items-start justify-between p-6 border-b border-gray-200 dark:border-slate-800">
+					<div className="flex items-start justify-between p-6 border-b border-gray-200 dark:border-zinc-700">
 						<div className="flex-1 min-w-0">
 							{primaryFace ? (
 								<>
···
 										)}
 									</div>
 									{primaryFace.type_line && (
-										<div className="text-sm text-gray-600 dark:text-gray-400">
+										<div className="text-sm text-gray-600 dark:text-zinc-300">
 											{primaryFace.type_line}
 										</div>
 									)}
···
 							type="button"
 							onClick={onClose}
 							aria-label="Close"
-							className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors ml-4"
+							className="text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300 transition-colors ml-4"
 						>
 							<X className="w-6 h-6" />
 						</button>
···
 
 						{/* Quantity */}
 						<div>
-							<div className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+							<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
 								Quantity
 							</div>
 							<div className="flex items-center gap-3">
···
 									type="button"
 									onClick={() => handleQuantityChange(quantity - 1)}
 									disabled={readOnly || quantity <= 1}
-									className="p-2 rounded-lg bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+									className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
 								>
-									<Minus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+									<Minus className="w-4 h-4 text-gray-700 dark:text-zinc-300" />
 								</button>
 								<input
 									type="number"
···
 										)
 									}
 									disabled={readOnly}
-									className="w-20 px-3 py-2 text-center bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
+									className="w-20 px-3 py-2 text-center bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
 								/>
 								<button
 									type="button"
 									onClick={() => handleQuantityChange(quantity + 1)}
 									disabled={readOnly}
-									className="p-2 rounded-lg bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+									className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
 								>
-									<Plus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+									<Plus className="w-4 h-4 text-gray-700 dark:text-zinc-300" />
 								</button>
 							</div>
 						</div>
 
 						{/* Section */}
 						<div>
-							<div className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+							<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
 								Section
 							</div>
 							<select
 								value={card.section}
 								onChange={(e) => onMoveToSection(e.target.value as Section)}
 								disabled={readOnly}
-								className="w-full px-4 py-2 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
+								className="w-full px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
 							>
 								<option value="commander">Commander</option>
 								<option value="mainboard">Mainboard</option>
···
 
 						{/* Tags */}
 						<div>
-							<div className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+							<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
 								Tags
 							</div>
 							<div className="mb-2">
···
 					</div>
 
 					{/* Footer */}
-					<div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-slate-800">
+					<div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-zinc-700">
 						<button
 							type="button"
 							onClick={handleDelete}
···
 						<button
 							type="button"
 							onClick={onClose}
-							className="px-6 py-2 bg-gray-200 dark:bg-slate-800 hover:bg-gray-300 dark:hover:bg-slate-700 text-gray-900 dark:text-white rounded-lg transition-colors"
+							className="px-6 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors"
 						>
 							Close
 						</button>

src/components/deck/CardSearchAutocomplete.tsx

···
 				<div className="flex items-center gap-2 flex-shrink-0">
 					<label
 						htmlFor={toggleId}
-						className="text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap"
+						className="text-sm text-gray-700 dark:text-zinc-300 whitespace-nowrap"
 					>
 						Legal only
 					</label>
···
 						onClick={() => setLegalityFilterEnabled(!legalityFilterEnabled)}
 						className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
 							legalityFilterEnabled
-								? "bg-blue-500 dark:bg-blue-600"
-								: "bg-gray-300 dark:bg-gray-600"
+								? "bg-cyan-600"
+								: "bg-gray-300 dark:bg-zinc-600"
 						}`}
 					>
 						<span
···
 						}
 					}}
 					placeholder="Search for a card..."
-					className="w-full px-4 py-2 pr-10 bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+					className="w-full px-4 py-2 pr-10 bg-white dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-cyan-400"
 				/>
 
 				{isFetching && debouncedSearch.trim().length > 0 && (
 					<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
-						<div className="w-5 h-5 border-2 border-gray-300 dark:border-slate-600 border-t-blue-500 dark:border-t-blue-400 rounded-full animate-spin" />
+						<div className="w-5 h-5 border-2 border-gray-300 dark:border-zinc-600 border-t-cyan-500 dark:border-t-cyan-400 rounded-full animate-spin" />
 					</div>
 				)}
 
···
 						ref={dropdownRef}
 						onMouseLeave={handleMouseLeaveDropdown}
 						role="listbox"
-						className="absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-700 rounded-lg shadow-lg max-h-96 overflow-y-auto top-full"
+						className="absolute z-50 w-full mt-1 bg-white dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg max-h-96 overflow-y-auto top-full"
 					>
 						{hasResults ? (
 							<div className="py-1">
···
 											onClick={() => handleCardSelect(card)}
 											className={`w-full px-3 py-1.5 text-left cursor-pointer transition-colors ${
 												index === selectedIndex
-													? "bg-blue-100 dark:bg-blue-900/30"
-													: "hover:bg-gray-100 dark:hover:bg-slate-800"
+													? "bg-cyan-100 dark:bg-cyan-900/50"
+													: "hover:bg-gray-100 dark:hover:bg-zinc-800"
 											}`}
 										>
 											<div className="flex items-center justify-between gap-2">
···
 								})}
 							</div>
 						) : (
-							<div className="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+							<div className="px-4 py-8 text-center text-gray-500 dark:text-zinc-300">
 								No results found
 							</div>
 						)}

src/components/deck/CommonTagsOverlay.tsx

···
 			)}
 
 			{/* Background */}
-			<div className="absolute inset-0 bg-white/90 dark:bg-slate-800/90 rounded" />
+			<div className="absolute inset-0 bg-white/90 dark:bg-zinc-800/90 rounded" />
 
 			{/* Content */}
 			<div className="relative flex items-center justify-between gap-2">
 				<span className="truncate text-gray-900 dark:text-white">
 					{tag.tagName}
 				</span>
-				<span className="text-xs opacity-70 flex-shrink-0 text-gray-600 dark:text-gray-400">
+				<span className="text-xs opacity-70 flex-shrink-0 text-gray-600 dark:text-zinc-300">
 					{tag.count}
 				</span>
 			</div>

src/components/deck/DeckActionsMenu.tsx

···
 			<button
 				type="button"
 				onClick={() => setIsOpen(!isOpen)}
-				className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+				className="p-2 text-gray-600 dark:text-zinc-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
 				aria-label="Deck actions"
 				aria-expanded={isOpen}
 			>
···
 			</button>
 
 			{isOpen && (
-				<div className="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden z-50">
+				<div className="absolute left-0 mt-2 w-48 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg overflow-hidden z-50">
 					<Link
 						to="/profile/$did/deck/$rkey/play"
 						params={{ did, rkey }}
-						className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm flex items-center gap-2"
+						className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors text-gray-900 dark:text-white text-sm flex items-center gap-2"
 						onClick={() => setIsOpen(false)}
 					>
 						<Play size={14} />
···
 					<Link
 						to="/profile/$did/deck/$rkey/export"
 						params={{ did, rkey }}
-						className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm flex items-center gap-2"
+						className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors text-gray-900 dark:text-white text-sm flex items-center gap-2"
 						onClick={() => setIsOpen(false)}
 					>
 						<Download size={14} />
···
 					</Link>
 					{!readOnly && (
 						<>
-							<div className="border-t border-gray-200 dark:border-gray-700" />
+							<div className="border-t border-gray-200 dark:border-zinc-600" />
 							<button
 								type="button"
 								onClick={handleSetAllToCheapest}
-								className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
+								className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors text-gray-900 dark:text-white text-sm"
 							>
 								Set all to cheapest
 							</button>
 							<button
 								type="button"
 								onClick={handleSetAllToBest}
-								className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
+								className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors text-gray-900 dark:text-white text-sm"
 							>
 								Set all to best
 							</button>
-							<div className="border-t border-gray-200 dark:border-gray-700" />
+							<div className="border-t border-gray-200 dark:border-zinc-600" />
 							<button
 								type="button"
 								onClick={() => {

src/components/deck/DeckHeader.tsx

···
 					value={format || ""}
 					onChange={(e) => onFormatChange(e.target.value)}
 					disabled={readOnly}
-					className="px-4 py-2 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					className="px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
 				>
 					<option value="">No Format</option>
 					{FORMAT_GROUPS.map((group) => (

src/components/deck/DeckSection.tsx

···
 	}, [sortedGroupNames, groupedCards, cardMap, sortBy]);
 
 	return (
-		<div className="mb-8 pb-8 border-b border-gray-200 dark:border-slate-800 last:border-b-0 last:pb-0">
+		<div className="mb-8 pb-8 border-b border-gray-200 dark:border-zinc-700 last:border-b-0 last:pb-0">
 			<DroppableSection section={section} isDragging={isDragging}>
 				<DroppableSectionHeader>
 					<h2 className="text-xl font-bold text-gray-900 dark:text-white">
 						{sectionNames[section]}
 					</h2>
-					<span className="text-sm text-gray-600 dark:text-gray-400">
+					<span className="text-sm text-gray-600 dark:text-zinc-300">
 						{totalQuantity} {totalQuantity === 1 ? "card" : "cards"}
 					</span>
 				</DroppableSectionHeader>
 				{cards.length === 0 ? (
-					<div className="bg-gray-100 dark:bg-slate-800 rounded-lg p-6 border-2 border-dashed border-gray-300 dark:border-slate-700">
-						<p className="text-gray-500 dark:text-gray-400 text-center">
+					<div className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-6 border-2 border-dashed border-gray-300 dark:border-zinc-600">
+						<p className="text-gray-500 dark:text-zinc-300 text-center">
 							No cards in {sectionNames[section].toLowerCase()}
 						</p>
 					</div>
···
 									enabled={groupedCards.get(groupName)?.forTag ?? false}
 									isDragging={isDragging}
 								>
-									<div className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">
+									<div className="text-sm font-semibold text-gray-700 dark:text-zinc-300 mb-1">
 										{groupName} ({groupQuantity})
 									</div>
 									<div className="space-y-1">

src/components/deck/DeckStats.tsx

···
 
 	if (isLoading) {
 		return (
-			<div className="mt-8 pt-8 border-t border-gray-200 dark:border-slate-700">
+			<div className="mt-8 pt-8 border-t border-gray-200 dark:border-zinc-600">
 				<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
 					Statistics
 				</h2>
-				<div className="flex items-center justify-center h-48 bg-gray-100 dark:bg-slate-800 rounded-lg">
-					<div className="text-gray-500 dark:text-gray-400">
+				<div className="flex items-center justify-center h-48 bg-gray-100 dark:bg-zinc-800 rounded-lg">
+					<div className="text-gray-500 dark:text-zinc-300">
 						Loading statistics...
 					</div>
 				</div>
···
 	}
 
 	return (
-		<div className="mt-8 pt-8 border-t border-gray-200 dark:border-slate-700">
+		<div className="mt-8 pt-8 border-t border-gray-200 dark:border-zinc-600">
 			<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
 				Statistics
 			</h2>

src/components/deck/DeleteDeckDialog.tsx

···
 					role="alertdialog"
 					aria-modal="true"
 					aria-labelledby={titleId}
-					className="bg-white dark:bg-slate-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-slate-700"
+					className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600"
 				>
 					{/* Header */}
-					<div className="flex items-center gap-3 p-6 border-b border-gray-200 dark:border-slate-800">
+					<div className="flex items-center gap-3 p-6 border-b border-gray-200 dark:border-zinc-700">
 						<div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-full">
 							<AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
 						</div>
···
 
 					{/* Body */}
 					<form onSubmit={handleSubmit} className="p-6 space-y-4">
-						<p className="text-gray-600 dark:text-gray-400">
+						<p className="text-gray-600 dark:text-zinc-300">
 							This action <strong>cannot</strong> be undone. This will
 							permanently delete the deck and all its cards.
 						</p>
···
 						<div>
 							<label
 								htmlFor={inputId}
-								className="block text-sm text-gray-700 dark:text-gray-300 mb-2"
+								className="block text-sm text-gray-700 dark:text-zinc-300 mb-2"
 							>
 								Please type{" "}
-								<span className="font-mono font-semibold text-gray-900 dark:text-white bg-gray-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">
+								<span className="font-mono font-semibold text-gray-900 dark:text-white bg-gray-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded">
 									{deckName}
 								</span>{" "}
 								to confirm.
···
 								onChange={(e) => setConfirmText(e.target.value)}
 								disabled={isDeleting}
 								autoComplete="off"
-								className="w-full px-4 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+								className="w-full px-4 py-2 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
 								placeholder="Deck name"
 							/>
 						</div>
···
 								type="button"
 								onClick={onClose}
 								disabled={isDeleting}
-								className="px-4 py-2 bg-gray-200 dark:bg-slate-800 hover:bg-gray-300 dark:hover:bg-slate-700 text-gray-900 dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+								className="px-4 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
 							>
 								Cancel
 							</button>

src/components/deck/DraggableCard.tsx

···
 			{...attributes}
 			{...(disabled ? {} : listeners)}
 			type="button"
-			className="group relative rounded px-2 py-1 w-full text-left md:touch-none bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700"
+			className="group relative rounded px-2 py-1 w-full text-left md:touch-none bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700"
 			style={{
 				opacity: isDragging ? 0.5 : 1,
 				cursor: disabled ? "pointer" : isDragging ? "grabbing" : "grab",
···
 		>
 			<div
 				ref={highlightRef}
-				className="absolute inset-0 rounded bg-amber-100 dark:bg-slate-700 opacity-0 pointer-events-none"
+				className="absolute inset-0 rounded bg-amber-100 dark:bg-zinc-700 opacity-0 pointer-events-none"
 			/>
 			<div className="flex items-baseline gap-2">
-				<span className="text-gray-600 dark:text-gray-400 font-mono text-xs w-4 text-right flex-shrink-0">
+				<span className="text-gray-600 dark:text-zinc-300 font-mono text-xs w-4 text-right flex-shrink-0">
 					{card.quantity}
 				</span>
 				<span className="text-gray-900 dark:text-white text-sm truncate flex-1 min-w-0 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'wght'_400] motion-safe:group-hover:[font-variation-settings:'wght'_500]">
···
 					{primaryFace?.mana_cost ? (
 						<ManaCost cost={primaryFace.mana_cost} size="small" />
 					) : isLoading ? (
-						<div className="h-5 w-12 bg-gray-300 dark:bg-slate-700 rounded animate-pulse" />
+						<div className="h-5 w-12 bg-gray-300 dark:bg-zinc-700 rounded animate-pulse" />
 					) : null}
 				</div>
 			</div>

src/components/deck/DroppableTagGroup.tsx

···
 							<div className="absolute inset-0 bg-cyan-500/20 dark:bg-cyan-600/30 rounded-lg z-10" />
 							{/* Label */}
 							<div className="absolute inset-0 flex items-center justify-center z-20">
-								<div className="bg-cyan-500 dark:bg-cyan-700 text-white px-3 py-2 rounded-lg text-sm font-semibold shadow-lg">
+								<div className="bg-cyan-400 text-gray-900 px-3 py-2 rounded-lg text-sm font-semibold shadow-lg">
 									Drop to add "{tagName}"
 								</div>
 							</div>

src/components/deck/GoldfishDragDropProvider.tsx

···
 				<img
 					src={imageSrc}
 					alt="Dragging card"
-					className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-slate-700 shadow-2xl"
+					className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 shadow-2xl"
 					style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 					draggable={false}
 				/>

src/components/deck/GoldfishView.tsx

···
 	if (cards.length === 0) return null;
 
 	return (
-		<div className="mt-8 pt-8 border-t border-gray-200 dark:border-slate-700">
+		<div className="mt-8 pt-8 border-t border-gray-200 dark:border-zinc-600">
 			<SeedEmbed />
 			<div className="flex items-center justify-between mb-4">
 				<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
···
 					<button
 						type="button"
 						onClick={newHand}
-						className="px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-700"
+						className="px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 hover:bg-gray-200 dark:hover:bg-zinc-700"
 					>
 						New Hand
 					</button>

src/components/deck/TagAutocomplete.tsx

···
 					onBlur={handleBlur}
 					placeholder={placeholder}
 					disabled={disabled}
-					className="flex-1 px-3 py-2 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
+					className="flex-1 px-3 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
 				/>
 				<button
 					type="button"
 					onClick={() => handleAdd(value)}
 					disabled={disabled}
-					className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
+					className="px-4 py-2 bg-cyan-400 hover:bg-cyan-300 disabled:bg-gray-400 disabled:cursor-not-allowed text-gray-900 rounded-lg transition-colors"
 				>
 					Add
 				</button>
···
 				<div
 					id={listboxId}
 					role="listbox"
-					className="absolute z-10 mt-1 w-full bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg shadow-lg max-h-48 overflow-y-auto"
+					className="absolute z-10 mt-1 w-full bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"
 				>
 					{filtered.map((tag, i) => (
 						<div
···
 							className={`px-3 py-2 text-sm cursor-pointer ${
 								i === selectedIndex
 									? "bg-cyan-100 dark:bg-cyan-900 text-cyan-900 dark:text-cyan-100"
-									: "text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700"
+									: "text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-zinc-700"
 							}`}
 						>
 							{tag}

src/components/deck/ValidationBadge.tsx

···
 			</button>
 
 			{isOpen && (
-				<div className="absolute top-full left-0 mt-1 w-[28rem] max-h-[32rem] overflow-y-auto bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 z-50">
+				<div className="absolute top-full left-0 mt-1 w-[28rem] max-h-[32rem] overflow-y-auto bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-gray-200 dark:border-zinc-600 z-50">
 					<div className="p-3 space-y-3">
 						{errors.length > 0 && (
 							<ViolationGroup
···
 	const ruleText = rule?.ruleText;
 
 	return (
-		<li className="text-sm text-gray-600 dark:text-gray-400">
+		<li className="text-sm text-gray-600 dark:text-zinc-300">
 			<button
 				type="button"
 				onClick={() => ruleText && setIsExpanded(!isExpanded)}
-				className={`flex items-start gap-1 text-left w-full ${ruleText ? "cursor-pointer hover:text-gray-900 dark:hover:text-gray-200" : "cursor-default"}`}
+				className={`flex items-start gap-1 text-left w-full ${ruleText ? "cursor-pointer hover:text-gray-900 dark:hover:text-zinc-200" : "cursor-default"}`}
 			>
 				{ruleText ? (
 					<ChevronRight
···
 					<span className="w-4" />
 				)}
 				<span>
-					<span className="font-mono text-xs text-gray-400 dark:text-gray-500 mr-1.5">
+					<span className="font-mono text-xs text-gray-400 dark:text-zinc-400 mr-1.5">
 						[{violation.rule}]
 					</span>
 					{violation.message}
 				</span>
 			</button>
 			{isExpanded && ruleText && (
-				<div className="ml-5 mt-1.5 pl-3 border-l-2 border-gray-200 dark:border-slate-600 text-xs text-gray-500 dark:text-gray-400 italic">
+				<div className="ml-5 mt-1.5 pl-3 border-l-2 border-gray-200 dark:border-zinc-600 text-xs text-gray-500 dark:text-zinc-300 italic">
 					{ruleText}
 				</div>
 			)}

src/components/deck/ViewControls.tsx

···
 			<div className="flex items-center gap-1.5">
 				<label
 					htmlFor={groupById}
-					className="text-xs font-medium text-gray-600 dark:text-gray-400"
+					className="text-xs font-medium text-gray-600 dark:text-zinc-300"
 				>
 					Group:
 				</label>
···
 					id={groupById}
 					value={groupBy}
 					onChange={(e) => onGroupByChange(e.target.value as GroupBy)}
-					className="min-w-32 cursor-pointer rounded bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 py-1 px-2 text-sm text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-slate-700 focus:outline-none focus:ring-1 focus:ring-cyan-500 transition-colors"
+					className="min-w-32 cursor-pointer rounded bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 py-1 px-2 text-sm text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-cyan-500 transition-colors"
 				>
 					{GROUP_BY_OPTIONS.map((option) => (
 						<option key={option.value} value={option.value}>
···
 			<div className="flex items-center gap-1.5">
 				<label
 					htmlFor={sortById}
-					className="text-xs font-medium text-gray-600 dark:text-gray-400"
+					className="text-xs font-medium text-gray-600 dark:text-zinc-300"
 				>
 					Sort:
 				</label>
···
 					id={sortById}
 					value={sortBy}
 					onChange={(e) => onSortByChange(e.target.value as SortBy)}
-					className="min-w-28 cursor-pointer rounded bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 py-1 px-2 text-sm text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-slate-700 focus:outline-none focus:ring-1 focus:ring-cyan-500 transition-colors"
+					className="min-w-28 cursor-pointer rounded bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 py-1 px-2 text-sm text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-cyan-500 transition-colors"
 				>
 					{SORT_BY_OPTIONS.map((option) => (
 						<option key={option.value} value={option.value}>

src/components/deck/goldfish/GoldfishBattlefield.tsx

···
 				className={`isolate relative w-full h-full rounded-lg border-2 border-dashed transition-colors ${
 					isOver
 						? "border-green-500 bg-green-500/10"
-						: "border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50"
+						: "border-gray-300 dark:border-zinc-600 bg-gray-50 dark:bg-zinc-800/50"
 				}`}
 			>
 				{cards.length === 0 && (
-					<div className="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm pointer-events-none">
+					<div className="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-zinc-400 text-sm pointer-events-none">
 						Battlefield
 					</div>
 				)}

src/components/deck/goldfish/GoldfishBoard.tsx

···
 	return (
 		<GoldfishDragDropProvider onDragEnd={handleDragEnd}>
 			<SeedEmbed />
-			<div className="flex h-full gap-4 p-4 bg-white dark:bg-slate-950">
+			<div className="flex h-full gap-4 p-4 bg-white dark:bg-zinc-950">
 				{/* Left: Card Preview */}
 				<div className="w-64 flex-shrink-0">
 					{hoveredCardData && !hoveredCard?.isFaceDown ? (
···
 							}
 						/>
 					) : (
-						<div className="w-full aspect-[5/7] rounded-lg bg-gray-100 dark:bg-slate-800 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
+						<div className="w-full aspect-[5/7] rounded-lg bg-gray-100 dark:bg-zinc-800 flex items-center justify-center text-gray-400 dark:text-zinc-400 text-sm">
 							{hoveredCard?.isFaceDown ? "Face down" : "Hover a card"}
 						</div>
 					)}

src/components/deck/goldfish/GoldfishCard.tsx

···
 				<img
 					src={imageSrc}
 					alt={card?.name ?? "Card"}
-					className={`rounded-[4.75%/3.5%] bg-gray-200 dark:bg-slate-700 ${sizeClass} aspect-[5/7]`}
+					className={`rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 ${sizeClass} aspect-[5/7]`}
 					style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 					draggable={false}
 					loading="lazy"

src/components/deck/goldfish/GoldfishHand.tsx

···
 			className={`flex gap-2 overflow-x-auto p-2 min-h-[11rem] rounded-lg border-2 border-dashed transition-colors ${
 				isOver
 					? "border-blue-500 bg-blue-500/10"
-					: "border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50"
+					: "border-gray-300 dark:border-zinc-600 bg-gray-50 dark:bg-zinc-800/50"
 			}`}
 		>
 			{cards.length === 0 ? (
-				<div className="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm">
+				<div className="flex items-center justify-center w-full text-gray-400 dark:text-zinc-400 text-sm">
 					Hand is empty
 				</div>
 			) : (

src/components/deck/goldfish/GoldfishPile.tsx

···
 			className={`rounded-lg border-2 border-dashed transition-colors ${
 				isOver
 					? "border-purple-500 bg-purple-500/10"
-					: "border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50"
+					: "border-gray-300 dark:border-zinc-600 bg-gray-50 dark:bg-zinc-800/50"
 			}`}
 		>
 			<button
 				type="button"
 				onClick={() => setExpanded(!expanded)}
-				className="w-full flex items-center justify-between p-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-t-lg"
+				className="w-full flex items-center justify-between p-2 text-sm font-medium text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-t-lg"
 			>
 				<span>
 					{label} ({cards.length})

src/components/deck/goldfish/GoldfishSidebar.tsx

···
 	});
 
 	return (
-		<div className="w-48 flex flex-col gap-3 p-2 bg-gray-100 dark:bg-slate-900 rounded-lg overflow-y-auto overflow-x-hidden">
+		<div className="w-48 flex flex-col gap-3 p-2 bg-gray-100 dark:bg-zinc-900 rounded-lg overflow-y-auto overflow-x-hidden">
 			{/* Library */}
 			<div
 				ref={setLibraryRef}
 				className={`rounded-lg border-2 border-dashed p-2 transition-colors ${
 					isOverLibrary
 						? "border-green-500 bg-green-500/10"
-						: "border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50"
+						: "border-gray-300 dark:border-zinc-600 bg-gray-50 dark:bg-zinc-800/50"
 				}`}
 			>
 				<div className="flex items-center justify-between mb-2">
-					<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+					<span className="text-sm font-medium text-gray-700 dark:text-zinc-300">
 						Library ({library.length})
 					</span>
-					<span className="text-xs text-gray-500 dark:text-gray-400">
+					<span className="text-xs text-gray-500 dark:text-zinc-300">
 						D to draw
 					</span>
 				</div>
···
 						fromLibrary
 					/>
 				) : (
-					<div className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] border-2 border-dashed border-gray-300 dark:border-slate-600" />
+					<div className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] border-2 border-dashed border-gray-300 dark:border-zinc-600" />
 				)}
 			</div>
 
···
 			{/* Player Stats */}
 			<div className="space-y-2">
 				{/* Life */}
-				<div className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-slate-800">
+				<div className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-zinc-800">
 					<button
 						type="button"
 						onClick={() => onAdjustLife(-1)}
-						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-zinc-700"
 						aria-label="Decrease life"
 					>
 						<Minus className="w-4 h-4" />
 					</button>
-					<span className="text-lg font-bold text-gray-700 dark:text-gray-200">
+					<span className="text-lg font-bold text-gray-700 dark:text-zinc-200">
 						{player.life}
 					</span>
 					<button
 						type="button"
 						onClick={() => onAdjustLife(1)}
-						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-zinc-700"
 						aria-label="Increase life"
 					>
 						<Plus className="w-4 h-4" />
···
 				</div>
 
 				{/* Poison */}
-				<div className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-slate-800">
+				<div className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-zinc-800">
 					<button
 						type="button"
 						onClick={() => onAdjustPoison(-1)}
-						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-zinc-700"
 						aria-label="Decrease poison"
 					>
 						<Minus className="w-4 h-4" />
···
 					<button
 						type="button"
 						onClick={() => onAdjustPoison(1)}
-						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-zinc-700"
 						aria-label="Increase poison"
 					>
 						<Plus className="w-4 h-4" />
···
 				<button
 					type="button"
 					onClick={onMulligan}
-					className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-slate-600"
+					className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-200 hover:bg-gray-300 dark:hover:bg-zinc-600"
 				>
 					<RefreshCw className="w-4 h-4" />
 					Mulligan
···
 			</div>
 
 			{/* Keyboard hints */}
-			<div className="text-xs text-gray-400 dark:text-gray-500 space-y-1">
+			<div className="text-xs text-gray-400 dark:text-zinc-400 space-y-1">
 				<p>T/Space: tap • F: flip</p>
 				<p>G: graveyard • E: exile</p>
 				<p>H: hand • B: play</p>

src/components/deck/stats/ManaBreakdown.tsx

···
 		selection.type === type;
 
 	return (
-		<div className="bg-white dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700 col-span-full xl:col-span-2">
-			<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
+		<div className="bg-white dark:bg-zinc-900 rounded-lg p-4 border border-gray-200 dark:border-zinc-600 col-span-full xl:col-span-2">
+			<h3 className="text-sm font-medium text-gray-700 dark:text-zinc-300 mb-4">
 				Mana Breakdown
 			</h3>
 
···
 
 			{/* Land Production section */}
 			{totalLands > 0 && (
-				<div className="mt-4 pt-3 border-t border-gray-200 dark:border-slate-700">
-					<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
+				<div className="mt-4 pt-3 border-t border-gray-200 dark:border-zinc-600">
+					<div className="text-xs font-medium text-gray-500 dark:text-zinc-300 mb-2">
 						Land Production ({totalLands} lands)
 					</div>
 					<div
···
 			)}
 
 			{/* Legend */}
-			<div className="mt-4 pt-3 border-t border-gray-200 dark:border-slate-700 flex flex-wrap items-center justify-between gap-2">
+			<div className="mt-4 pt-3 border-t border-gray-200 dark:border-zinc-600 flex flex-wrap items-center justify-between gap-2">
 				<div className="flex gap-3 text-xs">
 					<span
 						className="flex items-center gap-1 cursor-help"
 						title="Untapped lands, fast mana rocks, shocklands (pay life = your choice)"
 					>
 						<span className="w-2 h-2 rounded-full bg-emerald-500" />
-						<span className="text-gray-600 dark:text-gray-400">Immediate</span>
+						<span className="text-gray-600 dark:text-zinc-300">Immediate</span>
 					</span>
 					<span
 						className="flex items-center gap-1 cursor-help"
 						title="Check lands, fast lands, battle lands - may enter tapped based on game state"
 					>
 						<span className="w-2 h-2 rounded-full bg-sky-500" />
-						<span className="text-gray-600 dark:text-gray-400">
+						<span className="text-gray-600 dark:text-zinc-300">
 							Conditional
 						</span>
 					</span>
···
 						title="Tap lands, mana dorks (summoning sickness)"
 					>
 						<span className="w-2 h-2 rounded-full bg-rose-500" />
-						<span className="text-gray-600 dark:text-gray-400">Delayed</span>
+						<span className="text-gray-600 dark:text-zinc-300">Delayed</span>
 					</span>
 					<span
 						className="flex items-center gap-1 cursor-help"
 						title="Bouncelands - enter tapped and return a land"
 					>
-						<span className="w-2 h-2 rounded-full bg-violet-500" />
-						<span className="text-gray-600 dark:text-gray-400">Bounce</span>
+						<span className="w-2 h-2 rounded-full bg-cyan-500" />
+						<span className="text-gray-600 dark:text-zinc-300">Bounce</span>
 					</span>
 				</div>
 				{totalSources > 0 && (
 					<div
-						className="text-xs text-gray-600 dark:text-gray-400 cursor-help"
+						className="text-xs text-gray-600 dark:text-zinc-300 cursor-help"
 						title={`${totalImmediate} of ${totalSources} sources can produce mana the turn they enter`}
 					>
 						{immediatePercent}% of sources produce mana immediately
···
 					isSelected("symbol")
 						? "ring-2 ring-blue-500 bg-blue-50 dark:bg-blue-900/30"
 						: hasSymbols
-							? "hover:bg-gray-100 dark:hover:bg-slate-800"
+							? "hover:bg-gray-100 dark:hover:bg-zinc-800"
 							: "cursor-default"
 				}`}
 			>
···
 				{Math.round(data.symbolPercent)}%
 			</div>
 			<div
-				className="text-xs text-gray-500 dark:text-gray-400 cursor-help"
+				className="text-xs text-gray-500 dark:text-zinc-300 cursor-help"
 				title={`${data.symbolCount} ${colorName.toLowerCase()} mana symbols in card costs`}
 			>
 				{data.symbolCount} pips
···
 			{sourceCount > 0 && (
 				<div className="w-full mt-2">
 					<div
-						className="flex h-3 rounded-md overflow-hidden bg-gray-200 dark:bg-slate-700 cursor-help"
+						className="flex h-3 rounded-md overflow-hidden bg-gray-200 dark:bg-zinc-700 cursor-help"
 						title={`${sourceCount} sources produce ${colorName.toLowerCase()} mana (${Math.round((sourceCount / totalSources) * 100)}% of all sources)`}
 					>
 						{data.immediateSourceCount > 0 && (
···
 						{data.bounceSourceCount > 0 && (
 							<button
 								type="button"
-								className={`bg-violet-500 transition-opacity ${
+								className={`bg-cyan-500 transition-opacity ${
 									isSelected("bounce")
 										? "opacity-100"
 										: "opacity-80 hover:opacity-100"
···
 						)}
 					</div>
 					<div
-						className="text-xs text-gray-500 dark:text-gray-400 text-center mt-1 cursor-help"
+						className="text-xs text-gray-500 dark:text-zinc-300 text-center mt-1 cursor-help"
 						title={`${sourceCount} cards produce ${colorName.toLowerCase()} mana`}
 					>
 						{sourceCount} sources
···
 			{/* Coverage bar - mana colored */}
 			<button
 				type="button"
-				className={`relative w-full h-4 rounded overflow-hidden bg-gray-200 dark:bg-slate-700 transition-opacity ${
+				className={`relative w-full h-4 rounded overflow-hidden bg-gray-200 dark:bg-zinc-700 transition-opacity ${
 					isSelected ? "ring-2 ring-blue-500" : "hover:opacity-90"
 				}`}
 				onClick={onSelect}
···
 					className={`h-full ${MANA_BAR_COLORS[data.color]}`}
 					style={{ width: `${data.landSourcePercent}%` }}
 				/>
-				<span className="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300">
+				<span className="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-zinc-300">
 					{Math.round(data.landSourcePercent)}%
 				</span>
 			</button>
···
 			{/* Tempo bar - smaller, shows quality of those lands */}
 			{landCount > 0 && (
 				<div
-					className="w-full h-1.5 rounded-full overflow-hidden bg-gray-200 dark:bg-slate-700 flex cursor-help"
+					className="w-full h-1.5 rounded-full overflow-hidden bg-gray-200 dark:bg-zinc-700 flex cursor-help"
 					title={`Land tempo: ${data.landImmediateCount} immediate, ${data.landConditionalCount} conditional, ${data.landDelayedCount} delayed, ${data.landBounceCount} bounce`}
 				>
 					{data.landImmediateCount > 0 && (
···
 					)}
 					{data.landBounceCount > 0 && (
 						<div
-							className="h-full bg-violet-500"
+							className="h-full bg-cyan-500"
 							style={{ width: `${bouncePercent}%` }}
 						/>
 					)}
···
 			)}
 
 			<div
-				className="text-xs text-gray-500 dark:text-gray-400 text-center cursor-help"
+				className="text-xs text-gray-500 dark:text-zinc-300 text-center cursor-help"
 				title={`${Math.round(data.landProductionPercent)}% of your lands' total mana production is ${colorName.toLowerCase()}`}
 			>
 				{Math.round(data.landProductionPercent)}% of symbols on lands

src/components/deck/stats/ManaCurveChart.tsx

···
 
 const COLORS = {
 	permanent: "var(--color-cyan-500)",
-	spell: "var(--color-violet-500)",
+	spell: "var(--color-amber-500)",
 	permanentHover: "var(--color-cyan-600)",
-	spellHover: "var(--color-violet-600)",
+	spellHover: "var(--color-amber-600)",
 };
 
 export function ManaCurveChart({
···
 		selection.type === type;
 
 	return (
-		<div className="bg-white dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700">
-			<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
+		<div className="bg-white dark:bg-zinc-900 rounded-lg p-4 border border-gray-200 dark:border-zinc-600">
+			<h3 className="text-sm font-medium text-gray-700 dark:text-zinc-300 mb-4">
 				Mana Curve
 			</h3>
 			<div className="h-48">
···
 						className="w-3 h-3 rounded"
 						style={{ backgroundColor: COLORS.permanent }}
 					/>
-					<span className="text-xs text-gray-600 dark:text-gray-400">
+					<span className="text-xs text-gray-600 dark:text-zinc-300">
 						Permanents
 					</span>
 				</div>
···
 						className="w-3 h-3 rounded"
 						style={{ backgroundColor: COLORS.spell }}
 					/>
-					<span className="text-xs text-gray-600 dark:text-gray-400">
+					<span className="text-xs text-gray-600 dark:text-zinc-300">
 						Spells
 					</span>
 				</div>

src/components/deck/stats/SpeedPieChart.tsx

···
 	const total = data.reduce((sum, d) => sum + d.count, 0);
 
 	return (
-		<div className="bg-white dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700">
-			<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
+		<div className="bg-white dark:bg-zinc-900 rounded-lg p-4 border border-gray-200 dark:border-zinc-600">
+			<h3 className="text-sm font-medium text-gray-700 dark:text-zinc-300 mb-4">
 				Speed
 			</h3>
 			<div className="h-48 flex">
···
 								className="w-2 h-2 rounded-full flex-shrink-0"
 								style={{ backgroundColor: SPEED_COLORS[entry.category] }}
 							/>
-							<span className="text-xs text-gray-600 dark:text-gray-400">
+							<span className="text-xs text-gray-600 dark:text-zinc-300">
 								{SPEED_LABELS[entry.category]}
 							</span>
-							<span className="text-xs text-gray-500 dark:text-gray-500 ml-auto">
+							<span className="text-xs text-gray-500 dark:text-zinc-400 ml-auto">
 								{total > 0 ? Math.round((entry.count / total) * 100) : 0}%
 							</span>
 						</button>

src/components/deck/stats/StatsCardList.tsx

···
 	});
 
 	return (
-		<div className="bg-gray-50 dark:bg-slate-800 rounded-lg p-4 min-w-48">
-			<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+		<div className="bg-gray-50 dark:bg-zinc-800 rounded-lg p-4 min-w-48">
+			<h4 className="text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
 				{title}
 			</h4>
 			{uniqueCards.length === 0 ? (
-				<p className="text-sm text-gray-500 dark:text-gray-400 italic">
+				<p className="text-sm text-gray-500 dark:text-zinc-300 italic">
 					No cards
 				</p>
 			) : (
···
 							<li key={`${deckCard.scryfallId}-${faceIdx}`}>
 								<button
 									type="button"
-									className="w-full text-left px-2 py-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700 transition-colors flex items-center gap-2"
+									className="w-full text-left px-2 py-1 rounded hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors flex items-center gap-2"
 									onMouseEnter={() => onCardHover(deckCard.scryfallId)}
 									onMouseLeave={() => onCardHover(null)}
 									onClick={() => onCardClick?.(deckCard)}
 								>
-									<span className="text-gray-600 dark:text-gray-400 font-mono text-xs w-4 text-right flex-shrink-0">
+									<span className="text-gray-600 dark:text-zinc-300 font-mono text-xs w-4 text-right flex-shrink-0">
 										{deckCard.quantity}
 									</span>
 									<span className="text-gray-900 dark:text-white text-sm truncate flex-1 min-w-0">

src/components/deck/stats/SubtypesPieChart.tsx

···
 
 const COLORS = [
 	"var(--color-cyan-500)",
-	"var(--color-violet-500)",
+	"var(--color-cyan-500)",
 	"var(--color-amber-500)",
 	"var(--color-emerald-500)",
 	"var(--color-rose-500)",
···
 
 	if (data.length === 0) {
 		return (
-			<div className="bg-white dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700">
-				<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
+			<div className="bg-white dark:bg-zinc-900 rounded-lg p-4 border border-gray-200 dark:border-zinc-600">
+				<h3 className="text-sm font-medium text-gray-700 dark:text-zinc-300 mb-4">
 					Subtypes
 				</h3>
-				<div className="h-48 flex items-center justify-center text-gray-500 dark:text-gray-400 text-sm">
+				<div className="h-48 flex items-center justify-center text-gray-500 dark:text-zinc-300 text-sm">
 					No subtypes
 				</div>
 			</div>
···
 	}
 
 	return (
-		<div className="bg-white dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700">
-			<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
+		<div className="bg-white dark:bg-zinc-900 rounded-lg p-4 border border-gray-200 dark:border-zinc-600">
+			<h3 className="text-sm font-medium text-gray-700 dark:text-zinc-300 mb-4">
 				Subtypes
 			</h3>
 			<div className="h-48 flex">
···
 								className="w-2 h-2 rounded-full flex-shrink-0"
 								style={{ backgroundColor: getSubtypeColor(entry.type, index) }}
 							/>
-							<span className="text-xs text-gray-600 dark:text-gray-400 truncate">
+							<span className="text-xs text-gray-600 dark:text-zinc-300 truncate">
 								{entry.type}
 							</span>
-							<span className="text-xs text-gray-500 dark:text-gray-500 ml-auto">
+							<span className="text-xs text-gray-500 dark:text-zinc-400 ml-auto">
 								{Math.round((entry.count / total) * 100)}%
 							</span>
 						</button>

src/components/deck/stats/TypesPieChart.tsx

···
 	Creature: "var(--color-emerald-500)",
 	Instant: "var(--color-cyan-500)",
 	Sorcery: "var(--color-amber-500)",
-	Enchantment: "var(--color-violet-500)",
+	Enchantment: "var(--color-sky-500)",
 	Artifact: "var(--color-slate-500)",
 	Planeswalker: "var(--color-orange-500)",
 	Land: "var(--color-lime-500)",
···
 	const total = data.reduce((sum, d) => sum + d.count, 0);
 
 	return (
-		<div className="bg-white dark:bg-slate-900 rounded-lg p-4 border border-gray-200 dark:border-slate-700">
-			<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
+		<div className="bg-white dark:bg-zinc-900 rounded-lg p-4 border border-gray-200 dark:border-zinc-600">
+			<h3 className="text-sm font-medium text-gray-700 dark:text-zinc-300 mb-4">
 				Card Types
 			</h3>
 			<div className="h-48 flex">
···
 								className="w-2 h-2 rounded-full flex-shrink-0"
 								style={{ backgroundColor: getTypeColor(entry.type) }}
 							/>
-							<span className="text-xs text-gray-600 dark:text-gray-400 truncate">
+							<span className="text-xs text-gray-600 dark:text-zinc-300 truncate">
 								{entry.type}
 							</span>
-							<span className="text-xs text-gray-500 dark:text-gray-500 ml-auto">
+							<span className="text-xs text-gray-500 dark:text-zinc-400 ml-auto">
 								{Math.round((entry.count / total) * 100)}%
 							</span>
 						</button>

src/components/list/DeleteListDialog.tsx

···
 					role="alertdialog"
 					aria-modal="true"
 					aria-labelledby={titleId}
-					className="bg-white dark:bg-slate-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-slate-700"
+					className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600"
 				>
-					<div className="flex items-center gap-3 p-6 border-b border-gray-200 dark:border-slate-800">
+					<div className="flex items-center gap-3 p-6 border-b border-gray-200 dark:border-zinc-700">
 						<div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-full">
 							<AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
 						</div>
···
 					</div>
 
 					<form onSubmit={handleSubmit} className="p-6 space-y-4">
-						<p className="text-gray-600 dark:text-gray-400">
+						<p className="text-gray-600 dark:text-zinc-300">
 							This action <strong>cannot</strong> be undone. This will
 							permanently delete the list.
 						</p>
···
 						<div>
 							<label
 								htmlFor={inputId}
-								className="block text-sm text-gray-700 dark:text-gray-300 mb-2"
+								className="block text-sm text-gray-700 dark:text-zinc-300 mb-2"
 							>
 								Please type{" "}
-								<span className="font-mono font-semibold text-gray-900 dark:text-white bg-gray-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">
+								<span className="font-mono font-semibold text-gray-900 dark:text-white bg-gray-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded">
 									{listName}
 								</span>{" "}
 								to confirm.
···
 								onChange={(e) => setConfirmText(e.target.value)}
 								disabled={isDeleting}
 								autoComplete="off"
-								className="w-full px-4 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+								className="w-full px-4 py-2 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
 								placeholder="List name"
 							/>
 						</div>
···
 								type="button"
 								onClick={onClose}
 								disabled={isDeleting}
-								className="px-4 py-2 bg-gray-200 dark:bg-slate-800 hover:bg-gray-300 dark:hover:bg-slate-700 text-gray-900 dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+								className="px-4 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
 							>
 								Cancel
 							</button>

src/components/list/ListActionsMenu.tsx

···
 			<button
 				type="button"
 				onClick={() => setIsOpen(!isOpen)}
-				className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+				className="p-2 text-gray-600 dark:text-zinc-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
 				aria-label="List actions"
 				aria-expanded={isOpen}
 			>
···
 			</button>
 
 			{isOpen && (
-				<div className="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden z-50">
+				<div className="absolute left-0 mt-2 w-48 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg overflow-hidden z-50">
 					<button
 						type="button"
 						onClick={() => {

src/components/list/SaveToListDialog.tsx

···
 					role="dialog"
 					aria-modal="true"
 					aria-labelledby={titleId}
-					className="bg-white dark:bg-slate-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-slate-700"
+					className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600"
 				>
 					{/* Header */}
-					<div className="flex items-center gap-3 p-6 border-b border-gray-200 dark:border-slate-800">
+					<div className="flex items-center gap-3 p-6 border-b border-gray-200 dark:border-zinc-700">
 						<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-full">
 							<Bookmark className="w-5 h-5 text-blue-600 dark:text-blue-400" />
 						</div>
···
 								<Loader2 className="w-6 h-6 animate-spin text-gray-400" />
 							</div>
 						) : lists.length === 0 ? (
-							<p className="text-gray-600 dark:text-gray-400 text-center py-4">
+							<p className="text-gray-600 dark:text-zinc-300 text-center py-4">
 								You don't have any lists yet. Create one below!
 							</p>
 						) : (
···
 						{/* Create new list */}
 						<form
 							onSubmit={handleCreateList}
-							className="flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-slate-800"
+							className="flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-zinc-700"
 						>
 							<input
 								id={inputId}
···
 								onChange={(e) => setNewListName(e.target.value)}
 								disabled={createMutation.isPending}
 								placeholder="New list name..."
-								className="flex-1 px-4 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+								className="flex-1 px-4 py-2 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
 							/>
 							<button
 								type="submit"
···
 						<button
 							type="button"
 							onClick={onClose}
-							className="px-4 py-2 bg-gray-200 dark:bg-slate-800 hover:bg-gray-300 dark:hover:bg-slate-700 text-gray-900 dark:text-white rounded-lg transition-colors"
+							className="px-4 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors"
 						>
 							Done
 						</button>
···
 			className={`w-full flex items-center justify-between px-4 py-3 rounded-lg transition-colors ${
 				isSaved
 					? "bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30"
-					: "bg-gray-50 dark:bg-slate-800 hover:bg-gray-100 dark:hover:bg-slate-700"
+					: "bg-gray-50 dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-700"
 			}`}
 		>
 			<span
···
 				{list.name}
 			</span>
 			<span
-				className={`text-sm ${isSaved ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`}
+				className={`text-sm ${isSaved ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-zinc-300"}`}
 			>
 				{toggleMutation.isPending ? (
 					<Loader2 className="w-4 h-4 animate-spin" />

src/components/profile/ProfileHeader.tsx

···
 							href={handleUrl}
 							target="_blank"
 							rel="noopener noreferrer"
-							className="text-gray-400 hover:text-cyan-500 dark:text-gray-500 dark:hover:text-cyan-400 transition-colors"
+							className="text-gray-400 hover:text-cyan-500 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
 							title={`Visit ${handleUrl}`}
 						>
 							<ExternalLink className="w-6 h-6" />
···
 				<div>
 					<label
 						htmlFor={pronounsId}
-						className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+						className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1"
 					>
 						Pronouns
 					</label>
···
 						}}
 						placeholder="e.g. she/her, they/them"
 						maxLength={64}
-						className="px-3 py-2 w-full max-w-xs bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500"
+						className="px-3 py-2 w-full max-w-xs bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500"
 					/>
 				</div>
 
 				{/* Bio editor */}
 				<div>
-					<span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+					<span className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1">
 						Bio
 					</span>
 					<ProseMirrorEditor
···
 
 				{/* Save status and done button */}
 				<div className="flex items-center justify-between">
-					<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+					<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-zinc-300">
 						{isSaving && <span>Saving...</span>}
 						{!isSaving && isDirty && <span>Unsaved changes</span>}
 						{!isSaving && !isDirty && hasContent && <span>Saved</span>}
···
 					<button
 						type="button"
 						onClick={handleDone}
-						className="px-4 py-2 text-sm font-medium rounded-lg bg-cyan-600 hover:bg-cyan-700 text-white"
+						className="px-4 py-2 text-sm font-medium rounded-lg bg-cyan-400 hover:bg-cyan-300 text-gray-900"
 					>
 						Done
 					</button>
···
 						href={handleUrl}
 						target="_blank"
 						rel="noopener noreferrer"
-						className="text-gray-400 hover:text-cyan-500 dark:text-gray-500 dark:hover:text-cyan-400 transition-colors"
+						className="text-gray-400 hover:text-cyan-500 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
 						title={`Visit ${handleUrl}`}
 					>
 						<ExternalLink className="w-6 h-6" />
···
 			</div>
 			{/* Pronouns */}
 			{profile?.pronouns && (
-				<p className="text-sm text-gray-500 dark:text-gray-400">
+				<p className="text-sm text-gray-500 dark:text-zinc-300">
 					{profile.pronouns}
 				</p>
 			)}
···
 			{hasContent && profile?.bio && (
 				<RichtextRenderer
 					doc={profile.bio}
-					className="text-gray-700 dark:text-gray-300"
+					className="text-gray-700 dark:text-zinc-300"
 				/>
 			)}
 
···
 				<button
 					type="button"
 					onClick={handleStartEdit}
-					className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-700 dark:text-gray-300"
+					className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-300"
 				>
 					<Pencil className="w-4 h-4" />
 					{hasContent || profile?.pronouns ? "Edit profile" : "Add bio"}

src/components/profile/ProfileLayout.tsx

···
 	const isOwner = session?.info.sub === did;
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			<div className="max-w-7xl mx-auto px-6 py-16">
 				{/* Profile Header */}
 				<ProfileHeader
···
 				/>
 
 				{/* Tab Navigation */}
-				<nav className="flex border-b border-gray-200 dark:border-slate-700 mb-6">
+				<nav className="flex border-b border-gray-200 dark:border-zinc-600 mb-6">
 					<Link
 						to="/profile/$did"
 						params={{ did }}
 						activeOptions={{ exact: true }}
-						className="px-4 py-2 font-medium text-sm border-b-2 transition-colors text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 border-transparent hover:border-gray-300 dark:hover:border-gray-600 [&.active]:border-cyan-500 [&.active]:text-cyan-600 dark:[&.active]:text-cyan-400"
+						className="px-4 py-2 font-medium text-sm border-b-2 transition-colors text-gray-500 dark:text-zinc-300 hover:text-gray-700 dark:hover:text-zinc-300 border-transparent hover:border-gray-300 dark:hover:border-zinc-600 [&.active]:border-cyan-500 [&.active]:text-cyan-600 dark:[&.active]:text-cyan-400"
 					>
 						Decks
 					</Link>
 					<Link
 						to="/profile/$did/lists"
 						params={{ did }}
-						className="px-4 py-2 font-medium text-sm border-b-2 transition-colors text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 border-transparent hover:border-gray-300 dark:hover:border-gray-600 [&.active]:border-cyan-500 [&.active]:text-cyan-600 dark:[&.active]:text-cyan-400"
+						className="px-4 py-2 font-medium text-sm border-b-2 transition-colors text-gray-500 dark:text-zinc-300 hover:text-gray-700 dark:hover:text-zinc-300 border-transparent hover:border-gray-300 dark:hover:border-zinc-600 [&.active]:border-cyan-500 [&.active]:text-cyan-600 dark:[&.active]:text-cyan-400"
 					>
 						Lists
 					</Link>

src/components/richtext/CombinedAutocomplete.tsx

···
 }: MentionPopupContentProps) {
 	return (
 		<div
-			className="absolute z-50 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg shadow-lg py-1 w-56"
+			className="absolute z-50 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg py-1 w-56"
 			style={{ top: position.top, left: position.left }}
 			role="listbox"
 		>
 			{options.length === 0 ? (
-				<div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+				<div className="px-3 py-2 text-sm text-gray-500 dark:text-zinc-300">
 					No matches
 				</div>
 			) : (
···
 						className={`w-full px-3 py-2 text-left text-sm ${
 							i === selectedIndex
 								? "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-900 dark:text-cyan-100"
-								: "text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-slate-700"
+								: "text-gray-900 dark:text-zinc-100 hover:bg-gray-100 dark:hover:bg-zinc-700"
 						}`}
 						onMouseEnter={() => onSelectIndex(i)}
 						onMouseDown={(e) => {
···
 }: CardPopupContentProps) {
 	return (
 		<div
-			className="absolute z-50 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg shadow-lg py-1 w-64 max-h-64 overflow-y-auto"
+			className="absolute z-50 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg py-1 w-64 max-h-64 overflow-y-auto"
 			style={{ top: position.top, left: position.left }}
 			role="listbox"
 		>
 			{options.length === 0 ? (
-				<div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+				<div className="px-3 py-2 text-sm text-gray-500 dark:text-zinc-300">
 					No cards found
 				</div>
 			) : (
···
 						className={`w-full px-3 py-2 text-left text-sm ${
 							i === selectedIndex
 								? "bg-sky-50 dark:bg-sky-900/30 text-sky-900 dark:text-sky-100"
-								: "text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-slate-700"
+								: "text-gray-900 dark:text-zinc-100 hover:bg-gray-100 dark:hover:bg-zinc-700"
 						}`}
 						onMouseEnter={() => onSelectIndex(i)}
 						onMouseDown={(e) => {
···
 }: TagPopupContentProps) {
 	return (
 		<div
-			className="absolute z-50 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg shadow-lg py-1 w-56 max-h-64 overflow-y-auto"
+			className="absolute z-50 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg py-1 w-56 max-h-64 overflow-y-auto"
 			style={{ top: position.top, left: position.left }}
 			role="listbox"
 		>
 			{options.length === 0 ? (
-				<div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+				<div className="px-3 py-2 text-sm text-gray-500 dark:text-zinc-300">
 					No tags found
 				</div>
 			) : (
···
 						className={`w-full px-3 py-2 text-left text-sm ${
 							i === selectedIndex
 								? "bg-amber-100 dark:bg-amber-900/30 text-amber-900 dark:text-amber-100"
-								: "text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-slate-700"
+								: "text-gray-900 dark:text-zinc-100 hover:bg-gray-100 dark:hover:bg-zinc-700"
 						}`}
 						onMouseEnter={() => onSelectIndex(i)}
 						onMouseDown={(e) => {

src/components/richtext/LinkModal.tsx

···
 				onClick={onClose}
 				aria-label="Close modal"
 			/>
-			<div className="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl p-4 w-full max-w-md mx-4">
+			<div className="relative bg-white dark:bg-zinc-800 rounded-lg shadow-xl p-4 w-full max-w-md mx-4">
 				<div className="flex items-center justify-between mb-4">
 					<h3
 						id={`${id}-title`}
···
 					<button
 						type="button"
 						onClick={onClose}
-						className="p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-500 dark:text-gray-400"
+						className="p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-700 text-gray-500 dark:text-zinc-300"
 					>
 						<X className="w-5 h-5" />
 					</button>
···
 					<div>
 						<label
 							htmlFor={urlId}
-							className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+							className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1"
 						>
 							URL
 						</label>
···
 							value={url}
 							onChange={(e) => setUrl(e.target.value)}
 							placeholder="example.com"
-							className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+							className="w-full px-3 py-2 border border-gray-300 dark:border-zinc-600 rounded-md bg-white dark:bg-zinc-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
 						/>
 					</div>
 
···
 						<div>
 							<label
 								htmlFor={textId}
-								className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+								className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1"
 							>
 								Link Text
 							</label>
···
 								value={text}
 								onChange={(e) => setText(e.target.value)}
 								placeholder="Display text (optional)"
-								className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+								className="w-full px-3 py-2 border border-gray-300 dark:border-zinc-600 rounded-md bg-white dark:bg-zinc-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
 							/>
 						</div>
 					)}
···
 						<button
 							type="button"
 							onClick={onClose}
-							className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-md"
+							className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md"
 						>
 							Cancel
 						</button>

src/components/richtext/ProseMirrorEditor.tsx

···
 			},
 			attributes: {
 				class:
-					"focus:outline-none min-h-[8rem] p-3 text-gray-900 dark:text-gray-100",
+					"focus:outline-none min-h-[8rem] p-3 text-gray-900 dark:text-zinc-100",
 				"data-placeholder": initialPlaceholderRef.current,
 			},
 		});
···
 
 	return (
 		<div ref={wrapperRef} className={`relative ${className ?? ""}`}>
-			<div className="prosemirror-editor border border-gray-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 overflow-hidden">
+			<div className="prosemirror-editor border border-gray-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 overflow-hidden">
 				{showToolbar && <Toolbar view={viewRef.current} />}
 				<div ref={containerRef} />
 			</div>

src/components/richtext/RichtextRenderer.tsx

···
 
 		case "com.deckbelcher.richtext#codeBlock":
 			return (
-				<pre className="bg-gray-100 dark:bg-slate-800 rounded-lg p-3 my-2 overflow-x-auto">
-					<code className="font-mono text-sm text-gray-800 dark:text-gray-200">
+				<pre className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-3 my-2 overflow-x-auto">
+					<code className="font-mono text-sm text-gray-800 dark:text-zinc-200">
 						{block.text}
 					</code>
 				</pre>
···
 			);
 
 		case "com.deckbelcher.richtext#horizontalRuleBlock":
-			return <hr className="my-4 border-gray-300 dark:border-slate-600" />;
+			return <hr className="my-4 border-gray-300 dark:border-zinc-600" />;
 
 		default: {
 			const para = block as ParagraphBlock;
···
 
 		case "com.deckbelcher.richtext.facet#code":
 			return (
-				<code className="bg-gray-100 dark:bg-slate-800 px-1 rounded font-mono text-sm">
+				<code className="bg-gray-100 dark:bg-zinc-800 px-1 rounded font-mono text-sm">
 					{content}
 				</code>
 			);

src/components/richtext/RichtextSection.tsx

···
 					availableTags={availableTags}
 				/>
 				<div className="flex items-center justify-between">
-					<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+					<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-zinc-300">
 						{isSaving && <span>Saving...</span>}
 						{!isSaving && isDirty && <span>Unsaved changes</span>}
 						{!isSaving && !isDirty && hasContent && <span>Saved</span>}
···
 					<button
 						type="button"
 						onClick={() => setIsEditing(false)}
-						className="px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-700 dark:text-gray-300"
+						className="px-3 py-1.5 text-sm font-medium rounded-md bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-300"
 					>
 						Done
 					</button>
···
 			<button
 				type="button"
 				onClick={() => setIsEditing(true)}
-				className="text-sm text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 italic"
+				className="text-sm text-gray-400 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 italic"
 			>
 				{emptyText}
 			</button>
···
 				>
 					<RichtextRenderer
 						doc={document}
-						className="text-gray-700 dark:text-gray-300"
+						className="text-gray-700 dark:text-zinc-300"
 					/>
 				</div>
 
 				{needsTruncation && !isExpanded && (
-					<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-slate-900 to-transparent pointer-events-none" />
+					<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-zinc-900 to-transparent pointer-events-none" />
 				)}
 			</div>
 
···
 					<button
 						type="button"
 						onClick={() => setIsExpanded(!isExpanded)}
-						className="inline-flex items-center gap-1 px-2 py-1 text-sm font-medium rounded-md bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-700 dark:text-gray-300"
+						className="inline-flex items-center gap-1 px-2 py-1 text-sm font-medium rounded-md bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-300"
 					>
 						{isExpanded ? (
 							<>
···
 					<button
 						type="button"
 						onClick={() => setIsEditing(true)}
-						className="inline-flex items-center gap-1 px-2 py-1 text-sm font-medium rounded-md bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-700 dark:text-gray-300"
+						className="inline-flex items-center gap-1 px-2 py-1 text-sm font-medium rounded-md bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-300"
 					>
 						<Pencil className="w-4 h-4" />
 						Edit

src/components/richtext/Toolbar.tsx

···
 		// Render placeholder to reserve space and prevent layout shift
 		// Height matches: p-2 (8px*2) + button p-1.5 (6px*2) + icon h-4 (16px) = 44px
 		return (
-			<div className="flex flex-wrap items-center gap-1 p-2 border-b border-gray-300 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50 min-h-11" />
+			<div className="flex flex-wrap items-center gap-1 p-2 border-b border-gray-300 dark:border-zinc-600 bg-gray-50 dark:bg-zinc-800/50 min-h-11" />
 		);
 	}
 
···
 
 	return (
 		<>
-			<div className="flex flex-wrap items-center gap-1 p-2 border-b border-gray-300 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50">
+			<div className="flex flex-wrap items-center gap-1 p-2 border-b border-gray-300 dark:border-zinc-600 bg-gray-50 dark:bg-zinc-800/50">
 				{/* History */}
 				<ToolbarButton onClick={runUndo} active={false} title="Undo (Cmd+Z)">
 					<Undo className="w-4 h-4" />
···
 }
 
 function ToolbarDivider() {
-	return <div className="w-px h-5 bg-gray-300 dark:bg-slate-600 mx-1" />;
+	return <div className="w-px h-5 bg-gray-300 dark:bg-zinc-600 mx-1" />;
 }
 
 interface ToolbarButtonProps {
···
 			className={`p-1.5 rounded transition-colors ${
 				active
 					? "bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400"
-					: "hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-600 dark:text-gray-400"
+					: "hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-600 dark:text-zinc-300"
 			}`}
 		>
 			{children}

src/components/richtext/schema.ts

···
 				"blockquote",
 				{
 					class:
-						"border-l-4 border-gray-300 dark:border-slate-600 pl-4 my-2 text-gray-600 dark:text-gray-400 italic",
+						"border-l-4 border-gray-300 dark:border-zinc-600 pl-4 my-2 text-gray-600 dark:text-zinc-300 italic",
 				},
 				0,
 			];
···
 		group: "block",
 		parseDOM: [{ tag: "hr" }],
 		toDOM() {
-			return ["hr", { class: "my-4 border-gray-300 dark:border-slate-600" }];
+			return ["hr", { class: "my-4 border-gray-300 dark:border-zinc-600" }];
 		},
 	},
 
···
 				"pre",
 				{
 					class:
-						"bg-gray-100 dark:bg-slate-800 rounded-lg p-3 my-2 overflow-x-auto",
+						"bg-gray-100 dark:bg-zinc-800 rounded-lg p-3 my-2 overflow-x-auto",
 					...(node.attrs.params ? { "data-params": node.attrs.params } : {}),
 				},
 				[
 					"code",
-					{ class: "font-mono text-sm text-gray-800 dark:text-gray-200" },
+					{ class: "font-mono text-sm text-gray-800 dark:text-zinc-200" },
 					0,
 				],
 			];
···
 				"code",
 				{
 					class:
-						"bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-gray-200 px-1 py-0.5 rounded font-mono text-sm",
+						"bg-gray-100 dark:bg-zinc-700 text-gray-800 dark:text-zinc-200 px-1 py-0.5 rounded font-mono text-sm",
 				},
 			];
 		},

src/components/social/BacklinkModal.tsx

···
 					role="dialog"
 					aria-modal="true"
 					aria-labelledby={titleId}
-					className="bg-white dark:bg-slate-900 rounded-lg shadow-2xl max-w-xl w-full pointer-events-auto border border-gray-300 dark:border-slate-700 flex flex-col h-[70vh]"
+					className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-xl w-full pointer-events-auto border border-gray-300 dark:border-zinc-600 flex flex-col h-[70vh]"
 				>
 					{/* Header */}
-					<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-slate-800 flex-shrink-0">
+					<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-zinc-700 flex-shrink-0">
 						<div className="flex items-center gap-3">
 							<div className={`p-2 ${config.iconBg} rounded-full`}>
 								<Icon className={`w-5 h-5 ${config.iconColor}`} />
···
 								>
 									{config.title}
 								</h2>
-								<p className="text-sm text-gray-500 dark:text-gray-400">
+								<p className="text-sm text-gray-500 dark:text-zinc-300">
 									{total.toLocaleString()}{" "}
 									{total === 1
 										? type === "likes"
···
 						<button
 							type="button"
 							onClick={onClose}
-							className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-lg transition-colors"
+							className="p-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
 							aria-label="Close"
 						>
-							<X className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+							<X className="w-5 h-5 text-gray-500 dark:text-zinc-300" />
 						</button>
 					</div>
 
···
 								))}
 							</div>
 						) : allRecords.length === 0 ? (
-							<p className="text-gray-600 dark:text-gray-400 text-center py-4">
+							<p className="text-gray-600 dark:text-zinc-300 text-center py-4">
 								No {type} yet
 							</p>
 						) : (

src/components/social/BacklinkRow.tsx

···
 		<Link
 			to="/profile/$did"
 			params={{ did }}
-			className="block px-3 py-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-lg text-gray-900 dark:text-gray-100"
+			className="block px-3 py-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg text-gray-900 dark:text-zinc-100"
 		>
 			{isLoading ? (
-				<span className="inline-block w-24 h-4 bg-gray-200 dark:bg-slate-700 rounded animate-pulse" />
+				<span className="inline-block w-24 h-4 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse" />
 			) : (
 				<span>@{handle ?? did.slice(0, 20)}</span>
 			)}
···
 
 export function RowSkeleton() {
 	return (
-		<div className="p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg">
-			<div className="h-5 w-32 bg-gray-200 dark:bg-slate-700 rounded animate-pulse mb-2" />
-			<div className="h-4 w-48 bg-gray-200 dark:bg-slate-700 rounded animate-pulse" />
+		<div className="p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg">
+			<div className="h-5 w-32 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse mb-2" />
+			<div className="h-4 w-48 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse" />
 		</div>
 	);
 }

src/components/social/SocialStats.tsx

···
 	const statBase = "flex items-center gap-1 p-2 rounded-lg";
 	const buttonBase = `${statBase} transition-colors ${
 		session
-			? "hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
+			? "hover:bg-gray-100 dark:hover:bg-zinc-800 cursor-pointer"
 			: "cursor-default opacity-75"
 	}`;
 
···
 						className={`w-5 h-5 ${
 							isLikedByUser
 								? "text-rose-400 dark:text-red-400"
-								: "text-gray-600 dark:text-gray-400"
+								: "text-gray-600 dark:text-zinc-300"
 						}`}
 						fill={isLikedByUser ? "currentColor" : "none"}
 					/>
···
 						className={`text-sm tabular-nums px-1 py-2 rounded ${isLikeLoading ? "opacity-50" : ""} ${
 							isLikedByUser
 								? "text-rose-400 dark:text-red-400"
-								: "text-gray-600 dark:text-gray-400"
+								: "text-gray-600 dark:text-zinc-300"
 						} ${likeCount > 0 ? "hover:underline cursor-pointer" : "cursor-default"}`}
 						title={likeCount > 0 ? "See who liked this" : undefined}
 					>
···
 						className={`w-5 h-5 ${
 							isSavedByUser
 								? "text-blue-500 dark:text-blue-400"
-								: "text-gray-600 dark:text-gray-400"
+								: "text-gray-600 dark:text-zinc-300"
 						}`}
 						fill={isSavedByUser ? "currentColor" : "none"}
 					/>
···
 						className={`text-sm tabular-nums px-1 py-2 rounded ${isSaveLoading ? "opacity-50" : ""} ${
 							isSavedByUser
 								? "text-blue-500 dark:text-blue-400"
-								: "text-gray-600 dark:text-gray-400"
+								: "text-gray-600 dark:text-zinc-300"
 						} ${saveCount > 0 ? "hover:underline cursor-pointer" : "cursor-default"}`}
 						title={saveCount > 0 ? "See lists with this item" : undefined}
 					>
···
 						className={`${statBase} ${
 							isInUserDeck
 								? "text-purple-500 dark:text-purple-400"
-								: "text-gray-600 dark:text-gray-400"
+								: "text-gray-600 dark:text-zinc-300"
 						}`}
 						title={isInUserDeck ? "In your deck" : "Decks containing this card"}
 					>
···
 						className={`text-sm tabular-nums px-1 py-2 rounded ${isDeckCountLoading ? "opacity-50" : ""} ${
 							isInUserDeck
 								? "text-purple-500 dark:text-purple-400"
-								: "text-gray-600 dark:text-gray-400"
+								: "text-gray-600 dark:text-zinc-300"
 						} ${deckCount > 0 ? "hover:underline cursor-pointer" : "cursor-default"}`}
 						title={deckCount > 0 ? "See decks with this card" : undefined}
 					>
···
 					<button
 						type="button"
 						onClick={onCommentClick}
-						className={`${statBase} text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer transition-colors`}
+						className={`${statBase} text-gray-600 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 cursor-pointer transition-colors`}
 						aria-label="Comments"
 						title="Comments"
 					>
···
 					</button>
 					{showCount && !hideCommentCount && (
 						<span
-							className={`text-sm tabular-nums px-1 py-2 text-gray-600 dark:text-gray-400 ${commentCountQuery.isLoading ? "opacity-50" : ""}`}
+							className={`text-sm tabular-nums px-1 py-2 text-gray-600 dark:text-zinc-300 ${commentCountQuery.isLoading ? "opacity-50" : ""}`}
 						>
 							{commentCount}
 						</span>

src/routes/__root.tsx

···
 	}),
 
 	notFoundComponent: () => (
-		<div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-900 p-4">
+		<div className="min-h-screen flex items-center justify-center bg-white dark:bg-zinc-900 p-4">
 			<div className="text-center">
 				<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
 					404
 				</h1>
-				<p className="text-gray-600 dark:text-gray-400 mb-6">Page not found</p>
+				<p className="text-gray-600 dark:text-zinc-300 mb-6">Page not found</p>
 			</div>
 		</div>
 	),

src/routes/card/$id.tsx

···
 
 	if (!isValidId) {
 		return (
-			<div className="min-h-screen bg-white dark:bg-slate-900 flex items-center justify-center">
+			<div className="min-h-screen bg-white dark:bg-zinc-900 flex items-center justify-center">
 				<p className="text-red-600 dark:text-red-400 text-lg">
 					Invalid card ID format
 				</p>
···
 
 	if (cardLoading) {
 		return (
-			<div className="min-h-screen bg-white dark:bg-slate-900">
+			<div className="min-h-screen bg-white dark:bg-zinc-900">
 				<div className="max-w-7xl mx-auto px-6 py-8">
 					<div className="flex items-center justify-center py-20">
-						<p className="text-gray-600 dark:text-gray-400 text-lg">
+						<p className="text-gray-600 dark:text-zinc-300 text-lg">
 							Loading card...
 						</p>
 					</div>
···
 
 	if (!card) {
 		return (
-			<div className="min-h-screen bg-white dark:bg-slate-900 flex items-center justify-center">
+			<div className="min-h-screen bg-white dark:bg-zinc-900 flex items-center justify-center">
 				<p className="text-red-600 dark:text-red-400 text-lg">Card not found</p>
 			</div>
 		);
···
 		.sort((a, b) => (b.released_at ?? "").localeCompare(a.released_at ?? ""));
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			<div className="max-w-7xl mx-auto px-6 py-8">
 				<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
-					<div className="sticky top-0 z-10 bg-white dark:bg-slate-900 py-4 -mx-6 px-6 lg:mx-0 lg:px-0 lg:py-0 lg:bg-transparent lg:dark:bg-transparent lg:top-8 flex justify-center lg:justify-end">
+					<div className="sticky top-0 z-10 bg-white dark:bg-zinc-900 py-4 -mx-6 px-6 lg:mx-0 lg:px-0 lg:py-0 lg:bg-transparent lg:dark:bg-transparent lg:top-8 flex justify-center lg:justify-end">
 						<CardImage
 							card={displayCard}
 							size="large"
···
 						{getAllFaces(card).map((face, idx) => (
 							<div key={face.name}>
 								{idx > 0 && (
-									<div className="border-t border-gray-300 dark:border-slate-600 mb-4" />
+									<div className="border-t border-gray-300 dark:border-zinc-600 mb-4" />
 								)}
 								<FaceInfo
 									face={face}
···
 							}}
 						>
 							<div className="min-w-0">
-								<p className="text-gray-600 dark:text-gray-400">Set</p>
+								<p className="text-gray-600 dark:text-zinc-300">Set</p>
 								<p
 									className="text-gray-900 dark:text-white truncate"
 									title={
···
 											{displayCard.set_name} ({displayCard.set?.toUpperCase()})
 										</>
 									) : (
-										<span className="text-gray-400 dark:text-gray-600">—</span>
+										<span className="text-gray-400 dark:text-zinc-600">—</span>
 									)}
 								</p>
 							</div>
 							<div className="min-w-0">
-								<p className="text-gray-600 dark:text-gray-400">Rarity</p>
+								<p className="text-gray-600 dark:text-zinc-300">Rarity</p>
 								<p className="text-gray-900 dark:text-white capitalize truncate">
 									{displayCard.rarity ?? (
-										<span className="text-gray-400 dark:text-gray-600">—</span>
+										<span className="text-gray-400 dark:text-zinc-600">—</span>
 									)}
 								</p>
 							</div>
 							<div className="min-w-0">
-								<p className="text-gray-600 dark:text-gray-400">Artist</p>
+								<p className="text-gray-600 dark:text-zinc-300">Artist</p>
 								<p
 									className="text-gray-900 dark:text-white truncate"
 									title={displayCard.artist}
 								>
 									{displayCard.artist ?? (
-										<span className="text-gray-400 dark:text-gray-600">—</span>
+										<span className="text-gray-400 dark:text-zinc-600">—</span>
 									)}
 								</p>
 							</div>
 							<div className="min-w-0">
-								<p className="text-gray-600 dark:text-gray-400">
+								<p className="text-gray-600 dark:text-zinc-300">
 									Collector Number
 								</p>
 								<p className="text-gray-900 dark:text-white truncate">
 									{displayCard.collector_number ?? (
-										<span className="text-gray-400 dark:text-gray-600">—</span>
+										<span className="text-gray-400 dark:text-zinc-600">—</span>
 									)}
 								</p>
 							</div>
···
 						<div className="h-10 overflow-x-auto overflow-y-hidden">
 							{volatileLoading ? (
 								<div className="flex gap-3 items-center">
-									<span className="px-2.5 py-1 w-16 bg-gray-200 dark:bg-slate-700 rounded text-sm animate-pulse">
+									<span className="px-2.5 py-1 w-16 bg-gray-200 dark:bg-zinc-700 rounded text-sm animate-pulse">
 										&nbsp;
 									</span>
-									<span className="px-2.5 py-1 w-20 bg-gray-200 dark:bg-slate-700 rounded text-sm animate-pulse">
+									<span className="px-2.5 py-1 w-20 bg-gray-200 dark:bg-zinc-700 rounded text-sm animate-pulse">
 										&nbsp;
 									</span>
-									<span className="px-2.5 py-1 w-24 bg-gray-200 dark:bg-slate-700 rounded text-sm animate-pulse">
+									<span className="px-2.5 py-1 w-24 bg-gray-200 dark:bg-zinc-700 rounded text-sm animate-pulse">
 										&nbsp;
 									</span>
 								</div>
···
 									volatileData.edhrecRank) ? (
 								<div className="flex gap-3 items-center">
 									{volatileData.edhrecRank && (
-										<span className="px-2.5 py-1 bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded text-sm whitespace-nowrap">
+										<span className="px-2.5 py-1 bg-gray-100 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 rounded text-sm whitespace-nowrap">
 											#{volatileData.edhrecRank.toLocaleString()} EDHREC
 										</span>
 									)}
···
 								<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
 									Printings
 								</h2>
-								<div className="max-h-96 overflow-y-auto border border-gray-300 dark:border-slate-700 rounded-lg p-3 bg-gray-50 dark:bg-slate-800/50">
+								<div className="max-h-96 overflow-y-auto border border-gray-300 dark:border-zinc-600 rounded-lg p-3 bg-gray-50 dark:bg-zinc-800/50">
 									<div className="flex flex-wrap gap-2">
 										{Array.from({ length: 8 }).map((_, i) => (
 											<div
 												// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton
 												key={i}
-												className="h-8 w-32 bg-gray-300 dark:bg-slate-700 rounded animate-pulse"
+												className="h-8 w-32 bg-gray-300 dark:bg-zinc-700 rounded animate-pulse"
 											/>
 										))}
 									</div>
···
 								</h2>
 								<div
 									ref={printingsContainerRef}
-									className="max-h-96 overflow-y-auto border border-gray-300 dark:border-slate-700 rounded-lg p-3 bg-gray-50 dark:bg-slate-800/50"
+									className="max-h-96 overflow-y-auto border border-gray-300 dark:border-zinc-600 rounded-lg p-3 bg-gray-50 dark:bg-zinc-800/50"
 								>
 									<div className="flex flex-wrap gap-2">
 										{allPrintings.map((printing) => (
···
 												onMouseLeave={() => setHoveredPrintingId(null)}
 												className={`px-3 py-1.5 text-sm rounded transition-colors whitespace-nowrap ${
 													printing.id === id
-														? "bg-cyan-500 text-white font-medium"
-														: "bg-gray-200 dark:bg-slate-700 text-gray-900 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-slate-600"
+														? "bg-cyan-400 text-gray-900 font-medium"
+														: "bg-gray-200 dark:bg-zinc-700 text-gray-900 dark:text-zinc-200 hover:bg-gray-300 dark:hover:bg-zinc-600"
 												}`}
 											>
 												{printing.set_name}
···
 						{card.legalities && <LegalityTable legalities={card.legalities} />}
 
 						{card.oracle_id && (
-							<div className="border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden">
+							<div className="border border-gray-200 dark:border-zinc-600 rounded-lg overflow-hidden">
 								<CommentsPanel
 									subject={{
 										$type: "com.deckbelcher.social.comment#cardSubject",
···
 				<div className="flex items-center justify-between gap-3">
 					{face.type_line && (
 						<p
-							className={`text-gray-600 dark:text-gray-400 ${primary ? "text-lg" : ""}`}
+							className={`text-gray-600 dark:text-zinc-300 ${primary ? "text-lg" : ""}`}
 						>
 							{face.type_line}
 						</p>
···
 			</div>
 
 			{face.oracle_text && (
-				<div className="bg-gray-100 dark:bg-slate-800 rounded-lg p-4 border border-gray-300 dark:border-slate-700 text-gray-900 dark:text-gray-100">
+				<div className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-4 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-zinc-100">
 					<OracleText text={face.oracle_text} />
 				</div>
 			)}
 
 			{hasStats && (
-				<div className="flex gap-4 text-gray-700 dark:text-gray-300">
+				<div className="flex gap-4 text-gray-700 dark:text-zinc-300">
 					{face.power && face.toughness && (
 						<span>
-							<span className="text-gray-600 dark:text-gray-400">P/T:</span>{" "}
+							<span className="text-gray-600 dark:text-zinc-300">P/T:</span>{" "}
 							<span className="font-semibold">
 								{face.power}/{face.toughness}
 							</span>
···
 					)}
 					{face.loyalty && (
 						<span>
-							<span className="text-gray-600 dark:text-gray-400">Loyalty:</span>{" "}
+							<span className="text-gray-600 dark:text-zinc-300">Loyalty:</span>{" "}
 							<span className="font-semibold">{face.loyalty}</span>
 						</span>
 					)}
 					{face.defense && (
 						<span>
-							<span className="text-gray-600 dark:text-gray-400">Defense:</span>{" "}
+							<span className="text-gray-600 dark:text-zinc-300">Defense:</span>{" "}
 							<span className="font-semibold">{face.defense}</span>
 						</span>
 					)}
···
 			<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
 				{FORMAT_GROUPS.map((group) => (
 					<div key={group.label}>
-						<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1.5">
+						<h3 className="text-sm font-medium text-gray-500 dark:text-zinc-300 mb-1.5">
 							{group.label}
 						</h3>
 						<div className="space-y-1">
···
 										key={format.value}
 										className="flex items-center justify-between text-sm"
 									>
-										<span className="text-gray-700 dark:text-gray-300">
+										<span className="text-gray-700 dark:text-zinc-300">
 											{format.label}
 										</span>
 										<LegalityBadge legality={legality} />
···
 			"bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-300",
 		banned: "bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300",
 		not_legal:
-			"bg-gray-100 dark:bg-slate-700/50 text-gray-500 dark:text-gray-500",
+			"bg-gray-100 dark:bg-zinc-700/50 text-gray-500 dark:text-zinc-400",
 	};
 
 	const labels: Record<string, string> = {

src/routes/cards/index.tsx

···
 	const firstPage = firstPageQuery.data;
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			<div className="max-w-7xl w-full mx-auto px-6 pt-8 pb-4">
 				<div className="mb-4 flex flex-col gap-2">
 					<div className="flex items-center justify-between gap-2">
···
 											replace: true,
 										})
 									}
-									className="appearance-none h-9 w-9 sm:w-auto pl-2 sm:pl-3 pr-2 sm:pr-8 py-1.5 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-transparent sm:text-gray-900 dark:sm:text-white text-sm focus:outline-none focus:border-cyan-500 transition-colors cursor-pointer"
+									className="appearance-none h-9 w-9 sm:w-auto pl-2 sm:pl-3 pr-2 sm:pr-8 py-1.5 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-transparent sm:text-gray-900 dark:sm:text-white text-sm focus:outline-none focus:border-cyan-500 transition-colors cursor-pointer"
 								>
 									{SORT_OPTIONS.map((opt) => (
 										<option key={opt.value} value={opt.value}>
···
 											replace: true,
 										})
 									}
-									className="appearance-none h-9 w-9 sm:w-auto pl-2 sm:pl-3 pr-2 sm:pr-8 py-1.5 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-transparent sm:text-gray-900 dark:sm:text-white text-sm focus:outline-none focus:border-cyan-500 transition-colors cursor-pointer"
+									className="appearance-none h-9 w-9 sm:w-auto pl-2 sm:pl-3 pr-2 sm:pr-8 py-1.5 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-transparent sm:text-gray-900 dark:sm:text-white text-sm focus:outline-none focus:border-cyan-500 transition-colors cursor-pointer"
 								>
 									<option value="">then...</option>
 									{SORT_OPTIONS.filter(
···
 						<div className="text-sm mt-2 space-y-1">
 							{firstPage?.description && (
 								<p
-									className={`text-gray-500 dark:text-gray-400 ${isDebouncing ? "opacity-50" : ""}`}
+									className={`text-gray-500 dark:text-zinc-300 ${isDebouncing ? "opacity-50" : ""}`}
 								>
 									<OracleText text={firstPage.description} />
 								</p>

src/routes/deck/new.tsx

···
 	// Cube gets special treatment
 	if (info.isCube) {
 		return (
-			<div className="bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-6">
+			<div className="bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-xl p-6">
 				<div className="flex items-baseline justify-between gap-4 mb-4">
 					<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
 						{displayName}
 					</h3>
 					{info.tagline && (
-						<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+						<span className="text-sm text-gray-500 dark:text-zinc-300 whitespace-nowrap">
 							{info.tagline}
 						</span>
 					)}
···
 					</span>
 				</div>
 
-				<p className="text-sm text-gray-600 dark:text-gray-400">
+				<p className="text-sm text-gray-600 dark:text-zinc-300">
 					Set your own rules for deck size, card pool, and restrictions.
 				</p>
 			</div>
···
 	}
 
 	return (
-		<div className="bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-6">
+		<div className="bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-xl p-6">
 			<div className="flex items-baseline justify-between gap-4 mb-4">
 				<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
 					{displayName}
 				</h3>
 				{info.tagline && (
-					<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+					<span className="text-sm text-gray-500 dark:text-zinc-300 whitespace-nowrap">
 						{info.tagline}
 					</span>
 				)}
···
 				)}
 
 				{info.hasSideboard && (
-					<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 dark:bg-slate-700/50 text-slate-600 dark:text-slate-300 text-sm font-medium rounded-full">
+					<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 dark:bg-zinc-700/50 text-slate-600 dark:text-zinc-300 text-sm font-medium rounded-full">
 						15-card sideboard
 					</span>
 				)}
 			</div>
 
 			{info.commanderType && (
-				<p className="text-sm text-gray-600 dark:text-gray-400">
+				<p className="text-sm text-gray-600 dark:text-zinc-300">
 					{getCommanderHint(info.commanderType)}
 				</p>
 			)}
···
 	};
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			<div className="max-w-xl mx-auto px-6 py-16">
 				<div className="text-center mb-10">
 					<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
 						New Deck
 					</h1>
-					<p className="text-gray-600 dark:text-gray-400">
+					<p className="text-gray-600 dark:text-zinc-300">
 						Choose a format and give your deck a name
 					</p>
 				</div>
···
 					<div>
 						<label
 							htmlFor={nameId}
-							className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+							className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"
 						>
 							Deck Name
 						</label>
···
 							onChange={(e) => setName(e.target.value)}
 							placeholder="Untitled Deck"
 							autoComplete="off"
-							className="w-full px-4 py-3 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-colors"
+							className="w-full px-4 py-3 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-colors"
 						/>
 					</div>
 
 					<div>
 						<label
 							htmlFor={formatId}
-							className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+							className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"
 						>
 							Format
 						</label>
···
 							id={formatId}
 							value={format}
 							onChange={(e) => setFormat(e.target.value)}
-							className="w-full px-4 py-3 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-colors"
+							className="w-full px-4 py-3 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-colors"
 						>
 							{FORMAT_GROUPS.map((group) => (
 								<optgroup key={group.label} label={group.label}>
···
 						<button
 							type="submit"
 							disabled={mutation.isPending || !name.trim()}
-							className="flex-1 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 disabled:bg-gray-400 dark:disabled:bg-slate-600 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
+							className="flex-1 px-6 py-3 bg-cyan-400 hover:bg-cyan-300 disabled:bg-gray-400 dark:disabled:bg-zinc-600 disabled:cursor-not-allowed text-gray-900 font-medium rounded-lg transition-colors"
 						>
 							{mutation.isPending ? "Creating..." : "Create Deck"}
 						</button>
 						<button
 							type="button"
 							onClick={() => navigate({ to: "/" })}
-							className="px-6 py-3 bg-gray-200 dark:bg-slate-800 hover:bg-gray-300 dark:hover:bg-slate-700 text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
+							className="px-6 py-3 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
 						>
 							Cancel
 						</button>

src/routes/dev/migrate.tsx

···
 	};
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900 p-8">
+		<div className="min-h-screen bg-white dark:bg-zinc-900 p-8">
 			<div className="max-w-4xl mx-auto space-y-6">
 				<div>
 					<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
 						Record Migration
 					</h1>
-					<p className="text-gray-600 dark:text-gray-400">
+					<p className="text-gray-600 dark:text-zinc-300">
 						Migrate old format records (scryfallId) to new format (cardRef with
 						scryfallUri + oracleUri).
 					</p>
···
 					<div className="space-y-2">
 						<label
 							htmlFor={inputId}
-							className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+							className="block text-sm font-medium text-gray-700 dark:text-zinc-300"
 						>
 							Old Format (paste JSON)
 						</label>
···
 							id={inputId}
 							value={input}
 							onChange={(e) => setInput(e.target.value)}
-							className="w-full h-96 p-3 font-mono text-xs bg-gray-50 dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent text-gray-900 dark:text-gray-100"
+							className="w-full h-96 p-3 font-mono text-xs bg-gray-50 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent text-gray-900 dark:text-zinc-100"
 							placeholder='{"$type": "com.deckbelcher.deck.list", ...}'
 						/>
 					</div>
···
 					<div className="space-y-2">
 						<label
 							htmlFor={outputId}
-							className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+							className="block text-sm font-medium text-gray-700 dark:text-zinc-300"
 						>
 							New Format (output)
 						</label>
···
 							id={outputId}
 							value={output}
 							readOnly
-							className="w-full h-96 p-3 font-mono text-xs bg-gray-100 dark:bg-slate-800/50 border border-gray-300 dark:border-slate-600 rounded-lg text-gray-900 dark:text-gray-100"
+							className="w-full h-96 p-3 font-mono text-xs bg-gray-100 dark:bg-zinc-800/50 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-zinc-100"
 							placeholder="Migrated output will appear here..."
 						/>
 					</div>
···
 				)}
 
 				<details className="text-sm">
-					<summary className="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium">
+					<summary className="cursor-pointer text-gray-600 dark:text-zinc-300 hover:text-gray-800 dark:hover:text-zinc-200 font-medium">
 						Migration Details
 					</summary>
-					<div className="mt-2 p-4 bg-gray-50 dark:bg-slate-800 rounded-lg text-gray-700 dark:text-gray-300 space-y-2">
+					<div className="mt-2 p-4 bg-gray-50 dark:bg-zinc-800 rounded-lg text-gray-700 dark:text-zinc-300 space-y-2">
 						<p>
 							<strong>Old format:</strong>{" "}
-							<code className="text-xs bg-gray-200 dark:bg-slate-700 px-1 rounded">
+							<code className="text-xs bg-gray-200 dark:bg-zinc-700 px-1 rounded">
 								scryfallId: "uuid"
 							</code>
 						</p>
 						<p>
 							<strong>New format:</strong>{" "}
-							<code className="text-xs bg-gray-200 dark:bg-slate-700 px-1 rounded">
+							<code className="text-xs bg-gray-200 dark:bg-zinc-700 px-1 rounded">
 								{`ref: { scryfallUri: "scry:uuid", oracleUri: "oracle:uuid" }`}
 							</code>
 						</p>
-						<p className="text-xs text-gray-500 dark:text-gray-400">
+						<p className="text-xs text-gray-500 dark:text-zinc-300">
 							Supports both com.deckbelcher.deck.list and
 							com.deckbelcher.collection.list records.
 						</p>

src/routes/dev/pm-demo.tsx

···
 	}, [savedDoc]);
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900 p-8">
+		<div className="min-h-screen bg-white dark:bg-zinc-900 p-8">
 			<div className="max-w-3xl mx-auto space-y-8">
 				<div>
 					<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
 						ProseMirror Editor Demo
 					</h1>
-					<p className="text-gray-600 dark:text-gray-400">
+					<p className="text-gray-600 dark:text-zinc-300">
 						Testing the new WYSIWYG editor. Use toolbar buttons or markdown
 						shortcuts.
 					</p>
···
 					<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
 						Read-only View
 					</h2>
-					<div className="p-4 border border-gray-200 dark:border-slate-700 rounded-lg bg-gray-50 dark:bg-slate-800/50">
+					<div className="p-4 border border-gray-200 dark:border-zinc-600 rounded-lg bg-gray-50 dark:bg-zinc-800/50">
 						<RichtextSection document={savedDoc} readOnly />
 					</div>
 				</div>
 
 				{lastSaved && (
-					<p className="text-sm text-gray-500 dark:text-gray-400">
+					<p className="text-sm text-gray-500 dark:text-zinc-300">
 						Last saved: {lastSaved}
 					</p>
 				)}
 
 				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 					<details className="text-sm" open>
-						<summary className="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium">
+						<summary className="cursor-pointer text-gray-600 dark:text-zinc-300 hover:text-gray-800 dark:hover:text-zinc-200 font-medium">
 							Lexicon (storage format)
 						</summary>
-						<pre className="mt-2 p-4 bg-gray-100 dark:bg-slate-800 rounded overflow-auto text-xs max-h-96">
+						<pre className="mt-2 p-4 bg-gray-100 dark:bg-zinc-800 rounded overflow-auto text-xs max-h-96">
 							{JSON.stringify(savedDoc, null, 2)}
 						</pre>
 					</details>
 
 					<details className="text-sm" open>
-						<summary className="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium">
+						<summary className="cursor-pointer text-gray-600 dark:text-zinc-300 hover:text-gray-800 dark:hover:text-zinc-200 font-medium">
 							Tree (ProseMirror)
 						</summary>
-						<pre className="mt-2 p-4 bg-gray-100 dark:bg-slate-800 rounded overflow-auto text-xs max-h-96">
+						<pre className="mt-2 p-4 bg-gray-100 dark:bg-zinc-800 rounded overflow-auto text-xs max-h-96">
 							{JSON.stringify(pmTreeDoc, null, 2)}
 						</pre>
 					</details>
 				</div>
 
 				<details className="text-sm">
-					<summary className="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium">
+					<summary className="cursor-pointer text-gray-600 dark:text-zinc-300 hover:text-gray-800 dark:hover:text-zinc-200 font-medium">
 						Roundtrip (lexicon → tree → lexicon)
 					</summary>
-					<pre className="mt-2 p-4 bg-gray-100 dark:bg-slate-800 rounded overflow-auto text-xs max-h-96">
+					<pre className="mt-2 p-4 bg-gray-100 dark:bg-zinc-800 rounded overflow-auto text-xs max-h-96">
 						{JSON.stringify(roundtrippedDoc, null, 2)}
 					</pre>
 					{roundtrippedDoc && savedDoc && (

src/routes/index.tsx

···
 	const { session } = useAuth();
 
 	return (
-		<div className="min-h-[calc(100vh-64px)] bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-950">
+		<div className="min-h-[calc(100vh-64px)] bg-gradient-to-b from-slate-50 to-white dark:from-zinc-900 dark:to-zinc-950">
 			<div className="max-w-5xl mx-auto px-6 py-16 md:py-24">
 				<div className="text-center mb-16">
 					<h1 className="inline-block text-5xl md:text-6xl font-medium text-gray-900 dark:text-white mb-4 tracking-tight font-display [font-variation-settings:'WONK'_1,'SOFT'_70,'opsz'_72] motion-safe:hover:[font-variation-settings:'WONK'_1,'SOFT'_100,'opsz'_25] motion-safe:transition-[font-variation-settings] motion-safe:duration-500 ease-in-out cursor-default">
 						deck belcher dot com
 					</h1>
-					<p className="text-xl text-gray-600 dark:text-gray-400 max-w-xl mx-auto">
+					<p className="text-xl text-gray-600 dark:text-zinc-300 max-w-xl mx-auto">
 						organize, build, and share decks on the atmosphere
 					</p>
 				</div>
···
 					{session ? (
 						<Link
 							to="/deck/new"
-							className="group flex flex-col items-center p-6 bg-white dark:bg-slate-800/50 border border-gray-200 dark:border-slate-700 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
+							className="group flex flex-col items-center p-6 bg-white dark:bg-zinc-800/50 border border-gray-200 dark:border-zinc-600 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
 						>
 							<div className="w-12 h-12 bg-cyan-100 dark:bg-cyan-900/30 rounded-full flex items-center justify-center mb-4 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-800/40 transition-colors">
 								<Plus size={24} className="text-cyan-600 dark:text-cyan-400" />
···
 							<span className="font-semibold text-gray-900 dark:text-white motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'wght'_600] motion-safe:group-hover:[font-variation-settings:'wght'_700]">
 								Create Deck
 							</span>
-							<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
+							<span className="text-sm text-gray-500 dark:text-zinc-300 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
 								Start building
 							</span>
 						</Link>
 					) : (
 						<Link
 							to="/signin"
-							className="group flex flex-col items-center p-6 bg-white dark:bg-slate-800/50 border border-gray-200 dark:border-slate-700 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
+							className="group flex flex-col items-center p-6 bg-white dark:bg-zinc-800/50 border border-gray-200 dark:border-zinc-600 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
 						>
 							<div className="w-12 h-12 bg-cyan-100 dark:bg-cyan-900/30 rounded-full flex items-center justify-center mb-4 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-800/40 transition-colors">
 								<User size={24} className="text-cyan-600 dark:text-cyan-400" />
···
 							<span className="font-semibold text-gray-900 dark:text-white motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'wght'_600] motion-safe:group-hover:[font-variation-settings:'wght'_700]">
 								Sign In
 							</span>
-							<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
+							<span className="text-sm text-gray-500 dark:text-zinc-300 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
 								Get started
 							</span>
 						</Link>
···
 						<Link
 							to="/profile/$did"
 							params={{ did: session.info.sub }}
-							className="group flex flex-col items-center p-6 bg-white dark:bg-slate-800/50 border border-gray-200 dark:border-slate-700 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
+							className="group flex flex-col items-center p-6 bg-white dark:bg-zinc-800/50 border border-gray-200 dark:border-zinc-600 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
 						>
-							<div className="w-12 h-12 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-gray-200 dark:group-hover:bg-slate-600 transition-colors">
-								<User size={24} className="text-gray-600 dark:text-gray-300" />
+							<div className="w-12 h-12 bg-gray-100 dark:bg-zinc-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-gray-200 dark:group-hover:bg-zinc-600 transition-colors">
+								<User size={24} className="text-gray-600 dark:text-zinc-300" />
 							</div>
 							<span className="font-semibold text-gray-900 dark:text-white motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'wght'_600] motion-safe:group-hover:[font-variation-settings:'wght'_700]">
 								My Decks
 							</span>
-							<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
+							<span className="text-sm text-gray-500 dark:text-zinc-300 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
 								View your collection
 							</span>
 						</Link>
 					) : (
-						<div className="flex flex-col items-center p-6 bg-gray-50 dark:bg-slate-800/30 border border-gray-200 dark:border-slate-700/50 rounded-xl opacity-50 cursor-not-allowed">
-							<div className="w-12 h-12 bg-gray-100 dark:bg-slate-700/50 rounded-full flex items-center justify-center mb-4">
-								<User size={24} className="text-gray-400 dark:text-gray-500" />
+						<div className="flex flex-col items-center p-6 bg-gray-50 dark:bg-zinc-800/30 border border-gray-200 dark:border-zinc-600/50 rounded-xl opacity-50 cursor-not-allowed">
+							<div className="w-12 h-12 bg-gray-100 dark:bg-zinc-700/50 rounded-full flex items-center justify-center mb-4">
+								<User size={24} className="text-gray-400 dark:text-zinc-400" />
 							</div>
-							<span className="font-semibold text-gray-400 dark:text-gray-500">
+							<span className="font-semibold text-gray-400 dark:text-zinc-400">
 								My Decks
 							</span>
-							<span className="text-sm text-gray-400 dark:text-gray-500 mt-1">
+							<span className="text-sm text-gray-400 dark:text-zinc-400 mt-1">
 								Sign in to view
 							</span>
 						</div>
···
 					<Link
 						to="/cards"
 						search={{ q: "", sort: undefined, sort2: undefined }}
-						className="group flex flex-col items-center p-6 bg-white dark:bg-slate-800/50 border border-gray-200 dark:border-slate-700 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
+						className="group flex flex-col items-center p-6 bg-white dark:bg-zinc-800/50 border border-gray-200 dark:border-zinc-600 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
 					>
-						<div className="w-12 h-12 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-gray-200 dark:group-hover:bg-slate-600 transition-colors">
-							<Search size={24} className="text-gray-600 dark:text-gray-300" />
+						<div className="w-12 h-12 bg-gray-100 dark:bg-zinc-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-gray-200 dark:group-hover:bg-zinc-600 transition-colors">
+							<Search size={24} className="text-gray-600 dark:text-zinc-300" />
 						</div>
 						<span className="font-semibold text-gray-900 dark:text-white motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'wght'_600] motion-safe:group-hover:[font-variation-settings:'wght'_700]">
 							Browse Cards
 						</span>
-						<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
+						<span className="text-sm text-gray-500 dark:text-zinc-300 mt-1 motion-safe:transition-[font-variation-settings] motion-safe:duration-200 motion-safe:ease-out [font-variation-settings:'CASL'_0] motion-safe:group-hover:[font-variation-settings:'CASL'_1]">
 							Search the database
 						</span>
 					</Link>
···
 					<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-1 text-center">
 						Recent Activity
 					</h2>
-					<p className="text-sm text-gray-500 dark:text-gray-400 mb-6 text-center">
+					<p className="text-sm text-gray-500 dark:text-zinc-300 mb-6 text-center">
 						powered by{" "}
 						<a
 							href="https://ufos.microcosm.blue"
···
 				</div>
 
 				<div className="mt-16 text-center">
-					<p className="text-sm text-gray-500 dark:text-gray-500 [font-variation-settings:'CASL'_0.5]">
+					<p className="text-sm text-gray-500 dark:text-zinc-400 [font-variation-settings:'CASL'_0.5]">
 						built on{" "}
 						<a
 							href="https://atproto.com"

src/routes/oauth/callback.tsx

···
 				};
 
 		return (
-			<div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-900 p-4">
+			<div className="min-h-screen flex items-center justify-center bg-white dark:bg-zinc-900 p-4">
 				<div
-					className={`max-w-md w-full bg-white dark:bg-slate-800 ${colorClasses.border} rounded-lg shadow-lg overflow-hidden`}
+					className={`max-w-md w-full bg-white dark:bg-zinc-800 ${colorClasses.border} rounded-lg shadow-lg overflow-hidden`}
 				>
 					<div
 						className={`${colorClasses.headerBg} border-b ${colorClasses.headerBorder} p-6`}
···
 						</h1>
 					</div>
 					<div className="p-6">
-						<p className="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
+						<p className="text-gray-700 dark:text-zinc-300 mb-6 leading-relaxed">
 							{error}
 						</p>
 						<div className="flex gap-3">
 							<button
 								type="button"
 								onClick={() => navigate({ to: "/signin" })}
-								className="flex-1 px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-medium"
+								className="flex-1 px-4 py-2 bg-cyan-400 hover:bg-cyan-300 text-gray-900 rounded-lg transition-colors font-medium"
 							>
 								Try Again
 							</button>
 							<button
 								type="button"
 								onClick={() => navigate({ to: "/" })}
-								className="flex-1 px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-lg transition-colors font-medium"
+								className="flex-1 px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-gray-900 dark:text-white rounded-lg transition-colors font-medium"
 							>
 								Return Home
 							</button>
···
 	}
 
 	return (
-		<div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-900">
+		<div className="min-h-screen flex items-center justify-center bg-white dark:bg-zinc-900">
 			<div className="text-center">
 				<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-cyan-600 border-r-transparent mb-4" />
 				<p className="text-gray-900 dark:text-white text-lg">

src/routes/profile/$did/deck/$rkey/bulk-edit.tsx

···
 	}, [textLines, resolvedMap, errorMap, parsedByRaw, savedCardIds]);
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			<div className="max-w-6xl mx-auto px-6 py-8">
 				<div className="mb-6">
 					<Link
···
 					<h1 className="text-2xl font-bold text-gray-900 dark:text-white mt-2">
 						Bulk Edit: {deck.name}
 					</h1>
-					<p className="text-gray-600 dark:text-gray-400 mt-1">
+					<p className="text-gray-600 dark:text-zinc-300 mt-1">
 						Edit cards in text format. One card per line.
 					</p>
 				</div>
 
 				{/* Section tabs */}
-				<div className="flex gap-1 mb-4 border-b border-gray-200 dark:border-slate-700">
+				<div className="flex gap-1 mb-4 border-b border-gray-200 dark:border-zinc-600">
 					{SECTIONS.map((section) => {
 						const isActive = activeSection === section.value;
 						const isDisabled = isDirty && !isActive;
···
 									isActive
 										? "text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400"
 										: isDisabled
-											? "text-gray-400 dark:text-gray-600 cursor-not-allowed"
-											: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+											? "text-gray-400 dark:text-zinc-600 cursor-not-allowed"
+											: "text-gray-600 dark:text-zinc-300 hover:text-gray-900 dark:hover:text-white"
 								}`}
 							>
 								{section.label}
···
 				</div>
 
 				{/* Format hint */}
-				<div className="mb-4 p-3 bg-gray-50 dark:bg-slate-800 rounded-lg text-sm text-gray-600 dark:text-gray-400">
+				<div className="mb-4 p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg text-sm text-gray-600 dark:text-zinc-300">
 					<strong>Format:</strong>{" "}
-					<code className="bg-gray-200 dark:bg-slate-700 px-1 rounded">
+					<code className="bg-gray-200 dark:bg-zinc-700 px-1 rounded">
 						&lt;quantity&gt; &lt;card name&gt; (SET) &lt;collector#&gt; #tag1
 						#tag2
 					</code>
···
 				</div>
 
 				{/* Editor container */}
-				<div className="overflow-auto max-h-96 border border-gray-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800">
+				<div className="overflow-auto max-h-96 border border-gray-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800">
 					<div className="flex">
 						<textarea
 							value={text}
···
 							}}
 							disabled={!isOwner || isSaving}
 							wrap="off"
-							className="flex-1 p-4 font-mono text-sm leading-[1.5] resize-none overflow-x-auto overflow-y-hidden bg-transparent text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:opacity-50 [font-variant-ligatures:none]"
+							className="flex-1 p-4 font-mono text-sm leading-[1.5] resize-none overflow-x-auto overflow-y-hidden bg-transparent text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:outline-none disabled:opacity-50 [font-variant-ligatures:none]"
 							style={{
 								height: `calc(${Math.max(textLines.length, 10)} * 1.5em + 2rem)`,
 							}}
···
 				</div>
 
 				{/* Stats */}
-				<div className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+				<div className="mt-2 text-sm text-gray-500 dark:text-zinc-300">
 					{lineCount} {lineCount === 1 ? "card" : "cards"}, {cardCount} total
 				</div>
 
···
 							type="button"
 							onClick={handleReset}
 							disabled={isSaving || !isDirty}
-							className="px-4 py-2 bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
+							className="px-4 py-2 bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed text-gray-900 dark:text-white font-medium rounded-lg transition-colors"
 						>
 							Reset
 						</button>

src/routes/profile/$did/deck/$rkey/export.tsx

···
 	const lineCount = exportText.split("\n").filter((l) => l.trim()).length;
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			<div className="max-w-4xl mx-auto px-6 py-8">
 				<div className="mb-6">
 					<Link
···
 					<h1 className="text-2xl font-bold text-gray-900 dark:text-white mt-2">
 						Export: {deck.name}
 					</h1>
-					<p className="text-gray-600 dark:text-gray-400 mt-1">
+					<p className="text-gray-600 dark:text-zinc-300 mt-1">
 						Export your deck to various formats for use in other tools.
 					</p>
 				</div>
 
 				{/* Format selector */}
 				<div className="mb-6">
-					<span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+					<span className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
 						Format
 					</span>
 					<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
···
 									className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
 										format === f
 											? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300"
-											: "border-gray-300 dark:border-slate-700 hover:border-gray-400 dark:hover:border-slate-600 text-gray-700 dark:text-gray-300"
+											: "border-gray-300 dark:border-zinc-600 hover:border-gray-400 dark:hover:border-slate-600 text-gray-700 dark:text-zinc-300"
 									}`}
 								>
 									<div className="font-medium">{meta.label}</div>
···
 				{/* Options */}
 				<div className="mb-6 space-y-2">
 					{getCardsInSection(deck, "maybeboard").length > 0 && (
-						<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+						<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-zinc-300 cursor-pointer">
 							<input
 								type="checkbox"
 								checked={includeMaybeboard}
 								onChange={(e) => setIncludeMaybeboard(e.target.checked)}
-								className="rounded border-gray-300 dark:border-slate-600 text-blue-600 focus:ring-blue-500"
+								className="rounded border-gray-300 dark:border-zinc-600 text-blue-600 focus:ring-blue-500"
 							/>
 							Include maybeboard (
 							{getCardsInSection(deck, "maybeboard").reduce(
···
 					<label
 						className={`flex items-center gap-2 text-sm ${
 							formatOptions.tags
-								? "text-gray-700 dark:text-gray-300 cursor-pointer"
-								: "text-gray-400 dark:text-gray-600 cursor-not-allowed"
+								? "text-gray-700 dark:text-zinc-300 cursor-pointer"
+								: "text-gray-400 dark:text-zinc-600 cursor-not-allowed"
 						}`}
 					>
 						<input
···
 							checked={formatOptions.tags && includeTags}
 							onChange={(e) => setIncludeTags(e.target.checked)}
 							disabled={!formatOptions.tags}
-							className="rounded border-gray-300 dark:border-slate-600 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
+							className="rounded border-gray-300 dark:border-zinc-600 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
 						/>
 						Include tags
 					</label>
 					<label
 						className={`flex items-center gap-2 text-sm ${
 							formatOptions.setcodes
-								? "text-gray-700 dark:text-gray-300 cursor-pointer"
-								: "text-gray-400 dark:text-gray-600 cursor-not-allowed"
+								? "text-gray-700 dark:text-zinc-300 cursor-pointer"
+								: "text-gray-400 dark:text-zinc-600 cursor-not-allowed"
 						}`}
 					>
 						<input
···
 							checked={formatOptions.setcodes && includeSetCodes}
 							onChange={(e) => setIncludeSetCodes(e.target.checked)}
 							disabled={!formatOptions.setcodes}
-							className="rounded border-gray-300 dark:border-slate-600 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
+							className="rounded border-gray-300 dark:border-zinc-600 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
 						/>
 						Include set codes
 					</label>
···
 				{/* Preview */}
 				<div className="mb-4">
 					<div className="flex items-center justify-between mb-2">
-						<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+						<span className="text-sm font-medium text-gray-700 dark:text-zinc-300">
 							Preview ({lineCount} lines)
 						</span>
 						<div className="flex gap-2">
···
 							<button
 								type="button"
 								onClick={handleDownload}
-								className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-900 dark:text-white rounded-lg transition-colors"
+								className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600 text-gray-900 dark:text-white rounded-lg transition-colors"
 							>
 								<Download size={14} />
 								Download
 							</button>
 						</div>
 					</div>
-					<pre className="p-4 bg-gray-50 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg overflow-x-auto text-sm font-mono text-gray-900 dark:text-gray-100 max-h-[60vh] overflow-y-auto whitespace-pre">
+					<pre className="p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg overflow-x-auto text-sm font-mono text-gray-900 dark:text-zinc-100 max-h-[60vh] overflow-y-auto whitespace-pre">
 						{exportText}
 					</pre>
 				</div>

src/routes/profile/$did/deck/$rkey/index.tsx

···
 	);
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			{/* Deck name and format */}
 			<div className="max-w-7xl 2xl:max-w-[96rem] mx-auto px-6 pt-8 pb-4 space-y-4">
 				<DeckHeader
···
 			</div>
 
 			{/* Sticky header with search */}
-			<div className="sticky top-0 z-10 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 shadow-sm">
+			<div className="sticky top-0 z-10 bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700 shadow-sm">
 				<div className="max-w-7xl 2xl:max-w-[96rem] mx-auto px-6 py-3 flex items-center justify-between gap-4">
 					<div className="flex items-center gap-2">
 						<DeckActionsMenu

src/routes/profile/$did/deck/$rkey/play.tsx

···
 
 	if (!cardMap) {
 		return (
-			<div className="h-screen flex items-center justify-center bg-white dark:bg-slate-950">
-				<span className="text-gray-500 dark:text-gray-400">
+			<div className="h-screen flex items-center justify-center bg-white dark:bg-zinc-950">
+				<span className="text-gray-500 dark:text-zinc-300">
 					Loading cards...
 				</span>
 			</div>
···
 	}
 
 	return (
-		<div className="h-screen flex flex-col bg-white dark:bg-slate-950">
-			<header className="flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-slate-800">
+		<div className="h-screen flex flex-col bg-white dark:bg-zinc-950">
+			<header className="flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-zinc-700">
 				<Link
 					to="/profile/$did/deck/$rkey"
 					params={{ did, rkey }}
-					className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+					className="flex items-center gap-2 text-gray-600 dark:text-zinc-300 hover:text-gray-900 dark:hover:text-white"
 				>
 					<ArrowLeft className="w-4 h-4" />
 					Back to Editor

src/routes/profile/$did/index.tsx

···
 						<select
 							value={search.sort ?? "updated-desc"}
 							onChange={handleSortChange}
-							className="px-4 py-2 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500"
+							className="px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500"
 						>
 							{SORT_OPTIONS.map((opt) => (
 								<option key={opt.value} value={opt.value}>
···
 							<select
 								value={search.format ?? ""}
 								onChange={handleFormatChange}
-								className="px-4 py-2 bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500"
+								className="px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-cyan-500"
 							>
 								<option value="">All Formats</option>
 								{availableFormats.map((format) => (
···
 				{isOwner && (
 					<Link
 						to="/deck/new"
-						className="flex items-center gap-2 px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white font-medium rounded-lg transition-colors"
+						className="flex items-center gap-2 px-4 py-2 bg-cyan-400 hover:bg-cyan-300 text-gray-900 font-medium rounded-lg transition-colors"
 					>
 						<Plus className="w-4 h-4" />
 						New Deck
···
 			</div>
 
 			{isLoading ? (
-				<div className="text-center py-8 bg-gray-50 dark:bg-slate-800 rounded-lg">
-					<p className="text-gray-600 dark:text-gray-400">
+				<div className="text-center py-8 bg-gray-50 dark:bg-zinc-800 rounded-lg">
+					<p className="text-gray-600 dark:text-zinc-300">
 						Loading decklists...
 					</p>
 				</div>
 			) : decks.length === 0 ? (
-				<div className="text-center py-8 bg-gray-50 dark:bg-slate-800 rounded-lg">
-					<p className="text-gray-600 dark:text-gray-400 mb-4">
+				<div className="text-center py-8 bg-gray-50 dark:bg-zinc-800 rounded-lg">
+					<p className="text-gray-600 dark:text-zinc-300 mb-4">
 						{isOwner ? "No decklists yet" : "No decklists"}
 					</p>
 					{isOwner && (
 						<Link
 							to="/deck/new"
-							className="inline-block px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white font-medium rounded-lg transition-colors"
+							className="inline-block px-6 py-3 bg-cyan-400 hover:bg-cyan-300 text-gray-900 font-medium rounded-lg transition-colors"
 						>
 							Create Your First Deck
 						</Link>
 					)}
 				</div>
 			) : filteredAndSorted.length === 0 ? (
-				<div className="text-center py-8 bg-gray-50 dark:bg-slate-800 rounded-lg">
-					<p className="text-gray-600 dark:text-gray-400 mb-4">
+				<div className="text-center py-8 bg-gray-50 dark:bg-zinc-800 rounded-lg">
+					<p className="text-gray-600 dark:text-zinc-300 mb-4">
 						No decks match your filters
 					</p>
 					{hasActiveFilters && (

src/routes/profile/$did/list/$rkey/index.tsx

···
 
 	if (isLoading || !list) {
 		return (
-			<div className="min-h-screen bg-white dark:bg-slate-900 flex items-center justify-center">
-				<p className="text-gray-600 dark:text-gray-400">Loading list...</p>
+			<div className="min-h-screen bg-white dark:bg-zinc-900 flex items-center justify-center">
+				<p className="text-gray-600 dark:text-zinc-300">Loading list...</p>
 			</div>
 		);
 	}
···
 	const dateString = list.updatedAt ?? list.createdAt;
 
 	return (
-		<div className="min-h-screen bg-white dark:bg-slate-900">
+		<div className="min-h-screen bg-white dark:bg-zinc-900">
 			<div className="max-w-4xl mx-auto px-6 py-8">
 				<div className="flex items-start justify-between gap-4 mb-2">
 					<div className="flex-1 min-w-0">
···
 					)}
 				</div>
 
-				<p className="text-sm text-gray-500 dark:text-gray-500 mb-1">
+				<p className="text-sm text-gray-500 dark:text-zinc-400 mb-1">
 					{handle ? (
 						<>
 							by{" "}
···
 							</Link>
 						</>
 					) : (
-						<span className="inline-block h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse align-middle" />
+						<span className="inline-block h-4 w-20 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse align-middle" />
 					)}
 				</p>
-				<p className="text-sm text-gray-500 dark:text-gray-500 mb-4">
+				<p className="text-sm text-gray-500 dark:text-zinc-400 mb-4">
 					Updated <ClientDate dateString={dateString} />
 				</p>
 
···
 				</div>
 
 				{list.items.length === 0 ? (
-					<p className="text-gray-600 dark:text-gray-400 text-center py-12">
+					<p className="text-gray-600 dark:text-zinc-300 text-center py-12">
 						This list is empty.
 					</p>
 				) : (
···
 
 	if (isLoading || !card) {
 		return (
-			<div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg animate-pulse">
-				<div className="w-16 h-22 bg-gray-300 dark:bg-slate-700 rounded" />
+			<div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg animate-pulse">
+				<div className="w-16 h-22 bg-gray-300 dark:bg-zinc-700 rounded" />
 				<div className="flex-1">
-					<div className="h-5 w-32 bg-gray-300 dark:bg-slate-700 rounded mb-2" />
-					<div className="h-4 w-24 bg-gray-200 dark:bg-slate-600 rounded" />
+					<div className="h-5 w-32 bg-gray-300 dark:bg-zinc-700 rounded mb-2" />
+					<div className="h-4 w-24 bg-gray-200 dark:bg-zinc-600 rounded" />
 				</div>
 			</div>
 		);
···
 			<Link
 				to="/card/$id"
 				params={{ id: item.scryfallId }}
-				className="group flex-1 flex items-start gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
+				className="group flex-1 flex items-start gap-4 p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
 			>
 				<CardImage
 					card={{ id: item.scryfallId, name: card.name }}
···
 							/>
 						)}
 					</div>
-					<div className="flex items-center justify-between gap-3 text-xs text-gray-600 dark:text-gray-300">
+					<div className="flex items-center justify-between gap-3 text-xs text-gray-600 dark:text-zinc-300">
 						<span className="truncate">{card.type_line}</span>
 						{card.set && (
 							<SetSymbol setCode={card.set} rarity={card.rarity} size="small" />
 						)}
 					</div>
 					{getPrimaryFace(card).oracle_text && (
-						<p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-3 leading-tight">
+						<p className="text-xs text-gray-500 dark:text-zinc-300 line-clamp-3 leading-tight">
 							<OracleText
 								text={getPrimaryFace(card).oracle_text ?? ""}
 								symbolSize="text"
···
 
 	if (isError || !data) {
 		return (
-			<div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg opacity-50">
+			<div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg opacity-50">
 				<div className="flex-1">
-					<p className="text-gray-600 dark:text-gray-400">
+					<p className="text-gray-600 dark:text-zinc-300">
 						Deck no longer exists
 					</p>
 				</div>

src/routes/profile/$did/lists.tsx

···
 							type="button"
 							onClick={() => createListMutation.mutate({ name: "New List" })}
 							disabled={createListMutation.isPending}
-							className="flex items-center gap-2 px-4 py-2 bg-cyan-600 hover:bg-cyan-700 disabled:bg-cyan-600/50 text-white font-medium rounded-lg transition-colors"
+							className="flex items-center gap-2 px-4 py-2 bg-cyan-400 hover:bg-cyan-300 disabled:bg-cyan-400/50 text-gray-900 font-medium rounded-lg transition-colors"
 						>
 							<Plus className="w-4 h-4" />
 							New List
···
 				</div>
 
 				{isLoading ? (
-					<div className="text-center py-8 bg-gray-50 dark:bg-slate-800 rounded-lg">
-						<p className="text-gray-600 dark:text-gray-400">Loading lists...</p>
+					<div className="text-center py-8 bg-gray-50 dark:bg-zinc-800 rounded-lg">
+						<p className="text-gray-600 dark:text-zinc-300">Loading lists...</p>
 					</div>
 				) : lists.length === 0 ? (
-					<div className="text-center py-8 bg-gray-50 dark:bg-slate-800 rounded-lg">
-						<p className="text-gray-600 dark:text-gray-400">
+					<div className="text-center py-8 bg-gray-50 dark:bg-zinc-800 rounded-lg">
+						<p className="text-gray-600 dark:text-zinc-300">
 							{isOwner ? "No lists yet" : "No lists"}
 						</p>
 					</div>

src/routes/signin.tsx

···
 	}
 
 	return (
-		<div className="min-h-screen flex flex-col items-center justify-center bg-white dark:bg-slate-900 px-4 py-8">
-			<div className="max-w-md w-full bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg shadow-lg p-8">
+		<div className="min-h-screen flex flex-col items-center justify-center bg-white dark:bg-zinc-900 px-4 py-8">
+			<div className="max-w-md w-full bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg p-8">
 				<div className="flex items-center justify-center mb-6">
 					<div className="p-3 bg-cyan-600 rounded-full">
 						<LogIn size={32} className="text-white" />
···
 				<h1 className="text-3xl font-bold text-gray-900 dark:text-white text-center mb-2 font-display">
 					Sign In
 				</h1>
-				<p className="text-gray-600 dark:text-gray-400 text-center mb-8">
+				<p className="text-gray-600 dark:text-zinc-300 text-center mb-8">
 					Sign in with an Atmosphere account to continue
 				</p>
 
 				<form onSubmit={handleSubmit}>
 					<label
 						htmlFor={handleId}
-						className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+						className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"
 					>
 						Handle
 					</label>
···
 							onFocus={() => setIsFocused(true)}
 							onKeyDown={handleKeyDown}
 							placeholder="alice.bsky.social"
-							className="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-600 disabled:opacity-50 disabled:cursor-not-allowed"
+							className="w-full px-4 py-3 border border-gray-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-600 disabled:opacity-50 disabled:cursor-not-allowed"
 							disabled={isLoading}
 							required
 							role="combobox"
···
 								id={listboxId}
 								role="listbox"
 								aria-labelledby={handleId}
-								className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto"
+								className="absolute z-50 w-full mt-1 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg max-h-60 overflow-y-auto"
 							>
 								{results.map((result, index) => (
 									<button
···
 										role="option"
 										aria-selected={index === selectedIndex}
 										onClick={() => selectResult(result.handle)}
-										className={`w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+										className={`w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors ${
 											index === selectedIndex
 												? "bg-cyan-100 dark:bg-cyan-900/30"
 												: ""
···
 												className="w-10 h-10 rounded-full"
 											/>
 										) : (
-											<div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600" />
+											<div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-zinc-600" />
 										)}
 										<div className="flex-1 min-w-0">
 											{result.displayName && (
···
 													{result.displayName}
 												</div>
 											)}
-											<div className="text-sm text-gray-600 dark:text-gray-400 truncate">
+											<div className="text-sm text-gray-600 dark:text-zinc-300 truncate">
 												@{result.handle}
 											</div>
 										</div>
···
 					<button
 						type="submit"
 						disabled={isLoading}
-						className="w-full px-4 py-3 bg-cyan-600 hover:bg-cyan-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white rounded-lg transition-colors font-medium text-lg flex items-center justify-center gap-2"
+						className="w-full px-4 py-3 bg-cyan-400 hover:bg-cyan-300 disabled:bg-gray-400 disabled:cursor-not-allowed text-gray-900 rounded-lg transition-colors font-medium text-lg flex items-center justify-center gap-2"
 					>
 						{isLoading ? (
 							<>
-								<div className="inline-block h-5 w-5 animate-spin rounded-full border-3 border-solid border-white border-r-transparent" />
+								<div className="inline-block h-5 w-5 animate-spin rounded-full border-3 border-solid border-gray-900 border-r-transparent" />
 								<span>Signing in...</span>
 							</>
 						) : (
···
 					</button>
 				</form>
 
-				<p className="mt-6 text-center text-gray-600 dark:text-gray-400">
+				<p className="mt-6 text-center text-gray-600 dark:text-zinc-300">
 					Don't have an account?{" "}
 					<Link
 						to="/signup"

src/routes/signup.tsx

···
 	}
 
 	return (
-		<div className="min-h-screen flex flex-col items-center justify-center bg-white dark:bg-slate-900 px-4 py-8">
-			<div className="max-w-md w-full bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-lg shadow-lg p-8">
+		<div className="min-h-screen flex flex-col items-center justify-center bg-white dark:bg-zinc-900 px-4 py-8">
+			<div className="max-w-md w-full bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg shadow-lg p-8">
 				<div className="flex items-center justify-center mb-6">
 					<div className="p-3 bg-emerald-600 rounded-full">
 						<UserPlus size={32} className="text-white" />
···
 				<h1 className="text-3xl font-bold text-gray-900 dark:text-white text-center mb-2 font-display">
 					Create Account
 				</h1>
-				<p className="text-gray-600 dark:text-gray-400 text-center mb-6">
+				<p className="text-gray-600 dark:text-zinc-300 text-center mb-6">
 					New to the Atmosphere? Create an account on a PDS host.
 				</p>
 
···
 						className={`block mb-4 p-4 rounded-lg border-2 cursor-pointer transition-colors ${
 							selectedPds === DEFAULT_PDS_HOST.url
 								? "border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20"
-								: "border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
+								: "border-gray-300 dark:border-zinc-600 hover:bg-gray-50 dark:hover:bg-zinc-800"
 						}`}
 					>
 						<div className="flex items-center gap-3">
···
 								<div className="font-medium text-gray-900 dark:text-white">
 									{DEFAULT_PDS_HOST.name}
 								</div>
-								<div className="text-sm text-gray-600 dark:text-gray-400">
+								<div className="text-sm text-gray-600 dark:text-zinc-300">
 									{DEFAULT_PDS_HOST.description}
 								</div>
 							</div>
···
 					</label>
 
 					{/* Other hosts - collapsible */}
-					<div className="border-t border-gray-200 dark:border-gray-700 pt-4 mb-4">
+					<div className="border-t border-gray-200 dark:border-zinc-600 pt-4 mb-4">
 						<button
 							type="button"
 							onClick={() => setShowOtherHosts(!showOtherHosts)}
-							className="w-full flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+							className="w-full flex items-center justify-between text-sm text-gray-600 dark:text-zinc-300 hover:text-gray-900 dark:hover:text-white"
 						>
 							<span>Other hosting options</span>
 							<ChevronDown
···
 										className={`block p-3 rounded-lg border cursor-pointer transition-colors ${
 											selectedPds === host.url
 												? "border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20"
-												: "border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
+												: "border-gray-300 dark:border-zinc-600 hover:bg-gray-50 dark:hover:bg-zinc-800"
 										}`}
 									>
 										<div className="flex items-center gap-3">
···
 												<div className="font-medium text-gray-900 dark:text-white">
 													{host.name}
 												</div>
-												<div className="text-sm text-gray-600 dark:text-gray-400">
+												<div className="text-sm text-gray-600 dark:text-zinc-300">
 													{host.description}
 												</div>
 											</div>
···
 									className={`block p-3 rounded-lg border cursor-pointer transition-colors ${
 										selectedPds === "custom"
 											? "border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20"
-											: "border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
+											: "border-gray-300 dark:border-zinc-600 hover:bg-gray-50 dark:hover:bg-zinc-800"
 									}`}
 								>
 									<div className="flex items-center gap-3">
···
 											<div className="font-medium text-gray-900 dark:text-white">
 												Other...
 											</div>
-											<div className="text-sm text-gray-600 dark:text-gray-400">
+											<div className="text-sm text-gray-600 dark:text-zinc-300">
 												Enter a custom PDS URL
 											</div>
 										</div>
···
 									<div className="ml-6 mt-2">
 										<label
 											htmlFor={customPdsId}
-											className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+											className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"
 										>
 											PDS URL
 										</label>
···
 											value={customPdsUrl}
 											onChange={(e) => setCustomPdsUrl(e.target.value)}
 											placeholder="https://pds.example.com"
-											className="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-600"
+											className="w-full px-4 py-3 border border-gray-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-600"
 											required
 										/>
 									</div>
···
 
 					{/* Acknowledgment checkbox for hosts with policy links */}
 					{needsAcknowledgment && (
-						<label className="flex items-start gap-3 mb-4 p-3 bg-amber-50 dark:bg-slate-800 border border-amber-200 dark:border-amber-700/50 rounded-lg cursor-pointer">
+						<label className="flex items-start gap-3 mb-4 p-3 bg-amber-50 dark:bg-zinc-800 border border-amber-200 dark:border-amber-700/50 rounded-lg cursor-pointer">
 							<input
 								type="checkbox"
 								checked={acknowledgedPolicy}
 								onChange={(e) => setAcknowledgedPolicy(e.target.checked)}
 								className="mt-0.5 text-amber-600 focus:ring-amber-500"
 							/>
-							<span className="text-sm text-gray-700 dark:text-gray-300">
+							<span className="text-sm text-gray-700 dark:text-zinc-300">
 								I've read the{" "}
 								<a
 									href={selectedHost?.learnMoreUrl}
···
 				</form>
 
 				{selectedHost && selectedPds !== "custom" && (
-					<div className="mt-4 p-3 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg">
-						<div className="text-sm text-gray-600 dark:text-gray-400">
+					<div className="mt-4 p-3 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600 rounded-lg">
+						<div className="text-sm text-gray-600 dark:text-zinc-300">
 							Available handles on {selectedHost.name}:
 						</div>
 						<div className="mt-1.5 flex flex-wrap gap-1">
 							{selectedHost.handles.map((handle) => (
 								<span
 									key={handle}
-									className="px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full"
+									className="px-2 py-0.5 text-xs bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 rounded-full"
 								>
 									.{handle}
 								</span>
···
 						size={16}
 						className="text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
 					/>
-					<p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+					<p className="text-sm text-gray-700 dark:text-zinc-300 leading-relaxed">
 						Each host has its own policies and backup systems. Your data lives
 						on the host you choose, but you can migrate later.
 						{selectedHost &&
···
 					</p>
 				</div>
 
-				<p className="mt-6 text-center text-gray-600 dark:text-gray-400">
+				<p className="mt-6 text-center text-gray-600 dark:text-zinc-300">
 					Already have an account?{" "}
 					<Link
 						to="/signin"

src/styles.css

···
 @custom-variant dark (&:where(.dark, .dark *));
 
 html {
-	@apply bg-white dark:bg-slate-900;
+	@apply bg-white dark:bg-zinc-900;
 	color-scheme: light;
 }
 
 body {
-	@apply m-0 bg-white dark:bg-slate-900 font-sans;
+	@apply m-0 bg-white dark:bg-zinc-900 font-sans;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
···
 .dark {
   color-scheme: dark;
   /* Firefox scrollbar */
-  scrollbar-color: var(--color-gray-600) var(--color-gray-800);
+  scrollbar-color: var(--color-zinc-600) var(--color-zinc-800);
 }
 
 .dark ::-webkit-scrollbar {
···
 }
 
 .dark ::-webkit-scrollbar-track {
-  background: var(--color-gray-800);
+  background: var(--color-zinc-800);
 }
 
 .dark ::-webkit-scrollbar-thumb {
-  background: var(--color-gray-600);
+  background: var(--color-zinc-600);
   border-radius: 6px;
-  border: 2px solid var(--color-gray-800);
+  border: 2px solid var(--color-zinc-800);
 }
 
 .dark ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-500);
+  background: var(--color-zinc-500);
 }
 
 /* Hide scrollbar utility */
···
 }
 
 .dark .prosemirror-editor .ProseMirror p.is-editor-empty:first-child::before {
-  color: var(--color-gray-500);
+  color: var(--color-zinc-500);
 }
 
 /* Empty editor placeholder using data attribute */
···
 }
 
 .dark .prosemirror-editor .ProseMirror:has(> p:only-child:empty)::before {
-  color: var(--color-gray-500);
+  color: var(--color-zinc-500);
 }