diff --git a/docs/design/edition-color-vocabulary.md b/docs/design/edition-color-vocabulary.md
index a0f818fcc..0377741d5 100644
--- a/docs/design/edition-color-vocabulary.md
+++ b/docs/design/edition-color-vocabulary.md
@@ -9,7 +9,7 @@ This names the **roles** colors play in the voter-facing edition views, independ
 - **Reuse and retheme the existing shadcn token names** where a role already exists (`background`, `foreground`, `muted-foreground`, `border`, `ring`, `popover`, `accent`, `destructive`). New names are added only for roles shadcn doesn't cover. No `ed-*` namespace.
 - **No numeric ramps.** Each role is one value per theme; "lighter/darker" variants are expressed as alpha on the base token (Tailwind `/NN` over an HSL var) or as an explicit `-soft` companion, not as `-100…-900` scales.
 - **`/NN` opacity modifiers work only on opaque roles** (`foreground`, `accent`, `live`, `vote-must`, …). The inherently translucent roles (`surface`/`surface-raised`/`surface-active`, `accent-soft`, `border`/`border-strong`, `*-soft`) carry their alpha inside the CSS variable, so `bg-surface/50` expands to a double-alpha `hsl(… / 0.05 / .5)` — silently invalid CSS. Use the next step in the role family (`surface` → `surface-raised` → `surface-active`) instead of a modifier.
