retheme

name	retheme
description	Redesign the look of the Twinfolio site. Use when the user says "/retheme", "change the theme", "make it feel more X" (warm, brutalist, editorial, calm, high-contrast, etc.), "new colors", or "match my brand". Edits the oklch design tokens in app/theme.css — the same engine the /admin Theme Studio writes — while keeping text readable (WCAG AA).
allowed-tools	Read Edit Bash(git status)

Retheme

Twinfolio's entire visual identity is driven by design tokens in app/theme.css — only the :root { … } (light) and .dark { … } blocks live there. The @theme inline mapping that wires these to Tailwind lives in app/globals.css (do not edit that). You change the values; Tailwind and every component re-skin automatically. This is the same surface the /admin Theme Studio writes through, so hand-edits and the GUI stay compatible.

1. Read the current theme

Read app/theme.css. Note the token set: --background, --foreground, --card, --primary, --secondary, --muted, --accent, --destructive, --border, --input, --ring, the five --chart-*, the --sidebar-* group, plus --radius, the --font-* family vars, and the --shadow-* scale. Colors are oklch (oklch(L C H) — Lightness 0–1, Chroma, Hue degrees, optional / alpha).

2. Translate the vibe into oklch moves

Ask for (or infer) the vibe, then adjust deliberately:

• Hue (H): the brand color family. Pick a primary hue and reuse it for --primary, --ring, and tints of --accent/--secondary for cohesion.
• Chroma (C): saturation. 0 = neutral grayscale (the default). Raise to 0.1–0.2 for color; keep backgrounds low-chroma so they don't vibrate.
• Lightness (L): in :root keep --background high (~0.98–1) and --foreground low (~0.15); invert for .dark. Surfaces (--card, --popover) sit near the background; muted text (--muted-foreground) sits between.

Common moves:

• Warm/editorial → hue ~40–70, modest chroma, slightly off-white background.
• Cool/technical → hue ~230–260, low-chroma surfaces, crisp foreground.
• Brutalist/high-contrast → chroma 0, pure black/white, --radius: 0.
• Soft/calm → raise --radius, soften shadows, low chroma pastel surfaces.

Adjust --radius for roundness and the --font-sans/serif/mono stacks for personality. Tune the --shadow-* scale together (keep the ramp consistent).

3. Edit, keeping BOTH blocks in sync

Edit app/theme.css. Update :root (light) and .dark so both modes look intentional — don't change one and leave the other stale. Keep the dark block a true inversion (low-L background, high-L foreground), not just a copy.

4. Enforce contrast (WCAG AA)

This is non-negotiable — the Theme Studio holds the same bar:

• Body text (--foreground on --background, --card-foreground on --card, etc.) must hit AA contrast ≥ 4.5:1.
• Large text / UI ≥ 3:1.
• The fastest oklch lever is Lightness gap: a foreground/background L delta of roughly ≥ 0.4 clears AA for body text in most hues. Widen the gap if a pairing looks marginal.
• Verify every *-foreground token against its surface, in both :root and .dark.

5. Verify

If a dev server is running, tell the user to reload / to see it live, and to toggle dark mode. If they want a GUI with live preview and a built-in contrast check, point them to /admin/theme (the Theme Studio) — it reads and writes the exact same app/theme.css blocks. Summarize the palette you chose (primary hue, chroma direction, radius) so they can iterate.