get-shit-pretty 0.7.4 → 0.8.2

package/gsp/skills/gsp-scaffold/shadcn-theming.md

@@ -0,0 +1,310 @@
+# shadcn/ui Theming Reference
+
+Agent reference for building and fixing shadcn/ui themes. Source: https://ui.shadcn.com/docs/theming
+
+---
+
+## How theming works
+
+shadcn uses **CSS custom properties** as semantic tokens. Components reference tokens like `bg-primary` or `text-muted-foreground` — never raw colors. Tokens are defined in `:root` (light) and `.dark` (dark), then aliased into Tailwind via `@theme inline`.
+
+```
+CSS custom property (:root / .dark)
+        ↓
+@theme inline alias (--color-primary: var(--primary))
+        ↓
+Tailwind utility (bg-primary, text-primary-foreground)
+        ↓
+Component (Button, Card, etc.)
+```
+
+Changing a token in `:root`/`.dark` immediately affects every component that uses it. Never hardcode colors in components.
+
+---
+
+## Full token reference
+
+All tokens are OKLCH values (`oklch(L C H)`). No `hsl()` wrapper.
+
+### Surface tokens (background / foreground pairs)
+
+| Token | Controls | Used by |
+|-------|----------|---------|
+| `--background` / `--foreground` | Default app background and text | Page shell, body |
+| `--card` / `--card-foreground` | Elevated surfaces | `Card`, panels |
+| `--popover` / `--popover-foreground` | Floating surfaces | `Popover`, `DropdownMenu`, `ContextMenu` |
+| `--muted` / `--muted-foreground` | Subtle surfaces and subdued text | Descriptions, placeholders, helper text, empty states |
+
+**Convention:** the base token is the surface color; `-foreground` is the text/icon color sitting on it. The `background` suffix is omitted from the surface token — `primary` is the surface, `primary-foreground` is the text on it.
+
+### Semantic action tokens
+
+| Token | Controls | Used by |
+|-------|----------|---------|
+| `--primary` / `--primary-foreground` | High-emphasis brand actions | Default `Button`, selected states, active accents |
+| `--secondary` / `--secondary-foreground` | Lower-emphasis filled actions | Secondary buttons, supporting UI |
+| `--accent` / `--accent-foreground` | Hover, focus, and active states | Ghost buttons, menu highlights, hovered rows |
+| `--destructive` | Destructive actions and errors | Destructive `Button`, invalid states |
+
+### Form and border tokens
+
+| Token | Controls | Used by |
+|-------|----------|---------|
+| `--border` | Default borders and separators | Cards, menus, tables, separators |
+| `--input` | Form control borders | `Input`, `Textarea`, `Select`, outline controls |
+| `--ring` | Focus rings | Buttons, inputs, checkboxes, focusable elements |
+
+### Chart tokens
+
+| Token | Controls |
+|-------|----------|
+| `--chart-1` … `--chart-5` | Default chart palette |
+
+**Chart token rules (Recharts v3):**
+- Reference as `fill="var(--chart-1)"` or `fill="var(--color-chart-1)"` — **no `hsl()` wrapper**
+- Must appear in both `:root` AND `.dark` blocks
+- Use in `chartConfig` as `color: "var(--chart-1)"`
+
+### Sidebar tokens
+
+| Token | Controls |
+|-------|----------|
+| `--sidebar` / `--sidebar-foreground` | Sidebar surface and default text |
+| `--sidebar-primary` / `--sidebar-primary-foreground` | Active items, icon tiles, badges |
+| `--sidebar-accent` / `--sidebar-accent-foreground` | Hover states, open items |
+| `--sidebar-border` | Sidebar borders and separators |
+| `--sidebar-ring` | Focus rings inside sidebar |
+
+**Sidebar width:** set via inline style on `<SidebarProvider>`, not as a global CSS token:
+```tsx
+<SidebarProvider style={{ "--sidebar-width": "19rem" } as React.CSSProperties}>
+```
+
+### Radius tokens
+
+`--radius` is the single source of truth. All other radius values derive from it:
+
+```css
+@theme inline {
+  --radius-sm:  calc(var(--radius) * 0.6);
+  --radius-md:  calc(var(--radius) * 0.8);
+  --radius-lg:  var(--radius);             /* base */
+  --radius-xl:  calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+```
+
+Change `--radius` in `:root` to shift the entire radius scale.
+
+---
+
+## Minimal globals.css structure (Tailwind v4)
+
+```css
+@import "tailwindcss";
+@import "shadcn/tailwind.css";          /* NOT tw-animate-css */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /* Color aliases — do NOT put actual values here */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  /* Radius scale */
+  --radius-sm:  calc(var(--radius) * 0.6);
+  --radius-md:  calc(var(--radius) * 0.8);
+  --radius-lg:  var(--radius);
+  --radius-xl:  calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  /* Fonts (literal values, not var() self-references) */
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  /* … all tokens … */
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  /* … all dark overrides … chart tokens MUST be here too … */
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  button:not(:disabled), [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+```
+
+---
+
+## Adding custom tokens
+
+To add a new semantic token (e.g. `warning`):
+
+```css
+/* 1. Define values in :root and .dark */
+:root {
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+}
+.dark {
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+}
+```
+
+**Tailwind v4** — alias in `@theme inline`:
+
+```css
+@theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
+```
+
+**Tailwind v3** — register in `tailwind.config.js` instead:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        warning: "oklch(var(--warning) / <alpha-value>)",
+        "warning-foreground": "oklch(var(--warning-foreground) / <alpha-value>)",
+      },
+    },
+  },
+}
+```
+
+Check `tailwindVersion` from `npx shadcn@latest info` to know which to use. Always edit the file at `tailwindCssFile` from the same output — never create a new CSS file.
+
+Now use `bg-warning` and `text-warning-foreground` in components.
+
+---
+
+## Changing the theme via preset
+
+The fastest way to change the full theme is via `apply`:
+
+```bash
+# Apply a preset to an existing project (overwrites detected components, fonts, CSS vars)
+npx shadcn@latest apply --preset a2r6bw
+npx shadcn@latest apply nova              # shorthand for named preset
+
+# Preserve existing components — update config and CSS only
+npx shadcn@latest init --preset nova --force --no-reinstall
+```
+
+Named presets: `nova`, `vega`, `maia`, `lyra`, `mira`, `luma`
+
+Preset codes (e.g. `a2r6bw`) come from `ui.shadcn.com/create`. Pass them directly — never decode them manually.
+
+---
+
+## Dark mode setup (Next.js)
+
+```bash
+npm install next-themes
+```
+
+```tsx
+// components/theme-provider.tsx
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+export function ThemeProvider({ children, ...props }) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+```
+
+```tsx
+// app/layout.tsx
+import { ThemeProvider } from "@/components/theme-provider"
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+- `attribute="class"` — sets `.dark` class on `<html>`
+- `suppressHydrationWarning` — required to avoid SSR/client mismatch on theme class
+- For dark-by-default or light-only apps, skip `ThemeProvider` and hardcode `<html className="dark">` or leave it unset
+
+---
+
+## Common theming bugs and fixes
+
+| Symptom | Cause | Fix |
+|---------|-------|-----|
+| Colors look washed out / all grey | `components.json` has `cssVariables: false` | Re-init with `cssVariables: true` (must delete + reinstall components) |
+| Dark mode colors not applying | `.dark` block missing from `globals.css` | Add `.dark { }` block with all dark overrides |
+| Chart colors ignore dark mode | Chart tokens only in `:root`, not `.dark` | Add `--chart-1` … `--chart-5` to `.dark` block |
+| `bg-primary` renders nothing | Token missing from `@theme inline` | Add `--color-primary: var(--primary)` to `@theme inline` |
+| Sidebar wrong color | Using old `--sidebar-background` token name | Rename to `--sidebar` (shadcn v2 token rename) |
+| Font not applying | `--font-sans: var(--font-sans)` self-reference | Use literal value: `--font-sans: "Inter", sans-serif` |
+| Tailwind v4 `hsl()` not resolving | Tokens are OKLCH but wrapped in `hsl()` | Remove `hsl()` wrapper — write `oklch(L C H)` directly |
+| Animations missing / broken | Using `tw-animate-css` | Switch to `@import "shadcn/tailwind.css"` |
+| `shadcn add` overwrites custom tokens | Components installed after token injection | Install all components first, then write tokens |
+| Radius not scaling | `--radius-sm` etc. hardcoded instead of derived | Use `calc(var(--radius) * N)` in `@theme inline` |
+| Buttons missing pointer cursor | Tailwind v4 changed button cursor default | Add cursor rule to `@layer base` (see template above) |
+
+---
+
+## Base color options
+
+`tailwind.baseColor` in `components.json` controls the default neutral values generated at init. Options: **Neutral**, **Stone**, **Zinc**, **Mauve**, **Olive**, **Mist**, **Taupe**.
+
+This is set once at init and should not be changed — changing it requires deleting and reinstalling all components.