-- **Portals escape the scope.** The variables live on the edition root (`EditionViewRoot`), but Radix `Select`/`Popover`/`Sheet` content portals under `document.body` and resolves the global values there. Before tokenizing portaled content, give it the scope (portal `container` inside the edition root, or the scope class on the content element).
+- **The tokens live on `:root`, not a scope class (#367).** The whole app renders on the same dark identity today, so there's one set of values for the whole app — including admin and Radix portal content — and no scope class to remember. The flip (#359) will attach `data-edition-theme="light"` to the document root.
 - Values below reference today's hardcoded classes only to define the mapping; the actual palette is chosen in #320/#321.
 
 ## Token set
@@ -32,6 +32,8 @@ This names the **roles** colors play in the voter-facing edition views, independ
 | `surface-active` **(new)** | Hover/pressed/selected layer              | `bg-white/20`, `bg-white/30`                     |
 | `popover` (existing)       | Solid floating sheets, dropdowns, drawers | `bg-gray-800`, `bg-gray-900`, `bg-gray-900/95`   |
 
+`paper-background` / `paper-foreground` / `paper-muted-foreground` / `paper-border` **(new, admin/auth only)** are a stopgap for shared shadcn primitives (`Dialog`, `Input`, `InputOTP`, `Table`, toasts, `AuthDialog`) that render on a plain white chrome surface outside the edition views and were left invisible when `background`/`foreground`/`muted-foreground`/`border` were repointed to the dark identity. Named `paper-*` (not `surface-*`) specifically to avoid colliding with the `surface`/`surface-raised`/`surface-active` overlay-fill family above — those are translucent layers on the dark ground, `paper-*` is an opaque light page/dialog background, and the two are unrelated roles that happen to share a domain vocabulary. They're hardcoded grays/white today, not theme-aware. Once the light/dark flip (#359) lands, fold them into `background`/`foreground`/`muted-foreground`/`border` (scoped to the light theme value) and delete this family.
+
 ### Borders & focus
 
 | Token                     | Role                         | Absorbs today                                                              |
@@ -40,11 +42,14 @@ This names the **roles** colors play in the voter-facing edition views, independ
 | `border-strong` **(new)** | Emphasis / selected outlines | `border-purple-400/40`–`/50`, `border-purple-400`, `border-white/50`–`/80` |
 | `ring`                    | Focus/selection ring         | `ring-purple-400`, `ring-white`                                            |
 
+A hairline drawn in `border-white/NN` (not purple) doesn't fit either border role — reach for `border-foreground/NN` instead: `foreground` is opaque and already carries today's white value, so the opacity modifier reproduces the exact color without borrowing a fill role (`surface`) for a border.
+
 ### Brand accent (interactive)
 
 | Token                          | Role                                             | Absorbs today                                      |
 | ------------------------------ | ------------------------------------------------ | -------------------------------------------------- |
-| `accent` / `accent-foreground` | Primary interactive fill: selected toggles, CTAs | `bg-purple-600`, `bg-purple-700`, `bg-purple-400`  |
+| `accent` / `accent-foreground` | Primary interactive fill: selected toggles, CTAs | `bg-purple-600`, `bg-purple-400`                   |
+| `accent-hover`                 | Hover state for the accent fill                  | `hover:bg-purple-700`                              |
 | `accent-soft` **(new)**        | Translucent accent wash for selected/hover chips | `bg-purple-600/30`–`/60`, `bg-purple-400/10`–`/30` |
 | `text-accent`                  | Accent-colored text/icons                        | `text-purple-400`                                  |
 
diff --git a/docs/design/edition-identity-spec.md b/docs/design/edition-identity-spec.md
index a5b9d822a..0483153b9 100644
--- a/docs/design/edition-identity-spec.md
+++ b/docs/design/edition-identity-spec.md
@@ -2,7 +2,7 @@
 
 Resolution of [#321](https://github.com/chiptus/UpLine/issues/321), part of the visual-identity wayfinder map [#317](https://github.com/chiptus/UpLine/issues/317). Written in the semantic token vocabulary from [`edition-color-vocabulary.md`](./edition-color-vocabulary.md); implementation tickets are cut from this document.
 
-**Scope:** the voter-facing edition views only (EditionView hero/tabs, schedule Now/Timeline/List, artists, explore, set details). Admin, groups/settings, and landing/auth keep the old skin.
+**Scope:** the voter-facing edition views (EditionView hero/tabs, schedule Now/Timeline/List, artists, explore, set details). The tokens themselves live on `:root` globally (#367), so admin and Radix portal content pick them up too — but the palette and component work described here targets the edition views.
 
 **Provenance:** direction decided in [#320](https://github.com/chiptus/UpLine/issues/320) (Festival v2 winner, soft-border light graft), confirmed against real screens by the in-app prototype pass on PR #354 (`src/pages/EditionView/prototype/`, deleted after rollout). Values below are the prototype's confirmed values, extended to the full #319 role set.
 
@@ -12,7 +12,7 @@ One skeleton, two color themes. **Dark is the default**: a violet poster ground
 
 ## Theme mechanics (CSS contract)
 
-- Token values are CSS variables scoped to the edition-view root. Dark values are the default; light values apply under an explicit `data-edition-theme="light"` scope on that root.
+- Token values are CSS variables on `:root` (#367). Dark values are the default; light values apply under an explicit `data-edition-theme="light"` attribute on the document root.
 - Both themes ship. How the theme is chosen (system preference vs in-app toggle) and persisted is a rollout decision — [#322](https://github.com/chiptus/UpLine/issues/322)'s territory. The CSS contract above is what it plugs into.
 - Values are stored as HSL channels to match the existing shadcn `hsl(var(--…))` plumbing; hex given here for legibility. Opaque roles are plain triples (`H S% L%`); the inherently translucent roles (`surface*`, `accent-soft`, `border*`, `*-soft`) carry their alpha inside the variable (`H S% L% / A`) — see the vocabulary's ground rules for why those roles must not take Tailwind `/NN` modifiers.
 
@@ -107,7 +107,7 @@ Same in both themes.
 
 ## What implementation consumes
 
-1. Token values above land in `src/index.css` under the edition scope, replacing the roles named in `edition-color-vocabulary.md`'s "absorbs today" mapping (~350 occurrences / 60 files per the #319 audit).
+1. Token values above land in `src/index.css` under `:root`, replacing the roles named in `edition-color-vocabulary.md`'s "absorbs today" mapping (~350 occurrences / 60 files per the #319 audit).
 2. `tailwind.config.ts` gains the new role names (`surface*`, `subtle-foreground`, `border-strong`, `accent-soft`, `live*`, `notice*`, `vote-*`).
 3. Font families wired once at the edition-view root; display styling via the heading rules above.
 4. The prototype directory `src/pages/EditionView/prototype/` and its wiring are deleted once the real implementation lands.
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 5cb5a1a36..4b40f13a7 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-paper-background text-paper-foreground p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}
@@ -93,7 +93,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-paper-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 13219e774..44f5854cf 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -4,11 +4,11 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-paper-foreground",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-paper-background text-paper-foreground",
         destructive:
           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
diff --git a/src/components/ui/badge.test.tsx b/src/components/ui/badge.test.tsx
index 8889dbef2..7304bfc36 100644
--- a/src/components/ui/badge.test.tsx
+++ b/src/components/ui/badge.test.tsx
@@ -31,7 +31,7 @@ describe("Badge", () => {
   it("renders with outline variant", () => {
     const { container } = render(<Badge variant="outline">Outline</Badge>);
     const badge = container.querySelector("div");
-    expect(badge).toHaveClass("text-foreground");
+    expect(badge).toHaveClass("text-paper-foreground", "border-paper-border");
   });
 
   it("applies custom className", () => {
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index d3d5d6040..bcbdb4153 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -14,7 +14,7 @@ const badgeVariants = cva(
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+        outline: "text-paper-foreground border-paper-border",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/card.test.tsx b/src/components/ui/card.test.tsx
index 14b02e6f9..bfcb4dd80 100644
--- a/src/components/ui/card.test.tsx
+++ b/src/components/ui/card.test.tsx
@@ -118,7 +118,7 @@ describe("CardDescription", () => {
   it("has base classes", () => {
     const { container } = render(<CardDescription>Test</CardDescription>);
     const description = container.firstChild as HTMLElement;
-    expect(description).toHaveClass("text-sm", "text-muted-foreground");
+    expect(description).toHaveClass("text-sm", "text-paper-muted-foreground");
   });
 
   it("applies custom className", () => {
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index b42ae32b9..10c1c4815 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-paper-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index b2a80de5c..05fab5150 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-paper-border bg-paper-background p-6 text-paper-foreground shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-paper-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -104,7 +104,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-paper-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index 1475c7297..49fe45704 100644
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -39,7 +39,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm text-paper-foreground transition-all first:rounded-l-md first:border-l last:rounded-r-md",
         isActive && "z-10 ring-2 ring-ring ring-offset-background",
         className,
       )}
@@ -48,7 +48,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-paper-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 09700f605..0a9818c9d 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base text-paper-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-paper-foreground placeholder:text-paper-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-paper-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index b38250eab..47b1ccac8 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -13,8 +13,8 @@ function Toaster({ ...props }: ToasterProps) {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
+            "group toast group-[.toaster]:bg-paper-background group-[.toaster]:text-paper-foreground group-[.toaster]:border-paper-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-paper-muted-foreground",
           actionButton:
             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
           cancelButton:
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 73cf6b4ad..cd67953e7 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 px-4 text-left align-middle font-medium text-paper-muted-foreground [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -87,7 +87,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(
+      "p-4 align-middle text-paper-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
     {...props}
   />
 ));
@@ -99,7 +102,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn("mt-4 text-sm text-paper-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 7de5c4a2a..7e253684d 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-paper-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 2bc23c1f4..01a612ce9 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -27,7 +27,7 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
+        default: "border bg-paper-background text-paper-foreground",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-paper-foreground/50 opacity-0 transition-opacity hover:text-paper-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className,
     )}
     toast-close=""
@@ -104,7 +104,10 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn(
+      "text-sm text-paper-muted-foreground opacity-90 group-[.destructive]:text-destructive-foreground",
+      className,
+    )}
     {...props}
   />
 ));
diff --git a/src/index.css b/src/index.css
index dd383d647..7e14efd0e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,13 +7,13 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 0 0% 100%; /* text-white */
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: 215 27.9% 16.9%; /* gray-800 */
+    --popover-foreground: 268.7 100% 95.5%; /* purple-100 */
 
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
@@ -22,17 +22,54 @@
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted-foreground: 268.6 100% 91.8%; /* purple-200 */
+    --subtle-foreground: 269.2 97.4% 85.1%; /* purple-300 */
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --surface: 0 0% 100% / 0.05; /* bg-white/5 */
+    --surface-raised: 0 0% 100% / 0.1; /* bg-white/10 */
+    --surface-active: 0 0% 100% / 0.2; /* bg-white/20 */
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    /*
+     * Background/text/border roles for light (white) chrome surfaces: dialogs, toasts,
+     * admin tables. Distinct from the --surface/-raised/-active overlay tokens above,
+     * which are translucent fills on the dark ground, not opaque page backgrounds.
+     * TODO(#359): these are hardcoded, not theme-aware. Once light/dark theming lands
+     * (data-edition-theme), fold these into --background/--foreground/--muted-foreground/
+     * --border instead so these surfaces follow the theme, and remove this token family.
+     */
+    --paper-background: 0 0% 100%; /* white */
+    --paper-foreground: 221 39% 11%; /* gray-900 */
+    --paper-muted-foreground: 220 9% 46%; /* gray-500 */
+    --paper-border: 216 12% 84%; /* gray-300 */
+    --paper-ring: 218 11% 65%; /* gray-400 */
 
-    --border: 214.3 31.8% 91.4%;
+    --accent: 271.5 81.3% 55.9%; /* purple-600 */
+    --accent-foreground: 0 0% 100%;
+    --accent-hover: 272.1 71.7% 47.1%; /* purple-700 */
+    --accent-soft: 271.5 81.3% 55.9% / 0.4; /* bg-purple-600/40 */
+
+    --destructive: 0 90.6% 70.8%; /* red-400 */
+    --destructive-foreground: 221 39% 11%; /* gray-900 — red-400 is too light for a white foreground */
+
+    --border: 270 95.2% 75.3% / 0.3; /* border-purple-400/30 */
+    --border-strong: 270 95.2% 75.3% / 0.5; /* border-purple-400/50 */
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 270 95.2% 75.3%; /* purple-400 */
+
+    --live: 292 91.4% 72.5%; /* fuchsia-400 */
+    --live-foreground: 288.3 95.8% 90.6%; /* fuchsia-200 */
+    --notice: 43.3 96.4% 56.3%; /* amber-400 */
+    --notice-foreground: 20.9 91.7% 14.1%; /* amber-950 */
+
+    --vote-must: 20.5 90.2% 48.2%; /* orange-600 */
+    --vote-must-foreground: 27 96% 61%; /* orange-400 */
+    --vote-must-soft: 15.3 74.6% 27.8% / 0.2; /* orange-900/20 */
+    --vote-interested: 221.2 83.2% 53.3%; /* blue-600 */
+    --vote-interested-foreground: 213.1 93.9% 67.8%; /* blue-400 */
+    --vote-interested-soft: 224.4 64.3% 32.9% / 0.2; /* blue-900/20 */
+    --vote-skip: 215 13.8% 34.1%; /* gray-600 */
+    --vote-skip-foreground: 217.9 10.6% 64.9%; /* gray-400 */
+    --vote-skip-soft: 220.9 39.3% 11% / 0.2; /* gray-900/20 */
 
     --radius: 0.5rem;
 
@@ -92,56 +129,7 @@
     --app-button-hover: 195 85% 40%;
   }
 
-  /* Edition-view identity tokens (#317 / #355).
-     Role vocabulary: docs/design/edition-color-vocabulary.md
-     Target values: docs/design/edition-identity-spec.md
-     Current values are TODAY's rendered colors so migrating hardcoded
-     classes onto these tokens is a zero-visual-change operation; the
-     Festival v2 values land in the flip (#359).
-     Ground stays bg-app-gradient until the flip, so --background and
-     --app-gradient-from/to are not overridden here.
-     Translucent roles carry their alpha inside the variable
-     (hsl H S% L% / A form), consumed via the same hsl(var(--x)) plumbing. */
-  .edition-view {
-    --foreground: 0 0% 100%; /* text-white */
-    --muted-foreground: 268.6 100% 91.8%; /* purple-200 */
-    --subtle-foreground: 269.2 97.4% 85.1%; /* purple-300 */
-
-    --surface: 0 0% 100% / 0.05; /* bg-white/5 */
-    --surface-raised: 0 0% 100% / 0.1; /* bg-white/10 */
-    --surface-active: 0 0% 100% / 0.2; /* bg-white/20 */
-    --popover: 215 27.9% 16.9%; /* gray-800 */
-    --popover-foreground: 268.7 100% 95.5%; /* purple-100 */
-
-    --border: 270 95.2% 75.3% / 0.3; /* border-purple-400/30 */
-    --border-strong: 270 95.2% 75.3% / 0.5; /* border-purple-400/50 */
-    --ring: 270 95.2% 75.3%; /* purple-400 */
-
-    --accent: 271.5 81.3% 55.9%; /* purple-600 */
-    --accent-foreground: 0 0% 100%;
-    --accent-soft: 271.5 81.3% 55.9% / 0.4; /* bg-purple-600/40 */
-
-    --live: 292 91.4% 72.5%; /* fuchsia-400 */
-    --live-foreground: 288.3 95.8% 90.6%; /* fuchsia-200 */
-    --notice: 43.3 96.4% 56.3%; /* amber-400 */
-    --notice-foreground: 20.9 91.7% 14.1%; /* amber-950 */
-    --destructive: 0 90.6% 70.8%; /* red-400 */
-
-    --vote-must: 20.5 90.2% 48.2%; /* orange-600 */
-    --vote-must-foreground: 27 96% 61%; /* orange-400 */
-    --vote-must-soft: 15.3 74.6% 27.8% / 0.2; /* orange-900/20 */
-    --vote-interested: 221.2 83.2% 53.3%; /* blue-600 */
-    --vote-interested-foreground: 213.1 93.9% 67.8%; /* blue-400 */
-    --vote-interested-soft: 224.4 64.3% 32.9% / 0.2; /* blue-900/20 */
-    --vote-skip: 215 13.8% 34.1%; /* gray-600 */
-    --vote-skip-foreground: 217.9 10.6% 64.9%; /* gray-400 */
-    --vote-skip-soft: 220.9 39.3% 11% / 0.2; /* gray-900/20 */
-  }
-
-  /* Light-theme scope stub per the CSS contract in the identity spec:
-     light values apply under an explicit data-edition-theme="light" on the
-     edition root. Values land with the flip (#359). */
-  .edition-view[data-edition-theme="light"] {
+  :root[data-edition-theme="light"] {
   }
 
   .dark {
diff --git a/src/pages/EditionView/EditionViewRoot.tsx b/src/pages/EditionView/EditionViewRoot.tsx
deleted file mode 100644
index 6ea40aae0..000000000
--- a/src/pages/EditionView/EditionViewRoot.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ReactNode } from "react";
-import { cn } from "@/lib/utils";
-
-// The identity scope for the voter-facing edition views: `edition-view`
-// anchors the CSS variables defined in src/index.css, and the flip (#359)
-// attaches data-edition-theme="light" to this same node per
-// docs/design/edition-identity-spec.md.
-export function EditionViewRoot({
-  className,
-  children,
-}: {
-  className?: string;
-  children: ReactNode;
-}) {
-  return (
-    <div className={cn("edition-view min-h-screen bg-app-gradient", className)}>
-      {children}
-    </div>
-  );
-}
diff --git a/src/pages/admin/ArtistsManagement/BulkEditor/GenresCell.tsx b/src/pages/admin/ArtistsManagement/BulkEditor/GenresCell.tsx
index 38d53967c..9cc988501 100644
--- a/src/pages/admin/ArtistsManagement/BulkEditor/GenresCell.tsx
+++ b/src/pages/admin/ArtistsManagement/BulkEditor/GenresCell.tsx
@@ -96,7 +96,7 @@ export function GenresCell({ value, onSave }: GenresCellProps) {
           ))}
         </div>
       ) : (
-        <span className="text-muted-foreground italic">
+        <span className="text-paper-muted-foreground italic">
           Click to add genres...
         </span>
       )}
diff --git a/src/pages/admin/ArtistsManagement/BulkEditor/ImageCell.tsx b/src/pages/admin/ArtistsManagement/BulkEditor/ImageCell.tsx
index cd8de51a7..1d74e174c 100644
--- a/src/pages/admin/ArtistsManagement/BulkEditor/ImageCell.tsx
+++ b/src/pages/admin/ArtistsManagement/BulkEditor/ImageCell.tsx
@@ -26,7 +26,9 @@ export function ImageCell({
       }}
     />
   ) : (
-    <span className="text-muted-foreground italic text-xs">add image...</span>
+    <span className="text-paper-muted-foreground italic text-xs">
+      add image...
+    </span>
   );
 
   return (
diff --git a/src/pages/admin/ArtistsManagement/BulkEditor/TextCell.tsx b/src/pages/admin/ArtistsManagement/BulkEditor/TextCell.tsx
index 2c909d9c8..28d6d8abd 100644
--- a/src/pages/admin/ArtistsManagement/BulkEditor/TextCell.tsx
+++ b/src/pages/admin/ArtistsManagement/BulkEditor/TextCell.tsx
@@ -79,7 +79,7 @@ export function TextCell({
       title="Click to edit"
     >
       {value || (
-        <span className="text-muted-foreground italic">
+        <span className="text-paper-muted-foreground italic">
           {placeholder || "Click to add..."}
         </span>
       )}
diff --git a/src/pages/admin/ArtistsManagement/BulkEditor/TextareaCell.tsx b/src/pages/admin/ArtistsManagement/BulkEditor/TextareaCell.tsx
index 833192856..3b73402e9 100644
--- a/src/pages/admin/ArtistsManagement/BulkEditor/TextareaCell.tsx
+++ b/src/pages/admin/ArtistsManagement/BulkEditor/TextareaCell.tsx
@@ -74,7 +74,7 @@ export function TextareaCell({
       {value ? (
         <MarkdownText content={value} className="prose-sm" />
       ) : (
-        <span className="text-muted-foreground italic">
+        <span className="text-paper-muted-foreground italic">
           {placeholder || "Click to add..."}
         </span>
       )}
diff --git a/src/pages/admin/ArtistsManagement/BulkEditor/UrlCell.tsx b/src/pages/admin/ArtistsManagement/BulkEditor/UrlCell.tsx
index 26a0ecbda..90adf09aa 100644
--- a/src/pages/admin/ArtistsManagement/BulkEditor/UrlCell.tsx
+++ b/src/pages/admin/ArtistsManagement/BulkEditor/UrlCell.tsx
@@ -96,7 +96,7 @@ export function UrlCell({ value, placeholder, onSave }: UrlCellProps) {
       title="Click to edit"
     >
       {displayValue || (
-        <span className="text-muted-foreground italic">
+        <span className="text-paper-muted-foreground italic">
           {placeholder || "Click to add..."}
         </span>
       )}
diff --git a/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx b/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx
index b4434652d..29656c3a6 100644
--- a/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx
+++ b/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx
@@ -33,7 +33,7 @@ export function BulkEditorHeader({ onAddArtist }: BulkEditorHeaderProps) {
           <Button
             onClick={onAddArtist}
             size="sm"
-            className="bg-purple-600 hover:bg-purple-700"
+            className="bg-accent text-accent-foreground hover:bg-accent-hover"
           >
             <Plus className="h-4 w-4 mr-1" />
             <span className="hidden md:block">Add Artist</span>
diff --git a/src/pages/admin/festivals/EditionNavLink.tsx b/src/pages/admin/festivals/EditionNavLink.tsx
index 7436ea7fb..c74dd6a65 100644
--- a/src/pages/admin/festivals/EditionNavLink.tsx
+++ b/src/pages/admin/festivals/EditionNavLink.tsx
@@ -22,9 +22,9 @@ export function EditionNavLink({
       from={EDITION_ROOT}
       to={to}
       params={{ festivalSlug, editionSlug }}
-      className="flex items-center justify-center gap-2 px-4 py-2 rounded-md transition-colors text-white font-medium"
-      activeProps={{ className: "bg-purple-600" }}
-      inactiveProps={{ className: "hover:bg-white/10" }}
+      className="flex items-center justify-center gap-2 px-4 py-2 rounded-md transition-colors text-foreground font-medium"
+      activeProps={{ className: "bg-accent text-accent-foreground" }}
+      inactiveProps={{ className: "hover:bg-surface-raised" }}
     >
       {icon}
       {label}
diff --git a/src/pages/admin/festivals/FestivalEditionManagement.tsx b/src/pages/admin/festivals/FestivalEditionManagement.tsx
index 11f1e5377..bbd796d79 100644
--- a/src/pages/admin/festivals/FestivalEditionManagement.tsx
+++ b/src/pages/admin/festivals/FestivalEditionManagement.tsx
@@ -258,7 +258,7 @@ export function FestivalEditionManagement({
             <DialogTrigger asChild>
               <Button
                 onClick={handleCreate}
-                className="bg-purple-600 hover:bg-purple-700"
+                className="bg-accent text-accent-foreground hover:bg-accent-hover"
               >
                 <Plus className="h-4 w-4 mr-2" />
                 Add Edition
diff --git a/src/pages/admin/festivals/FestivalManagementSection.tsx b/src/pages/admin/festivals/FestivalManagementSection.tsx
index cc36b4219..cad14c5da 100644
--- a/src/pages/admin/festivals/FestivalManagementSection.tsx
+++ b/src/pages/admin/festivals/FestivalManagementSection.tsx
@@ -35,7 +35,7 @@ export function FestivalManagementSection({
 
             <Button
               onClick={handleCreate}
-              className="bg-purple-600 hover:bg-purple-700"
+              className="bg-accent text-accent-foreground hover:bg-accent-hover"
             >
               <Plus className="h-4 w-4 mr-2" />
               Add Festival
diff --git a/src/pages/admin/festivals/LinkWizard/ArtistSetCard.tsx b/src/pages/admin/festivals/LinkWizard/ArtistSetCard.tsx
index 55b428815..e23152220 100644
--- a/src/pages/admin/festivals/LinkWizard/ArtistSetCard.tsx
+++ b/src/pages/admin/festivals/LinkWizard/ArtistSetCard.tsx
@@ -16,16 +16,20 @@ export function ArtistSetCard({ set, currentArtistId }: ArtistSetCardProps) {
         <div>
           <h4 className="font-semibold text-sm">{set.name}</h4>
           {set.stage_name && (
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-paper-muted-foreground">
               Stage: {set.stage_name}
             </p>
           )}
         </div>
 
-        {time && <div className="text-xs text-muted-foreground">{time}</div>}
+        {time && (
+          <div className="text-xs text-paper-muted-foreground">{time}</div>
+        )}
 
         {set.description && (
-          <p className="text-xs text-muted-foreground">{set.description}</p>
+          <p className="text-xs text-paper-muted-foreground">
+            {set.description}
+          </p>
         )}
 
         {set.co_performers.length > 0 && (
diff --git a/src/pages/admin/festivals/LinkWizard/LinkWizardTable.tsx b/src/pages/admin/festivals/LinkWizard/LinkWizardTable.tsx
index 75454b69f..c78c2cad0 100644
--- a/src/pages/admin/festivals/LinkWizard/LinkWizardTable.tsx
+++ b/src/pages/admin/festivals/LinkWizard/LinkWizardTable.tsx
@@ -48,7 +48,7 @@ export function LinkWizardTable({
             <TableRow>
               <TableCell
                 colSpan={2}
-                className="text-center text-muted-foreground"
+                className="text-center text-paper-muted-foreground"
               >
                 No artists missing links for this edition.
               </TableCell>
@@ -57,9 +57,7 @@ export function LinkWizardTable({
           {pageArtists.map((artist) => (
             <TableRow
               key={artist.id}
-              className={cn(
-                artist.id === currentArtistId && "bg-purple-600/20",
-              )}
+              className={cn(artist.id === currentArtistId && "bg-accent/20")}
             >
               <TableCell>
                 <button
diff --git a/src/pages/admin/festivals/LinkWizard/SetCoPerformers.tsx b/src/pages/admin/festivals/LinkWizard/SetCoPerformers.tsx
index 9f6daaeaa..db4f994be 100644
--- a/src/pages/admin/festivals/LinkWizard/SetCoPerformers.tsx
+++ b/src/pages/admin/festivals/LinkWizard/SetCoPerformers.tsx
@@ -19,7 +19,7 @@ export function SetCoPerformers({
       <p className="text-xs font-medium mb-1">Co-performers:</p>
       <div className="flex flex-wrap gap-1">
         {otherPerformers.length === 0 ? (
-          <span className="text-xs text-muted-foreground">
+          <span className="text-xs text-paper-muted-foreground">
             No other co-performers
           </span>
         ) : (
diff --git a/src/pages/admin/festivals/StageManagement/CreateStageDialog.tsx b/src/pages/admin/festivals/StageManagement/CreateStageDialog.tsx
index 942137c5f..a59ae7fd5 100644
--- a/src/pages/admin/festivals/StageManagement/CreateStageDialog.tsx
+++ b/src/pages/admin/festivals/StageManagement/CreateStageDialog.tsx
@@ -39,7 +39,7 @@ export function CreateStageDialog({ editionId }: CreateStageDialogProps) {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button className="bg-purple-600 hover:bg-purple-700">
+        <Button className="bg-accent text-accent-foreground hover:bg-accent-hover">
           <Plus className="h-4 w-4 mr-2" />
           Add Stage
         </Button>
diff --git a/src/routes/admin.tsx b/src/routes/admin.tsx
index aefcd2399..6e3f92544 100644
--- a/src/routes/admin.tsx
+++ b/src/routes/admin.tsx
@@ -77,7 +77,7 @@ function AdminLayout() {
   if (isLoadingPermissions || authLoading || isLoadingSuperAdmin) {
     return (
       <div className="min-h-screen bg-app-gradient flex items-center justify-center">
-        <div className="text-white text-xl">Loading...</div>
+        <div className="text-foreground text-xl">Loading...</div>
       </div>
     );
   }
@@ -96,18 +96,18 @@ function AdminLayout() {
             className="w-full"
           >
             <TabsList
-              className={`grid w-full ${isSuperAdmin ? "grid-cols-4" : "grid-cols-3"} bg-white/10 backdrop-blur-md`}
+              className={`grid w-full ${isSuperAdmin ? "grid-cols-4" : "grid-cols-3"} bg-surface-raised backdrop-blur-md`}
             >
               <TabsTrigger
                 value="artists"
-                className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-white"
+                className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground text-foreground"
               >
                 <Music className="h-4 w-4 mr-2" />
                 Artists
               </TabsTrigger>
               <TabsTrigger
                 value="festivals"
-                className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-white"
+                className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground text-foreground"
               >
                 <Calendar className="h-4 w-4 mr-2" />
                 Festival Management
@@ -116,14 +116,14 @@ function AdminLayout() {
                 <>
                   <TabsTrigger
                     value="analytics"
-                    className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-white"
+                    className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground text-foreground"
                   >
                     <BarChart3 className="h-4 w-4 mr-2" />
                     Analytics
                   </TabsTrigger>
                   <TabsTrigger
                     value="admins"
-                    className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-white"
+                    className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground text-foreground"
                   >
                     <UserPlus className="h-4 w-4 mr-2" />
                     Admin Roles
diff --git a/src/routes/admin/analytics.tsx b/src/routes/admin/analytics.tsx
index a5e7dd401..cd40b0b16 100644
--- a/src/routes/admin/analytics.tsx
+++ b/src/routes/admin/analytics.tsx
@@ -37,35 +37,35 @@ function AdminAnalytics() {
 
   return (
     <div className="space-y-6">
-      <Card className="bg-white/10 backdrop-blur-md border-white/20">
+      <Card className="bg-surface-raised backdrop-blur-md border-foreground/20">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-white">
+          <CardTitle className="flex items-center gap-2 text-foreground">
             <Users className="h-5 w-5" />
             Groups Analytics
           </CardTitle>
-          <CardDescription className="text-white/70">
+          <CardDescription className="text-foreground/70">
             Groups with member counts
           </CardDescription>
         </CardHeader>
         <CardContent>
           <Table>
             <TableHeader>
-              <TableRow className="border-white/20">
-                <TableHead className="text-white">Group Name</TableHead>
-                <TableHead className="text-white">Members</TableHead>
-                <TableHead className="text-white">Created</TableHead>
+              <TableRow className="border-foreground/20">
+                <TableHead className="text-foreground">Group Name</TableHead>
+                <TableHead className="text-foreground">Members</TableHead>
+                <TableHead className="text-foreground">Created</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {groupAnalytics.map((group) => (
-                <TableRow key={group.id} className="border-white/10">
-                  <TableCell className="text-white font-medium">
+                <TableRow key={group.id} className="border-foreground/10">
+                  <TableCell className="text-foreground font-medium">
                     {group.name}
                   </TableCell>
-                  <TableCell className="text-white/80">
+                  <TableCell className="text-foreground/80">
                     {group.member_count}
                   </TableCell>
-                  <TableCell className="text-white/80">
+                  <TableCell className="text-foreground/80">
                     {new Date(group.created_at).toLocaleDateString()}
                   </TableCell>
                 </TableRow>
@@ -75,39 +75,39 @@ function AdminAnalytics() {
         </CardContent>
       </Card>
 
-      <Card className="bg-white/10 backdrop-blur-md border-white/20">
+      <Card className="bg-surface-raised backdrop-blur-md border-foreground/20">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-white">
+          <CardTitle className="flex items-center gap-2 text-foreground">
             <Vote className="h-5 w-5" />
             Users Analytics
           </CardTitle>
-          <CardDescription className="text-white/70">
+          <CardDescription className="text-foreground/70">
             Users with vote counts
           </CardDescription>
         </CardHeader>
         <CardContent>
           <Table>
             <TableHeader>
-              <TableRow className="border-white/20">
-                <TableHead className="text-white">Username</TableHead>
-                <TableHead className="text-white">Email</TableHead>
-                <TableHead className="text-white">Votes</TableHead>
-                <TableHead className="text-white">Joined</TableHead>
+              <TableRow className="border-foreground/20">
+                <TableHead className="text-foreground">Username</TableHead>
+                <TableHead className="text-foreground">Email</TableHead>
+                <TableHead className="text-foreground">Votes</TableHead>
+                <TableHead className="text-foreground">Joined</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {userAnalytics.map((user) => (
-                <TableRow key={user.id} className="border-white/10">
-                  <TableCell className="text-white font-medium">
+                <TableRow key={user.id} className="border-foreground/10">
+                  <TableCell className="text-foreground font-medium">
                     {user.username || "No username"}
                   </TableCell>
-                  <TableCell className="text-white/80">
+                  <TableCell className="text-foreground/80">
                     {user.email || "No email"}
                   </TableCell>
-                  <TableCell className="text-white/80">
+                  <TableCell className="text-foreground/80">
                     {user.vote_count}
                   </TableCell>
-                  <TableCell className="text-white/80">
+                  <TableCell className="text-foreground/80">
                     {new Date(user.created_at).toLocaleDateString()}
                   </TableCell>
                 </TableRow>
diff --git a/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug.tsx b/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug.tsx
index 4124018a9..d2d958a96 100644
--- a/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug.tsx
+++ b/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug.tsx
@@ -75,7 +75,7 @@ function FestivalEdition() {
   return (
     <div className="space-y-6">
       <div className="w-full">
-        <div className="sticky top-16 md:top-20 z-10 grid w-full grid-cols-5 gap-2 bg-white/10 backdrop-blur-md p-1 rounded-lg">
+        <div className="sticky top-16 md:top-20 z-10 grid w-full grid-cols-5 gap-2 bg-surface-raised backdrop-blur-md p-1 rounded-lg">
           <EditionNavLink
             to="stages"
             festivalSlug={festivalSlug}
diff --git a/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug/sets.tsx b/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug/sets.tsx
index 317c09d6f..63ca1ac46 100644
--- a/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug/sets.tsx
+++ b/src/routes/admin/festivals/$festivalSlug/editions/$editionSlug/sets.tsx
@@ -92,7 +92,7 @@ function FestivalSets() {
           <div className="flex gap-2">
             <Button
               onClick={handleCreate}
-              className="bg-purple-600 hover:bg-purple-700"
+              className="bg-accent text-accent-foreground hover:bg-accent-hover"
             >
               <Plus className="h-4 w-4 mr-2" />
               Add Set
diff --git a/src/routes/festivals/$festivalSlug/editions/$editionSlug.tsx b/src/routes/festivals/$festivalSlug/editions/$editionSlug.tsx
index 7a3e67600..181dea939 100644
--- a/src/routes/festivals/$festivalSlug/editions/$editionSlug.tsx
+++ b/src/routes/festivals/$festivalSlug/editions/$editionSlug.tsx
@@ -16,7 +16,6 @@ import { getDefaultTab } from "@/pages/EditionView/TabNavigation/defaultTab";
 import { tabRoutes } from "@/pages/EditionView/TabNavigation/tabRoutes";
 import { pageMeta } from "@/lib/pageHead";
 import { SupabaseNotFoundError } from "@/lib/supabaseErrors";
-import { EditionViewRoot } from "@/pages/EditionView/EditionViewRoot";
 
 export const Route = createFileRoute(
   "/festivals/$festivalSlug/editions/$editionSlug",
@@ -83,7 +82,7 @@ function EditionLayout() {
   const { festival, edition } = Route.useRouteContext();
 
   return (
-    <EditionViewRoot>
+    <div className="min-h-screen bg-app-gradient">
       <div className="container mx-auto px-4 py-4 md:py-8 pb-20 md:pb-8">
         <EditionHeader
           title={`${festival.name} - ${edition.name}`}
@@ -99,7 +98,7 @@ function EditionLayout() {
           </ErrorBoundary>
         </div>
       </div>
-    </EditionViewRoot>
+    </div>
   );
 }
 
@@ -107,7 +106,7 @@ function EditionNotFound() {
   const { festivalSlug } = Route.useParams();
 
   return (
-    <EditionViewRoot className="flex items-center justify-center p-4">
+    <div className="min-h-screen bg-app-gradient flex items-center justify-center p-4">
       <div className="text-center text-white">
         <h1 className="text-2xl font-bold mb-4">Edition not found</h1>
         <p className="mb-6 text-purple-200">
@@ -122,6 +121,6 @@ function EditionNotFound() {
           Back to festival
         </Link>
       </div>
-    </EditionViewRoot>
+    </div>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 418e1d171..da7129a1d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -31,6 +31,13 @@ export default {
           raised: "hsl(var(--surface-raised))",
           active: "hsl(var(--surface-active))",
         },
+        paper: {
+          background: "hsl(var(--paper-background))",
+          foreground: "hsl(var(--paper-foreground))",
+          "muted-foreground": "hsl(var(--paper-muted-foreground))",
+          border: "hsl(var(--paper-border))",
+          ring: "hsl(var(--paper-ring))",
+        },
         live: {
           DEFAULT: "hsl(var(--live))",
           foreground: "hsl(var(--live-foreground))",
@@ -75,6 +82,7 @@ export default {
         accent: {
           DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
+          hover: "hsl(var(--accent-hover))",
           soft: "hsl(var(--accent-soft))",
         },
         popover: {