@cellarnode/ui 0.1.0

package/package.json

@@ -0,0 +1,166 @@
+{
+  "name": "@cellarnode/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "description": "Shared UI components, theme tokens, and chat/offer primitives for CellarNode dashboards.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CellarNode/CellarNode.git",
+    "directory": "ui"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "restricted"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme/tokens.css": "./src/theme/tokens.css",
+    "./chat": {
+      "types": "./dist/chat/index.d.ts",
+      "default": "./dist/chat/index.js"
+    },
+    "./offer": {
+      "types": "./dist/offer/index.d.ts",
+      "default": "./dist/offer/index.js"
+    },
+    "./kanban-dnd": {
+      "types": "./dist/components/kanban-dnd-board.d.ts",
+      "default": "./dist/components/kanban-dnd-board.js"
+    },
+    "./kanban-dnd-hooks": {
+      "types": "./dist/hooks/use-kanban-dnd.d.ts",
+      "default": "./dist/hooks/use-kanban-dnd.js"
+    },
+    "./globe": {
+      "types": "./dist/globe/index.d.ts",
+      "default": "./dist/globe/index.js"
+    },
+    "./animated-list": {
+      "types": "./dist/components/animated-list.d.ts",
+      "default": "./dist/components/animated-list.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/theme/tokens.css"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@dnd-kit/dom": "^0.3.2",
+    "@dnd-kit/react": "^0.3.2",
+    "@tanstack/react-query": "^5.0.0",
+    "i18n-iso-countries": ">=7.0.0",
+    "motion": "^12.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-globe.gl": ">=2.37.0",
+    "three": ">=0.170.0",
+    "topojson-client": ">=3.0.0",
+    "world-atlas": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@dnd-kit/dom": {
+      "optional": true
+    },
+    "@dnd-kit/react": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "motion": {
+      "optional": true
+    },
+    "react-globe.gl": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "topojson-client": {
+      "optional": true
+    },
+    "world-atlas": {
+      "optional": true
+    },
+    "i18n-iso-countries": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^1.7.0",
+    "radix-ui": "^1.4.3",
+    "react-hook-form": "^7.72.0",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.1",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@dnd-kit/dom": "^0.3.2",
+    "@dnd-kit/react": "^0.3.2",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-mcp": "^0.4.2",
+    "@storybook/addon-themes": "^10.3.3",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-query": "^5.95.2",
+    "@types/geojson": "^7946.0.16",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.183.1",
+    "@types/topojson-client": "^3.1.5",
+    "@types/topojson-specification": "^1.0.5",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
+    "i18n-iso-countries": "^7.14.0",
+    "motion": "^12.38.0",
+    "playwright": "^1.58.2",
+    "react-globe.gl": "^2.37.0",
+    "storybook": "^10.3.3",
+    "tailwindcss": "^4.2.2",
+    "three": "^0.182.0",
+    "topojson-client": "^3.1.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.2",
+    "world-atlas": "^2.0.2"
+  }
+}

package/src/theme/tokens.css