package/gsp/skills/gsp-start/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: gsp-start
-description: Start here — picks up where you left off
+description: Start the GSP pipeline — use when starting a new feature, I want to build X, help me design, let's work on, or kicking off any new work
 user-invocable: true
 allowed-tools:
   - Read
@@ -39,7 +39,7 @@ Scan `.design/` for existing brands and projects:
 - Check `.design/branding/` for brand directories (each has a `config.json` with `project_type: "brand"`)
 - Check `.design/projects/` for project directories (each has a `config.json` with `project_type: "design"`)
 - Check for legacy flat `.design/config.json` at root (pre-0.4.0 structure)
-- For each brand/project found, read its `config.json` to get phase statuses
+- For each brand/project found, read its `config.json` for project metadata (name, created, preferences) and read its `STATE.md` for phase progress (the phase table with pending/complete/in-progress/needs-revision statuses)
 
 ### Step 1b: Quick codebase check (inline — no agents)
 
@@ -51,6 +51,15 @@ If `package.json` exists, read it to extract:
 
 Quick glob for component count: `src/components/**/*` or `components/**/*`.
 
+**Monorepo detection:** After reading root `package.json`, glob for `apps/*/package.json` and `packages/*/package.json`. If any are found:
+- Set `REPO_TYPE = monorepo`
+- Read each discovered package.json to extract app name + primary framework dependency
+- Build an app list: `[(apps/web, Next.js), (apps/mobile, Expo), ...]`
+
+If no nested package.json files found: set `REPO_TYPE = single`.
+
+Also read `.design/system/STACK.md` if it exists — this is the **global stack declaration** for the workspace. When present, use it as the authoritative source for framework, styling, component library, and architecture. Surface it in the codebase summary box so every new project starts knowing the declared stack.
+
 Also scan for brand-relevant assets:
 - Logo files: glob for `**/logo*.{svg,png}`, `**/icon*.{svg,png}` in public/assets directories
 - Font files: glob for `**/*.{woff,woff2,ttf,otf}` in public/fonts or similar
