setup admin connection

sop-front/README.md

@@ -95,20 +95,37 @@ npm run dev
 
 ## Customizing colors / fonts
 
-**All design tokens live in [`src/assets/main.css`](src/assets/main.css)** under `@theme`. Add new colors there as `--color-<name>: #hex;` and they become available as Tailwind utilities (`bg-<name>`, `text-<name>`) and as `var(--color-<name>)`. Don't hardcode hex values in components.
+**All design tokens live in [`src/assets/main.css`](src/assets/main.css)** under `@theme`. The palette is **graded** (Tailwind-style): each hue has a 50–900 scale, with **500** as the canonical brand value. Add new shades there; don't hardcode hex values in components.
 
-Current palette comes from the user's reference image:
+### Scales (`50` lightest → `900/950` darkest)
 
-| Token | Hex | Role |
+| Family | 500 (brand) | Use |
 |---|---|---|
-| `--color-clothes` | `#8324DE` | Primary purple (CTAs) |
-| `--color-smash` / `--color-tongue` | `#B9D532` | Smash green |
-| `--color-pass` / `--color-iris` | `#FF453B` | Pass red |
-| `--color-bg` | `#16141A` | Dark grey background |
-| `--color-surface` | `#1F1C24` | Card surface |
-| `--color-fur` | `#FBF9FD` | Off-white text |
+| `--color-purple-{50…900}` | `#8324DE` | Primary brand |
+| `--color-red-{50…900}` | `#FF453B` | Pass / errors / destructive |
+| `--color-lime-{50…900}` | `#B9D532` | Smash / success |
+| `--color-neutral-{50…950}` | `#63586E` | Backgrounds, surfaces, text, borders |
 
-Fonts: **Bebas Neue** (display) + **Inter** (body), loaded via Google Fonts in `main.css`.
+Components reference shades like `var(--color-purple-300)`, `var(--color-neutral-800)`, etc. The neutral scale handles dark-mode surfaces (`50` = off-white text, `950` = `#16141A` background).
+
+### Semantic aliases (prefer these in components)
+
+These point at scale values — change them once in `main.css` to retheme:
+
+| Alias | → Scale | Role |
+|---|---|---|
+| `--color-primary` | `purple-500` | CTAs / brand |
+| `--color-primary-hover` | `purple-400` | CTA hover |
+| `--color-smash` | `lime-500` | Smash action |
+| `--color-pass` | `red-500` | Pass action |
+| `--color-bg` | `neutral-950` | App background |
+| `--color-surface` | `neutral-900` | Card surface |
+| `--color-surface-2` | `neutral-800` | Elevated surface |
+| `--color-border` | `neutral-700` | Borders |
+| `--color-text` | `neutral-50` | Primary text |
+| `--color-text-muted` | `neutral-300` | Secondary text |
+
+Fonts: **Bebas Neue** (display) + **Roboto** (body), loaded via Google Fonts in `main.css`.
 
 ---