@@ -0,0 +1,475 @@
+/* @cellarnode/ui — Canonical Design Tokens
+ * Import in your app: @import "@cellarnode/ui/theme/tokens.css";
+ * Then import tailwindcss after it.
+ */
+
+@theme inline {
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-display: var(--font-sora), ui-sans-serif, system-ui, sans-serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-card-feature: var(--card-feature);
+  --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-accent-secondary: var(--accent-secondary);
+  --color-accent-secondary-foreground: var(--accent-secondary-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --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);
+
+  /* Brand color aliases */
+  --color-brand-primary: var(--primary);
+  --color-brand-primary-foreground: var(--primary-foreground);
+  --color-brand-secondary: var(--accent-secondary);
+  --color-brand-secondary-foreground: var(--accent-secondary-foreground);
+  --color-link: var(--accent-secondary);
+  --color-link-foreground: var(--accent-secondary-foreground);
+  --color-subtitle-accent: var(--accent-secondary);
+  --color-button-teal: var(--primary);
+  --color-button-teal-hover: var(--primary);
+  --color-button-teal-foreground: var(--primary-foreground);
+  --color-switch-unchecked: oklch(0.68 0.08 58);
+
+  --color-sidebar: var(--sidebar-background);
+  --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-sm: calc(var(--radius) - 6px);
+  --radius-md: calc(var(--radius) - 3px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 0.35rem);
+  --radius-2xl: calc(var(--radius) + 0.8rem);
+
+  --shadow-glass: 0 12px 36px -28px oklch(0.2 0.005 230 / 0.14);
+  --shadow-glass-elevated: 0 28px 70px -36px oklch(0.2 0.005 230 / 0.22);
+  --shadow-kanban-column: 0 1px 3px oklch(0.2 0.005 230 / 0.04), 0 8px 24px -12px oklch(0.2 0.005 230 / 0.06);
+
+  --animate-accordion-down: accordion-down 0.22s ease-out;
+  --animate-accordion-up: accordion-up 0.22s ease-out;
+  --animate-fade-in: fade-in 0.24s ease-out forwards;
+  --animate-fade-in-up: fade-in-up 0.48s ease-out forwards;
+  --animate-slide-up: slide-up 0.24s ease-out forwards;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+  --radius: 1.2rem;
+  --field-placeholder: oklch(0.5 0.018 182);
+
+  --background: oklch(0.995 0.002 95);
+  --foreground: oklch(0.22 0.016 180);
+  --card: color-mix(in oklab, white 98.5%, oklch(0.40 0.062 178) 1.5%);
+  --card-foreground: var(--foreground);
+  --card-feature: color-mix(in oklab, white 96%, oklch(0.40 0.062 178) 4%);
+  --popover: color-mix(in oklab, white 98.5%, oklch(0.40 0.062 178) 1.5%);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.40 0.062 178);
+  --primary-foreground: oklch(0.988 0.004 98);
+  --secondary: color-mix(in oklab, white 95%, var(--primary) 5%);
+  --secondary-foreground: color-mix(in oklab, black 54%, var(--primary) 46%);
+  --muted: color-mix(in oklab, white 96%, var(--foreground) 4%);
+  --muted-foreground: oklch(0.48 0.018 182);
+  --accent: color-mix(in oklab, white 94%, var(--primary) 6%);
+  --accent-foreground: color-mix(in oklab, black 48%, var(--primary) 52%);
+  --accent-secondary: oklch(0.666 0.179 58.318);
+  --accent-secondary-foreground: oklch(0.29 0.045 58.318);
+  --success: oklch(0.56 0.105 160);
+  --success-foreground: oklch(0.988 0.004 98);
+  --warning: var(--accent-secondary);
+  --warning-foreground: var(--accent-secondary-foreground);
+  --destructive: oklch(0.58 0.18 29);
+  --destructive-foreground: oklch(0.988 0.004 20);
+  --border: color-mix(in oklab, white 88%, var(--primary) 12%);
+  --input: color-mix(in oklab, white 90%, var(--primary) 10%);
+  --ring: color-mix(in oklab, white 28%, var(--primary) 72%);
+
+  --chart-1: var(--primary);
+  --chart-2: var(--accent-secondary);
+  --chart-3: oklch(0.62 0.068 145);
+  --chart-4: oklch(0.59 0.05 215);
+  --chart-5: var(--destructive);
+
+  /* Surfaces */
+  --surface-base:
+    radial-gradient(circle at top left, color-mix(in oklab, white 92%, var(--primary) 8%) 0%, transparent 34%),
+    radial-gradient(circle at top right, color-mix(in oklab, white 90%, var(--accent-secondary) 10%) 0%, transparent 26%),
+    linear-gradient(180deg, color-mix(in oklab, white 99%, var(--primary) 1%), color-mix(in oklab, white 97%, var(--primary) 3%));
+  --surface-subtle: color-mix(in oklab, white 97.5%, var(--primary) 2.5%);
+  --surface-panel:
+    linear-gradient(180deg, color-mix(in oklab, white 98%, var(--primary) 2%), color-mix(in oklab, white 96%, var(--primary) 4%));
+  --surface-panel-strong:
+    linear-gradient(180deg, color-mix(in oklab, white 96%, var(--primary) 4%), color-mix(in oklab, white 93%, var(--primary) 7%));
+  --surface-hero:
+    radial-gradient(circle at top left, color-mix(in oklab, white 84%, var(--primary) 16%) 0%, transparent 36%),
+    radial-gradient(circle at 86% 2%, color-mix(in oklab, white 85%, var(--accent-secondary) 15%) 0%, transparent 28%),
+    linear-gradient(180deg, color-mix(in oklab, white 99%, var(--primary) 1%), color-mix(in oklab, white 93%, var(--primary) 7%));
+  --surface-hover: color-mix(in oklab, white 93%, var(--primary) 7%);
+  --surface-selected: color-mix(in oklab, white 90%, var(--primary) 10%);
+  --panel-border-strong: color-mix(in oklab, var(--border) 84%, var(--primary) 16%);
+  --panel-shadow: 0 26px 60px -34px oklch(0.2 0.005 230 / 0.12);
+  --shadow-soft: 0 18px 42px -30px oklch(0.2 0.005 230 / 0.10);
+  --shadow-medium: 0 26px 60px -34px oklch(0.2 0.005 230 / 0.14);
+  --shadow-glow: 0 20px 60px -34px oklch(0.40 0.062 178 / 0.36);
+  --shadow-warm-glow: 0 20px 60px -34px oklch(0.666 0.179 58.318 / 0.30);
+  --table-header-bg: color-mix(in oklab, white 98%, var(--primary) 2%);
+  --table-row-hover: color-mix(in oklab, white 97%, var(--primary) 3%);
+  --grid-dot: color-mix(in oklab, var(--border) 42%, transparent);
+
+  /* Tone tokens — brand */
+  --tone-brand-soft: color-mix(in oklab, white 92%, var(--primary) 8%);
+  --tone-brand-surface: color-mix(in oklab, white 94%, var(--primary) 6%);
+  --tone-brand-surface-strong: color-mix(in oklab, white 92%, var(--primary) 8%);
+  --tone-brand-solid: var(--primary);
+  --tone-brand-fg: color-mix(in oklab, black 44%, var(--primary) 56%);
+  --tone-brand-solid-fg: var(--primary-foreground);
+  --tone-brand-border: color-mix(in oklab, white 72%, var(--primary) 28%);
+  --tone-brand-ring: color-mix(in oklab, transparent 36%, var(--primary) 64%);
+  --tone-brand-muted: color-mix(in oklab, white 20%, var(--primary) 80%);
+
+  /* Tone tokens — warning */
+  --tone-warning-soft: color-mix(in oklab, white 90%, var(--warning) 10%);
+  --tone-warning-surface: color-mix(in oklab, white 93%, var(--warning) 7%);
+  --tone-warning-surface-strong: color-mix(in oklab, white 90%, var(--warning) 10%);
+  --tone-warning-solid: var(--warning);
+  --tone-warning-fg: color-mix(in oklab, black 56%, var(--warning) 44%);
+  --tone-warning-solid-fg: var(--warning-foreground);
+  --tone-warning-border: color-mix(in oklab, white 66%, var(--warning) 34%);
+  --tone-warning-ring: color-mix(in oklab, transparent 34%, var(--warning) 66%);
+  --tone-warning-muted: color-mix(in oklab, black 40%, var(--warning) 60%);
+
+  /* Tone tokens — negotiation */
+  --tone-negotiation: color-mix(in oklab, var(--primary) 46%, var(--warning) 54%);
+  --tone-negotiation-soft: color-mix(in oklab, white 88%, var(--tone-negotiation) 12%);
+  --tone-negotiation-surface: color-mix(in oklab, white 92%, var(--tone-negotiation) 8%);
+  --tone-negotiation-surface-strong: color-mix(in oklab, white 88%, var(--tone-negotiation) 12%);
+  --tone-negotiation-solid: var(--tone-negotiation);
+  --tone-negotiation-fg: color-mix(in oklab, black 52%, var(--tone-negotiation) 48%);
+  --tone-negotiation-solid-fg: oklch(0.985 0.003 92);
+  --tone-negotiation-border: color-mix(in oklab, white 66%, var(--tone-negotiation) 34%);
+  --tone-negotiation-ring: color-mix(in oklab, transparent 34%, var(--tone-negotiation) 66%);
+  --tone-negotiation-muted: color-mix(in oklab, black 42%, var(--tone-negotiation) 58%);
+
+  /* Tone tokens — success */
+  --tone-success-soft: color-mix(in oklab, white 90%, var(--success) 10%);
+  --tone-success-surface: color-mix(in oklab, white 93%, var(--success) 7%);
+  --tone-success-surface-strong: color-mix(in oklab, white 90%, var(--success) 10%);
+  --tone-success-solid: var(--success);
+  --tone-success-fg: color-mix(in oklab, black 48%, var(--success) 52%);
+  --tone-success-solid-fg: var(--success-foreground);
+  --tone-success-border: color-mix(in oklab, white 68%, var(--success) 32%);
+  --tone-success-ring: color-mix(in oklab, transparent 34%, var(--success) 66%);
+  --tone-success-muted: color-mix(in oklab, black 36%, var(--success) 64%);
+
+  /* Tone tokens — danger */
+  --tone-danger-soft: color-mix(in oklab, white 92%, var(--destructive) 8%);
+  --tone-danger-surface: color-mix(in oklab, white 94%, var(--destructive) 6%);
+  --tone-danger-surface-strong: color-mix(in oklab, white 90%, var(--destructive) 10%);
+  --tone-danger-solid: var(--destructive);
+  --tone-danger-fg: color-mix(in oklab, black 44%, var(--destructive) 56%);
+  --tone-danger-solid-fg: var(--destructive-foreground);
+  --tone-danger-border: color-mix(in oklab, white 70%, var(--destructive) 30%);
+  --tone-danger-ring: color-mix(in oklab, transparent 34%, var(--destructive) 66%);
+  --tone-danger-muted: color-mix(in oklab, black 30%, var(--destructive) 70%);
+
+  /* Tone tokens — neutral */
+  --tone-neutral-soft: color-mix(in oklab, white 94%, var(--foreground) 6%);
+  --tone-neutral-surface: color-mix(in oklab, white 96%, var(--foreground) 4%);
+  --tone-neutral-surface-strong: color-mix(in oklab, white 94%, var(--foreground) 6%);
+  --tone-neutral-solid: color-mix(in oklab, var(--foreground) 55%, white 45%);
+  --tone-neutral-fg: color-mix(in oklab, black 16%, var(--muted-foreground) 84%);
+  --tone-neutral-solid-fg: oklch(0.988 0.004 98);
+  --tone-neutral-border: color-mix(in oklab, white 74%, var(--foreground) 26%);
+  --tone-neutral-ring: color-mix(in oklab, transparent 34%, var(--foreground) 66%);
+  --tone-neutral-muted: var(--muted-foreground);
+
+  /* Gradients & transitions */
+  --gradient-subtle: linear-gradient(180deg, oklch(1 0 0) 0%, oklch(0.98 0.002 95) 100%);
+  --gradient-accent: linear-gradient(135deg, var(--primary) 0%, var(--accent-secondary) 100%);
+  --gradient-warm: linear-gradient(135deg, oklch(0.72 0.14 55) 0%, oklch(0.64 0.16 40) 100%);
+  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Sidebar — dark green (matches producer dashboard) */
+  --sidebar-background: oklch(0.22 0.038 155);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.85 0.1 95);
+  --sidebar-primary-foreground: oklch(0.22 0.038 155);
+  --sidebar-accent: oklch(0.28 0.042 155);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.30 0.036 155);
+  --sidebar-ring: oklch(0.85 0.1 95);
+}
+
+.dark {
+  --field-placeholder: oklch(0.76 0.02 180);
+
+  --background: oklch(0.21 0.012 184);
+  --foreground: oklch(0.965 0.006 102);
+  --card: color-mix(in oklab, black 78%, var(--primary) 22%);
+  --card-foreground: var(--foreground);
+  --card-feature: color-mix(in oklab, black 82%, var(--primary) 18%);
+  --popover: color-mix(in oklab, black 80%, var(--primary) 20%);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.77 0.07 178);
+  --primary-foreground: oklch(0.21 0.012 184);
+  --secondary: color-mix(in oklab, black 70%, var(--primary) 30%);
+  --secondary-foreground: var(--foreground);
+  --muted: color-mix(in oklab, black 78%, var(--foreground) 22%);
+  --muted-foreground: oklch(0.77 0.02 180);
+  --accent: color-mix(in oklab, black 68%, var(--primary) 32%);
+  --accent-foreground: var(--foreground);
+  --accent-secondary: oklch(0.74 0.154 58.318);
+  --accent-secondary-foreground: oklch(0.22 0.02 58.318);
+  --success: oklch(0.75 0.112 163);
+  --success-foreground: oklch(0.19 0.012 163);
+  --warning: var(--accent-secondary);
+  --warning-foreground: var(--accent-secondary-foreground);
+  --destructive: oklch(0.69 0.184 29);
+  --destructive-foreground: oklch(0.18 0.01 25);
+  --border: color-mix(in oklab, black 62%, var(--primary) 38%);
+  --input: color-mix(in oklab, black 68%, var(--primary) 32%);
+  --ring: color-mix(in oklab, white 24%, var(--primary) 76%);
+
+  --chart-1: var(--primary);
+  --chart-2: var(--accent-secondary);
+  --chart-3: var(--success);
+  --chart-4: oklch(0.73 0.052 220);
+  --chart-5: var(--destructive);
+
+  --surface-base:
+    radial-gradient(circle at top left, color-mix(in oklab, black 76%, var(--primary) 24%) 0%, transparent 34%),
+    radial-gradient(circle at top right, color-mix(in oklab, black 78%, var(--accent-secondary) 22%) 0%, transparent 26%),
+    linear-gradient(180deg, oklch(0.23 0.013 184), oklch(0.18 0.01 188));
+  --surface-subtle: color-mix(in oklab, black 80%, var(--primary) 20%);
+  --surface-panel:
+    linear-gradient(180deg, color-mix(in oklab, black 74%, var(--primary) 26%), color-mix(in oklab, black 80%, var(--primary) 20%));
+  --surface-panel-strong:
+    linear-gradient(180deg, color-mix(in oklab, black 66%, var(--primary) 34%), color-mix(in oklab, black 74%, var(--primary) 26%));
+  --surface-hero:
+    radial-gradient(circle at top left, color-mix(in oklab, black 64%, var(--primary) 36%) 0%, transparent 36%),
+    radial-gradient(circle at 86% 2%, color-mix(in oklab, black 68%, var(--accent-secondary) 32%) 0%, transparent 28%),
+    linear-gradient(180deg, color-mix(in oklab, black 70%, var(--primary) 30%), color-mix(in oklab, black 82%, var(--primary) 18%));
+  --surface-hover: color-mix(in oklab, black 70%, var(--primary) 30%);
+  --surface-selected: color-mix(in oklab, black 64%, var(--primary) 36%);
+  --panel-border-strong: color-mix(in oklab, black 62%, var(--primary) 38%);
+  --panel-shadow: 0 30px 78px -36px oklch(0 0 0 / 0.52);
+  --shadow-soft: 0 20px 44px -30px oklch(0 0 0 / 0.48);
+  --shadow-medium: 0 30px 70px -34px oklch(0 0 0 / 0.58);
+  --shadow-glow: 0 20px 60px -36px oklch(0.77 0.07 178 / 0.24);
+  --shadow-warm-glow: 0 20px 60px -36px oklch(0.74 0.154 58.318 / 0.20);
+  --shadow-kanban-column: 0 1px 3px oklch(0 0 0 / 0.18), 0 8px 24px -12px oklch(0 0 0 / 0.28);
+  --table-header-bg: color-mix(in oklab, black 72%, var(--primary) 28%);
+  --table-row-hover: color-mix(in oklab, black 76%, var(--primary) 24%);
+  --grid-dot: color-mix(in oklab, var(--border) 52%, transparent);
+
+  --tone-brand-soft: color-mix(in oklab, black 74%, var(--primary) 26%);
+  --tone-brand-surface: color-mix(in oklab, black 78%, var(--primary) 22%);
+  --tone-brand-surface-strong: color-mix(in oklab, black 70%, var(--primary) 30%);
+  --tone-brand-solid: var(--primary);
+  --tone-brand-fg: oklch(0.91 0.022 180);
+  --tone-brand-solid-fg: var(--primary-foreground);
+  --tone-brand-border: color-mix(in oklab, black 56%, var(--primary) 44%);
+  --tone-brand-ring: color-mix(in oklab, transparent 44%, var(--primary) 56%);
+  --tone-brand-muted: color-mix(in oklab, white 18%, var(--primary) 82%);
+
+  --tone-warning-soft: color-mix(in oklab, black 74%, var(--warning) 26%);
+  --tone-warning-surface: color-mix(in oklab, black 79%, var(--warning) 21%);
+  --tone-warning-surface-strong: color-mix(in oklab, black 70%, var(--warning) 30%);
+  --tone-warning-solid: var(--warning);
+  --tone-warning-fg: oklch(0.93 0.028 68);
+  --tone-warning-solid-fg: var(--warning-foreground);
+  --tone-warning-border: color-mix(in oklab, black 58%, var(--warning) 42%);
+  --tone-warning-ring: color-mix(in oklab, transparent 44%, var(--warning) 56%);
+  --tone-warning-muted: color-mix(in oklab, white 8%, var(--warning) 92%);
+
+  --tone-negotiation: color-mix(in oklab, var(--primary) 44%, var(--warning) 56%);
+  --tone-negotiation-soft: color-mix(in oklab, black 72%, var(--tone-negotiation) 28%);
+  --tone-negotiation-surface: color-mix(in oklab, black 77%, var(--tone-negotiation) 23%);
+  --tone-negotiation-surface-strong: color-mix(in oklab, black 68%, var(--tone-negotiation) 32%);
+  --tone-negotiation-solid: var(--tone-negotiation);
+  --tone-negotiation-fg: oklch(0.93 0.026 62);
+  --tone-negotiation-solid-fg: oklch(0.18 0.01 60);
+  --tone-negotiation-border: color-mix(in oklab, black 58%, var(--tone-negotiation) 42%);
+  --tone-negotiation-ring: color-mix(in oklab, transparent 44%, var(--tone-negotiation) 56%);
+  --tone-negotiation-muted: color-mix(in oklab, white 6%, var(--tone-negotiation) 94%);
+
+  --tone-success-soft: color-mix(in oklab, black 74%, var(--success) 26%);
+  --tone-success-surface: color-mix(in oklab, black 79%, var(--success) 21%);
+  --tone-success-surface-strong: color-mix(in oklab, black 70%, var(--success) 30%);
+  --tone-success-solid: var(--success);
+  --tone-success-fg: oklch(0.93 0.026 162);
+  --tone-success-solid-fg: var(--success-foreground);
+  --tone-success-border: color-mix(in oklab, black 58%, var(--success) 42%);
+  --tone-success-ring: color-mix(in oklab, transparent 44%, var(--success) 56%);
+  --tone-success-muted: color-mix(in oklab, white 6%, var(--success) 94%);
+
+  --tone-danger-soft: color-mix(in oklab, black 74%, var(--destructive) 26%);
+  --tone-danger-surface: color-mix(in oklab, black 79%, var(--destructive) 21%);
+  --tone-danger-surface-strong: color-mix(in oklab, black 68%, var(--destructive) 32%);
+  --tone-danger-solid: var(--destructive);
+  --tone-danger-fg: oklch(0.93 0.03 28);
+  --tone-danger-solid-fg: var(--destructive-foreground);
+  --tone-danger-border: color-mix(in oklab, black 58%, var(--destructive) 42%);
+  --tone-danger-ring: color-mix(in oklab, transparent 44%, var(--destructive) 56%);
+  --tone-danger-muted: color-mix(in oklab, white 4%, var(--destructive) 96%);
+
+  --tone-neutral-soft: color-mix(in oklab, black 74%, var(--foreground) 26%);
+  --tone-neutral-surface: color-mix(in oklab, black 80%, var(--foreground) 20%);
+  --tone-neutral-surface-strong: color-mix(in oklab, black 72%, var(--foreground) 28%);
+  --tone-neutral-solid: color-mix(in oklab, black 32%, var(--foreground) 68%);
+  --tone-neutral-fg: var(--foreground);
+  --tone-neutral-solid-fg: oklch(0.18 0.01 190);
+  --tone-neutral-border: color-mix(in oklab, black 56%, var(--foreground) 44%);
+  --tone-neutral-ring: color-mix(in oklab, transparent 44%, var(--foreground) 56%);
+  --tone-neutral-muted: var(--muted-foreground);
+
+  /* Dark gradients */
+  --gradient-subtle: linear-gradient(180deg, oklch(0.24 0.012 184) 0%, oklch(0.21 0.012 184) 100%);
+
+  /* Sidebar — dark green (matches producer dashboard dark mode) */
+  --sidebar-background: oklch(0.18 0.034 155);
+  --sidebar-foreground: oklch(0.92 0 0);
+  --sidebar-primary: oklch(0.85 0.1 95);
+  --sidebar-primary-foreground: oklch(0.18 0.034 155);
+  --sidebar-accent: oklch(0.24 0.038 155);
+  --sidebar-accent-foreground: oklch(0.92 0 0);
+  --sidebar-border: oklch(0.26 0.034 155);
+  --sidebar-ring: oklch(0.85 0.1 95);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html {
+    color-scheme: light;
+    scroll-behavior: smooth;
+  }
+
+  .dark {
+    color-scheme: dark;
+  }
+
+  body {
+    min-height: 100dvh;
+    background: var(--surface-base);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  ::selection {
+    background: color-mix(in oklab, var(--primary) 75%, white 25%);
+    color: var(--primary-foreground);
+  }
+
+  ::-webkit-scrollbar {
+    width: 0.6rem;
+    height: 0.6rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
+    background-clip: padding-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklab, var(--primary) 55%, transparent);
+    background-clip: padding-box;
+  }
+}