@@ -80,9 +89,16 @@ If codebase was detected, show a summary box:
   │  components    47 detected              │
   │  assets        logo.svg, 2 font files   │
   │  type          existing codebase        │
+  │  repo type     monorepo (3 apps detected)│
+  │  apps          web · mobile · docs      │
+  │  stack         declared (STACK.md ✓)   │
   └──────────────────────────────────────────┘
 ```
 
+For single-app repos, show `repo type: single app` and omit the `apps` row.
+
+Show `stack: declared (STACK.md ✓)` when `.design/system/STACK.md` exists — this signals to the user that every new project will inherit the workspace stack. If STACK.md is missing for an existing codebase, show `stack: undeclared — run /gsp-design-system`.
+
 Use `AskUserQuestion` with:
 - **New brand** — "Create a brand identity from scratch"
 - **Evolve existing brand** — "I have brand materials to work with"

package/gsp/skills/gsp-style/SKILL.md

@@ -127,7 +127,7 @@ Copy the preset `.yml` to the output path as the brand's style source:
 
 If a `.yml` already exists at the output path, use `AskUserQuestion`: "A style preset already exists — overwrite?" with options **Overwrite** and **Cancel**. If cancelled, skip and proceed.
 
-The `.yml` IS the token source of truth — no separate `tokens.json` needed. The builder generates CSS variables from it at build time using `gsp-brand-guidelines/token-mapping.md`.
+The `.yml` IS the token source of truth — no separate `tokens.json` needed. Token names in `.yml` map 1:1 to shadcn/ui CSS variable names. Run `node bin/theme-css.js {preset-name}.yml` to generate a ready-to-paste `:root`/`.dark` CSS block.
 
 ## Step 7: Write STYLE.md
 

package/gsp/skills/gsp-style/style-preset-schema.md

@@ -2,6 +2,13 @@
 
 Template for brand-derived style preset files (`{brand-name}.yml`). All token values must trace to foundation chunks. See any preset in `styles/` for a complete example.
 
+Token names map 1:1 to shadcn/ui CSS variables — no translation layer. `bin/theme-css.js` reads this file and outputs a ready-to-paste `:root`/`.dark` block.
+
+**Value formats:**
+- Solid colors: `"#RRGGBB"` hex — theme-css.js converts to OKLCH
+- Alpha colors (translucent presets): `"oklch(L% C H / A)"` — passed through as-is
+- Shadows, borders, font stacks: raw CSS strings
+
 ```yaml
 name: {brand-slug}
 description: {one-line brand aesthetic summary}
@@ -10,18 +17,47 @@ source: brand  # marks this as brand-derived, not a GSP preset
 
 tokens:
   color:
-    primary: "{hex}"        # from identity/color-system.md
-    secondary: "{hex}"
-    accent: "{hex}"
-    background: "{hex}"
-    surface: "{hex}"
-    on-primary: "{hex}"
-    on-background: "{hex}"
-    error: "{hex}"
+    # Core — map directly to shadcn/ui :root CSS vars
+    background: "{hex}"           # --background
+    foreground: "{hex}"           # --foreground (primary text)
+    card: "{hex}"                 # --card (panel/card fill; use oklch/alpha for translucent)
+    card-foreground: "{hex}"      # --card-foreground
+    popover: "{hex}"              # --popover (usually same as card)
+    popover-foreground: "{hex}"   # --popover-foreground
+    primary: "{hex}"              # --primary
+    primary-foreground: "{hex}"   # --primary-foreground
+    secondary: "{hex}"            # --secondary
+    secondary-foreground: "{hex}" # --secondary-foreground
+    accent: "{hex}"               # --accent
+    accent-foreground: "{hex}"    # --accent-foreground
+    muted: "{hex}"                # --muted
+    muted-foreground: "{hex}"     # --muted-foreground
+    destructive: "{hex}"          # --destructive (replaces legacy error)
+    border: "{hex}"               # --border (absorbs legacy shape.border-color)
+    input: "{hex}"                # --input (usually same as border)
+    ring: "{hex}"                 # --ring (focus ring, usually same as primary)
+
+    # Sidebar — explicit for full design control
+    sidebar: "{hex}"                       # --sidebar (shadcn uses --sidebar, not --sidebar-background)
+    sidebar-foreground: "{hex}"            # --sidebar-foreground
+    sidebar-primary: "{hex}"               # --sidebar-primary
+    sidebar-primary-foreground: "{hex}"    # --sidebar-primary-foreground
+    sidebar-accent: "{hex}"                # --sidebar-accent
+    sidebar-accent-foreground: "{hex}"     # --sidebar-accent-foreground
+    sidebar-border: "{hex}"                # --sidebar-border
+    sidebar-ring: "{hex}"                  # --sidebar-ring
+
+    # Chart — 5 intentional data-viz colors (distinct, accessible at small sizes)
+    chart-1: "{hex}"   # --chart-1
+    chart-2: "{hex}"   # --chart-2
+    chart-3: "{hex}"   # --chart-3
+    chart-4: "{hex}"   # --chart-4
+    chart-5: "{hex}"   # --chart-5
+
+    # Extras — generate as custom properties (--success, --warning, --info)
     success: "{hex}"
     warning: "{hex}"
     info: "{hex}"
-    muted: "{hex}"
 
   typography:
     font-family-primary: "{font stack}"  # from identity/typography.md
@@ -32,11 +68,12 @@ tokens:
     line-height-base: {number}
 
   shape:
-    border-radius-sm: "{px}"  # from patterns/component specs
+    # border-radius-lg → --radius; sm/md used in pattern references
+    border-radius-sm: "{px}"
     border-radius-md: "{px}"
     border-radius-lg: "{px}"
     border-width: "{px}"
-    border-color: "{hex}"
+    # Note: border-color removed — use color.border above
 
   elevation:
     shadow-sm: "{value}"
@@ -55,11 +92,19 @@ tokens:
 
 dark_mode:
   color:
+    # Only list tokens that differ from light mode
     background: "{hex}"
-    surface: "{hex}"
-    on-background: "{hex}"
-    border-color: "{hex}"
+    foreground: "{hex}"
+    card: "{hex}"
+    card-foreground: "{hex}"
     muted: "{hex}"
+    muted-foreground: "{hex}"
+    border: "{hex}"
+    input: "{hex}"
+    sidebar: "{hex}"
+    sidebar-border: "{hex}"
+    # chart-1 through chart-5 only if they change in dark mode
+    # primary/accent/destructive only if they change in dark mode
 
 intensity:
   variance: {1-10}    # layout creativity — 1=strict grid, 10=experimental

package/gsp/skills/gsp-style/styles/academia.yml

@@ -5,17 +5,44 @@ trend_ref: trends/academia.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#FEF7ED"
+    foreground: "#1C1917"
+    card: "#F5F5F4"
+    card-foreground: "#1C1917"
+    popover: "#F5F5F4"
+    popover-foreground: "#1C1917"
     primary: "#7C2D12"
+    primary-foreground: "#FFFFFF"
     secondary: "#92400E"
+    secondary-foreground: "#FFFFFF"
     accent: "#C9A962"
-    background: "#FEF7ED"
-    surface: "#F5F5F4"
-    on-primary: "#FFFFFF"
-    on-background: "#1C1917"
-    error: "#DC2626"
+    accent-foreground: "#1C1917"
+    muted: "#E7E5E4"
+    muted-foreground: "#78716C"
+    destructive: "#DC2626"
+    border: "#D6D3D1"
+    input: "#D6D3D1"
+    ring: "#7C2D12"
+    # Sidebar
+    sidebar: "#F5F5F4"
+    sidebar-foreground: "#1C1917"
+    sidebar-primary: "#7C2D12"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#E7E5E4"
+    sidebar-accent-foreground: "#1C1917"
+    sidebar-border: "#D6D3D1"
+    sidebar-ring: "#7C2D12"
+    # Extras
     success: "#16A34A"
     warning: "#D97706"
     info: "#2563EB"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#7C2D12"  # crimson mahogany (primary)
+    chart-2: "#C9A962"  # burnished brass (accent)
+    chart-3: "#2563EB"  # ink blue (info)
+    chart-4: "#16A34A"  # library green (success)
+    chart-5: "#92400E"  # dark amber (secondary)
 
   typography:
     font-family-primary: "EB Garamond, Georgia, serif"
@@ -31,7 +58,6 @@ tokens:
     border-radius-md: "4px"
     border-radius-lg: "8px"
     border-width: "1px"
-    border-color: "#D6D3D1"
 
   elevation:
     shadow-sm: "0 1px 2px rgba(0,0,0,0.05)"
@@ -59,8 +85,32 @@ tokens:
 dark_mode:
   color:
     background: "#1C1714"
-    surface: "#251E19"
-    on-background: "#E8DFD4"
+    foreground: "#E8DFD4"
+    card: "#251E19"
+    card-foreground: "#E8DFD4"
+    popover: "#251E19"
+    popover-foreground: "#E8DFD4"
+    primary: "#7C2D12"
+    primary-foreground: "#FFFFFF"
+    secondary: "#92400E"
+    secondary-foreground: "#FFFFFF"
+    accent: "#C9A962"
+    accent-foreground: "#1C1917"
+    muted: "#292524"
+    muted-foreground: "#A8A29E"
+    destructive: "#DC2626"
+    border: "#44403C"
+    input: "#44403C"
+    ring: "#7C2D12"
+    # Sidebar
+    sidebar: "#251E19"
+    sidebar-foreground: "#E8DFD4"
+    sidebar-primary: "#7C2D12"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#292524"
+    sidebar-accent-foreground: "#E8DFD4"
+    sidebar-border: "#44403C"
+    sidebar-ring: "#7C2D12"
 
 intensity:
   variance: 3     # classical symmetry with occasional 60/40 splits, mostly balanced

package/gsp/skills/gsp-style/styles/art-deco.yml

@@ -5,17 +5,44 @@ trend_ref: trends/art-deco.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#0A0A0A"
+    foreground: "#F2F0E4"
+    card: "#141414"
+    card-foreground: "#F2F0E4"
+    popover: "#141414"
+    popover-foreground: "#F2F0E4"
     primary: "#D4AF37"
+    primary-foreground: "#000000"
     secondary: "#1E3D59"
+    secondary-foreground: "#F2F0E4"
     accent: "#F2F0E4"
-    background: "#0A0A0A"
-    surface: "#141414"
-    on-primary: "#000000"
-    on-background: "#F2F0E4"
-    error: "#DC2626"
+    accent-foreground: "#000000"
+    muted: "#1F1F1F"
+    muted-foreground: "#A8A090"
+    destructive: "#DC2626"
+    border: "rgba(212, 175, 55, 0.3)"
+    input: "rgba(212, 175, 55, 0.3)"
+    ring: "#D4AF37"
+    # Sidebar
+    sidebar: "#141414"
+    sidebar-foreground: "#F2F0E4"
+    sidebar-primary: "#D4AF37"
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "#1F1F1F"
+    sidebar-accent-foreground: "#F2F0E4"
+    sidebar-border: "rgba(212, 175, 55, 0.3)"
+    sidebar-ring: "#D4AF37"
+    # Extras
     success: "#16A34A"
     warning: "#F59E0B"
     info: "#3B82F6"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#D4AF37"  # radiant gold (primary)
+    chart-2: "#6BAED6"  # dusty cerulean (secondary shifted)
+    chart-3: "#FF6B35"  # burnished copper
+    chart-4: "#A8D5A2"  # art nouveau sage
+    chart-5: "#C084FC"  # amethyst
 
   typography:
     font-family-primary: "Josefin Sans, sans-serif"
@@ -31,7 +58,6 @@ tokens:
     border-radius-md: "2px"
     border-radius-lg: "6px"
     border-width: "1px"
-    border-color: "rgba(212, 175, 55, 0.3)"
 
   elevation:
     shadow-sm: "0 0 10px rgba(212,175,55,0.1)"
@@ -55,7 +81,13 @@ tokens:
 dark_mode:
   color:
     background: "#050505"
-    surface: "#0A0A0A"
+    foreground: "#F2F0E4"
+    card: "#0A0A0A"
+    card-foreground: "#F2F0E4"
+    popover: "#0A0A0A"
+    popover-foreground: "#F2F0E4"
+    border: "rgba(212, 175, 55, 0.3)"
+    input: "rgba(212, 175, 55, 0.3)"
 
 intensity:
   variance: 3     # bilateral symmetry, centered axes, mathematical precision