minka-ds 0.1.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse [border-radius:var(--radius-card)] bg-[var(--color-bg-disabled)]", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/table.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const tableCellAlignVariants = cva("", {
+  variants: {
+    align: {
+      left:  "text-left",
+      right: "text-right",
+    },
+  },
+  defaultVariants: {
+    align: "left",
+  },
+})
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-body-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn(
+        "[&_tr]:border-b [&_tr]:border-[var(--color-border-subtle)] [&_tr]:hover:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-[var(--color-border-subtle)] bg-[var(--color-bg-raised)] text-label-sm [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-[var(--color-border-subtle)] transition-colors hover:bg-[var(--color-bg-table-hover)] has-aria-expanded:bg-[var(--color-bg-table-hover)] data-[state=selected]:bg-[var(--color-action-ghost-hover)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({
+  className,
+  align,
+  ...props
+}: React.ComponentProps<"th"> & VariantProps<typeof tableCellAlignVariants>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 align-middle text-label-sm text-[var(--color-text-default)] whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        tableCellAlignVariants({ align }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({
+  className,
+  align,
+  ...props
+}: React.ComponentProps<"td"> & VariantProps<typeof tableCellAlignVariants>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap text-[var(--color-text-default)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        tableCellAlignVariants({ align }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-body-sm text-[var(--color-text-muted)]", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center p-[3px] text-[var(--color-text-muted)] group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "[border-radius:var(--radius-card)] bg-[var(--color-bg-disabled)]",
+        line:    "gap-1 rounded-none bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 [border-radius:var(--radius-button)] border border-transparent px-2 py-1 text-body-sm whitespace-nowrap transition-all outline-none",
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-default)] data-[state=active]:font-bold",
+        "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
+        "focus-visible:border-[var(--color-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-border-focus)]/50",
+        "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+        // default variant — active tab gets raised surface
+        "group-data-[variant=default]/tabs-list:data-[state=active]:bg-[var(--color-bg-raised)] group-data-[variant=default]/tabs-list:data-[state=active]:text-[var(--color-text-default)] group-data-[variant=default]/tabs-list:data-[state=active]:shadow-[var(--shadow-card)]",
+        // line variant — active tab is transparent, underline indicator
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:text-[var(--color-text-default)] group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+        // underline indicator for line variant
+        "after:absolute after:bg-[var(--color-text-default)] after:opacity-0 after:transition-opacity",
+        "group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5",
+        "group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5",
+        "group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {/* Grid overlap reserves bold width at all times — prevents layout shift on weight change */}
+      <span className="grid items-center justify-items-center [grid-template-areas:'stack']">
+        <span className="[grid-area:stack] invisible font-bold pointer-events-none select-none" aria-hidden>{children}</span>
+        <span className="[grid-area:stack]">{children}</span>
+      </span>
+    </TabsPrimitive.Trigger>
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full [border-radius:var(--radius-input)] border border-[var(--color-border-default)] bg-transparent px-3 py-2 text-body-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-[var(--color-text-hint)] focus-visible:border-[var(--color-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-border-focus)]/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-[var(--color-border-error)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--color-border-error)]/20",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "[z-index:var(--z-tooltip)] w-fit origin-(--radix-tooltip-content-transform-origin) animate-in [border-radius:var(--radius-tooltip)] bg-[var(--color-bg-inverted)] px-3 py-1.5 text-caption text-balance text-[var(--color-text-inverse)] fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="[z-index:var(--z-tooltip)] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-[var(--color-bg-inverted)] fill-[var(--color-bg-inverted)]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+// Utilities
+export { cn } from "./lib/utils"
+
+// Components
+export * from "./components/ui/badge"
+export * from "./components/ui/cell"
+export * from "./components/ui/breadcrumb"
+export * from "./components/ui/button"
+export * from "./components/ui/button-group"
+export * from "./components/ui/card"
+export * from "./components/ui/collapsible"
+export * from "./components/ui/combobox"
+export * from "./components/ui/data-table"
+export * from "./components/ui/dialog"
+export * from "./components/ui/dropdown-menu"
+export * from "./components/ui/input"
+export * from "./components/ui/input-group"
+export * from "./components/ui/label"
+export * from "./components/ui/pagination"
+export * from "./components/ui/select"
+export * from "./components/ui/separator"
+export * from "./components/ui/sheet"
+export * from "./components/ui/sidebar"
+export * from "./components/ui/skeleton"
+export * from "./components/ui/table"
+export * from "./components/ui/tabs"
+export * from "./components/ui/textarea"
+export * from "./components/ui/tooltip"

package/src/lib/utils.ts

@@ -0,0 +1,33 @@
+import { clsx, type ClassValue } from "clsx"
+import { extendTailwindMerge } from "tailwind-merge"
+
+// tailwind-merge treats all `text-*` classes as a single conflict group, so
+// `text-label` gets silently dropped when any `text-[color-var]` is on the
+// same element (which every button variant has). Registering custom text-*
+// utilities in the font-size group keeps both classes alive.
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display",
+            "heading-1", "heading-2", "heading-3", "heading-4",
+            "paragraph-lg", "paragraph", "paragraph-sm",
+            "body-lg", "body", "body-sm",
+            "body-lg-light", "body-light", "body-sm-light",
+            "label", "label-sm",
+            "caption", "caption-sm",
+            "caption-light", "caption-sm-light",
+            "overline",
+            "code",
+          ],
+        },
+      ],
+    },
+  },
+})
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/tokens/primitives.css

@@ -0,0 +1,227 @@
+/*
+ * Primitive tokens — raw scale values, no semantic meaning.
+ * These are the source of truth. Never use them directly in components.
+ * Semantic tokens (semantic.css) consume these and are what components use.
+ */
+
+:root {
+  /* --- Neutral scale --- */
+  --primitive-neutral-0:    #ffffff;
+  --primitive-neutral-50:   #eeeeee;
+  --primitive-neutral-100:  #e6e6e6;
+  --primitive-neutral-200:  #d9d9d9;
+  --primitive-neutral-300:  #c7c7c7;
+  --primitive-neutral-400:  #b6b6b6;
+  --primitive-neutral-500:  #a1a1a1;
+  --primitive-neutral-600:  #838383;
+  --primitive-neutral-700:  #6f6f6f;
+  --primitive-neutral-800:  #4a4a4a;
+  --primitive-neutral-900:  #2e2e2e;
+  --primitive-neutral-950:  #1f1f1f;
+  --primitive-neutral-1000: #000000;
+
+  /* --- Color scales --- */
+
+  --primitive-red-50:  oklch(0.95 0.03 28);
+  --primitive-red-100: oklch(0.93 0.05 28);
+  --primitive-red-200: oklch(0.89 0.07 28);
+  --primitive-red-300: oklch(0.84 0.11 28);
+  --primitive-red-400: oklch(0.79 0.16 28);
+  --primitive-red-500: oklch(0.73 0.21 28);
+  --primitive-red-600: oklch(0.63 0.29 28);
+  --primitive-red-700: oklch(0.55 0.25 28);
+  --primitive-red-800: oklch(0.41 0.19 28);
+  --primitive-red-900: oklch(0.29 0.13 28);
+  --primitive-red-950: oklch(0.24 0.11 28);
+
+  --primitive-bronze-50:  oklch(0.95 0.04 63);
+  --primitive-bronze-100: oklch(0.93 0.06 63);
+  --primitive-bronze-200: oklch(0.89 0.09 63);
+  --primitive-bronze-300: oklch(0.84 0.14 63);
+  --primitive-bronze-400: oklch(0.78 0.2 63);
+  --primitive-bronze-500: oklch(0.72 0.19 63);
+  --primitive-bronze-600: oklch(0.62 0.16 63);
+  --primitive-bronze-700: oklch(0.55 0.14 63);
+  --primitive-bronze-800: oklch(0.42 0.11 63);
+  --primitive-bronze-900: oklch(0.3 0.08 63);
+  --primitive-bronze-950: oklch(0.25 0.06 63);
+
+  --primitive-yellow-50:  oklch(0.94 0.12 98);
+  --primitive-yellow-100: oklch(0.92 0.17 98);
+  --primitive-yellow-200: oklch(0.88 0.21 98);
+  --primitive-yellow-300: oklch(0.83 0.2 98);
+  --primitive-yellow-400: oklch(0.77 0.18 98);
+  --primitive-yellow-500: oklch(0.71 0.17 98);
+  --primitive-yellow-600: oklch(0.61 0.15 98);
+  --primitive-yellow-700: oklch(0.54 0.13 98);
+  --primitive-yellow-800: oklch(0.41 0.1 98);
+  --primitive-yellow-900: oklch(0.3 0.07 98);
+  --primitive-yellow-950: oklch(0.25 0.06 98);
+
+  --primitive-lulo-50:  oklch(0.94 0.24 112);
+  --primitive-lulo-100: oklch(0.92 0.23 112);
+  --primitive-lulo-200: oklch(0.87 0.22 112);
+  --primitive-lulo-300: oklch(0.82 0.21 112);
+  --primitive-lulo-400: oklch(0.76 0.2 112);
+  --primitive-lulo-500: oklch(0.7 0.18 112);
+  --primitive-lulo-600: oklch(0.61 0.15 112);
+  --primitive-lulo-700: oklch(0.53 0.14 112);
+  --primitive-lulo-800: oklch(0.41 0.1 112);
+  --primitive-lulo-900: oklch(0.3 0.08 112);
+  --primitive-lulo-950: oklch(0.24 0.06 112);
+
+  --primitive-green-50:  oklch(0.93 0.15 139);
+  --primitive-green-100: oklch(0.9 0.23 139);
+  --primitive-green-200: oklch(0.85 0.32 139);
+  --primitive-green-300: oklch(0.8 0.3 139);
+  --primitive-green-400: oklch(0.75 0.28 139);
+  --primitive-green-500: oklch(0.69 0.25 139);
+  --primitive-green-600: oklch(0.59 0.22 139);
+  --primitive-green-700: oklch(0.52 0.19 139);
+  --primitive-green-800: oklch(0.4 0.15 139);
+  --primitive-green-900: oklch(0.29 0.11 139);
+  --primitive-green-950: oklch(0.24 0.09 139);
+
+  --primitive-aquamarine-50:  oklch(0.93 0.12 167);
+  --primitive-aquamarine-100: oklch(0.9 0.17 167);
+  --primitive-aquamarine-200: oklch(0.85 0.24 167);
+  --primitive-aquamarine-300: oklch(0.8 0.22 167);
+  --primitive-aquamarine-400: oklch(0.74 0.21 167);
+  --primitive-aquamarine-500: oklch(0.68 0.19 167);
+  --primitive-aquamarine-600: oklch(0.59 0.16 167);
+  --primitive-aquamarine-700: oklch(0.52 0.14 167);
+  --primitive-aquamarine-800: oklch(0.39 0.11 167);
+  --primitive-aquamarine-900: oklch(0.29 0.08 167);
+  --primitive-aquamarine-950: oklch(0.23 0.07 167);
+
+  --primitive-sea-50:  oklch(0.94 0.04 220);
+  --primitive-sea-100: oklch(0.92 0.06 220);
+  --primitive-sea-200: oklch(0.88 0.1 220);
+  --primitive-sea-300: oklch(0.82 0.15 220);
+  --primitive-sea-400: oklch(0.75 0.18 220);
+  --primitive-sea-500: oklch(0.69 0.17 220);
+  --primitive-sea-600: oklch(0.6 0.14 220);
+  --primitive-sea-700: oklch(0.52 0.13 220);
+  --primitive-sea-800: oklch(0.4 0.1 220);
+  --primitive-sea-900: oklch(0.29 0.07 220);
+  --primitive-sea-950: oklch(0.24 0.06 220);
+
+  --primitive-blue-50:  oklch(0.95 0.03 257);
+  --primitive-blue-100: oklch(0.93 0.04 257);
+  --primitive-blue-200: oklch(0.88 0.06 257);
+  --primitive-blue-300: oklch(0.83 0.09 257);
+  --primitive-blue-400: oklch(0.77 0.13 257);
+  --primitive-blue-500: oklch(0.71 0.16 257);
+  --primitive-blue-600: oklch(0.62 0.23 257);
+  --primitive-blue-700: oklch(0.54 0.24 257);
+  --primitive-blue-800: oklch(0.41 0.18 257);
+  --primitive-blue-900: oklch(0.3 0.13 257);
+  --primitive-blue-950: oklch(0.24 0.11 257);
+
+  --primitive-purple-50:  oklch(0.95 0.03 289);
+  --primitive-purple-100: oklch(0.93 0.04 289);
+  --primitive-purple-200: oklch(0.89 0.06 289);
+  --primitive-purple-300: oklch(0.84 0.1 289);
+  --primitive-purple-400: oklch(0.78 0.13 289);
+  --primitive-purple-500: oklch(0.72 0.17 289);
+  --primitive-purple-600: oklch(0.63 0.23 289);
+  --primitive-purple-700: oklch(0.56 0.28 289);
+  --primitive-purple-800: oklch(0.42 0.25 289);
+  --primitive-purple-900: oklch(0.3 0.18 289);
+  --primitive-purple-950: oklch(0.24 0.14 289);
+
+  --primitive-fuchsia-50:  oklch(0.95 0.04 320);
+  --primitive-fuchsia-100: oklch(0.93 0.06 320);
+  --primitive-fuchsia-200: oklch(0.89 0.09 320);
+  --primitive-fuchsia-300: oklch(0.85 0.14 320);
+  --primitive-fuchsia-400: oklch(0.79 0.19 320);
+  --primitive-fuchsia-500: oklch(0.74 0.24 320);
+  --primitive-fuchsia-600: oklch(0.64 0.33 320);
+  --primitive-fuchsia-700: oklch(0.56 0.29 320);
+  --primitive-fuchsia-800: oklch(0.42 0.22 320);
+  --primitive-fuchsia-900: oklch(0.3 0.16 320);
+  --primitive-fuchsia-950: oklch(0.24 0.13 320);
+
+  --primitive-flamingo-50:  oklch(0.95 0.03 360);
+  --primitive-flamingo-100: oklch(0.93 0.05 360);
+  --primitive-flamingo-200: oklch(0.89 0.08 360);
+  --primitive-flamingo-300: oklch(0.84 0.12 360);
+  --primitive-flamingo-400: oklch(0.79 0.17 360);
+  --primitive-flamingo-500: oklch(0.74 0.23 360);
+  --primitive-flamingo-600: oklch(0.63 0.29 360);
+  --primitive-flamingo-700: oklch(0.55 0.25 360);
+  --primitive-flamingo-800: oklch(0.42 0.19 360);
+  --primitive-flamingo-900: oklch(0.3 0.13 360);
+  --primitive-flamingo-950: oklch(0.24 0.11 360);
+
+  /* --- Radius scale --- */
+  --primitive-radius-none: 0;
+  --primitive-radius-xs:   0.25rem;
+  --primitive-radius-sm:   0.375rem;
+  --primitive-radius-md:   0.5rem;
+  --primitive-radius-lg:   0.625rem;
+  --primitive-radius-xl:   0.875rem;
+  --primitive-radius-2xl:  1.25rem;
+  --primitive-radius-full: 9999px;
+
+  /* --- Spacing scale (extends Tailwind, documented here for reference) --- */
+  --primitive-space-1:  0.25rem;
+  --primitive-space-2:  0.5rem;
+  --primitive-space-3:  0.75rem;
+  --primitive-space-4:  1rem;
+  --primitive-space-5:  1.25rem;
+  --primitive-space-6:  1.5rem;
+  --primitive-space-8:  2rem;
+  --primitive-space-10: 2.5rem;
+  --primitive-space-12: 3rem;
+  --primitive-space-16: 4rem;
+
+  /* --- Typography scale --- */
+  --primitive-font-size-2xs:  0.625rem;  /* 10px */
+  --primitive-font-size-xs:   0.75rem;   /* 12px */
+  --primitive-font-size-sm:   0.875rem;  /* 14px */
+  --primitive-font-size-base: 1rem;      /* 16px */
+  --primitive-font-size-lg:   1.125rem;  /* 18px */
+  --primitive-font-size-xl:   1.25rem;   /* 20px */
+  --primitive-font-size-2xl:  1.5rem;    /* 24px */
+  --primitive-font-size-3xl:  1.875rem;  /* 30px */
+  --primitive-font-size-4xl:  2.25rem;   /* 36px */
+  --primitive-font-size-5xl:  3rem;      /* 48px */
+  --primitive-font-size-6xl:  3.75rem;   /* 60px */
+  --primitive-font-size-7xl:  4.5rem;    /* 72px */
+  --primitive-font-size-8xl:  6rem;      /* 96px */
+
+  --primitive-font-weight-400: 400;
+  --primitive-font-weight-500: 500;
+  --primitive-font-weight-600: 600;
+
+  --primitive-font-style-normal: normal;
+  --primitive-font-style-italic: italic;
+
+  --primitive-line-height-none:    1;      /* single-line headings, labels */
+  --primitive-line-height-tight:   1.25;   /* large display, hero */
+  --primitive-line-height-snug:    1.375;  /* subheadings */
+  --primitive-line-height-normal:  1.5;    /* default body */
+  --primitive-line-height-relaxed: 1.625;  /* long-form paragraphs */
+  --primitive-line-height-loose:   1.75;   /* editorial, very readable body */
+
+  /* --- Letter spacing --- */
+  --primitive-letter-spacing-tight:  -0.04em; /* display, hero text */
+  --primitive-letter-spacing-normal:  0em;    /* body, default */
+  --primitive-letter-spacing-wide:    0.1em;  /* uppercase labels, overlines */
+
+  /* --- Shadow scale --- */
+  --primitive-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.05);
+  --primitive-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.10), 0 1px 2px oklch(0 0 0 / 0.06);
+  --primitive-shadow-md: 0 4px 6px oklch(0 0 0 / 0.07), 0 2px 4px oklch(0 0 0 / 0.06);
+  --primitive-shadow-lg: 0 10px 15px oklch(0 0 0 / 0.10), 0 4px 6px oklch(0 0 0 / 0.05);
+  --primitive-shadow-xl: 0 20px 25px oklch(0 0 0 / 0.10), 0 8px 10px oklch(0 0 0 / 0.04);
+
+  /* --- Z-index scale --- */
+  --primitive-z-base:    0;
+  --primitive-z-raised:  10;
+  --primitive-z-overlay: 100;
+  --primitive-z-modal:   200;
+  --primitive-z-toast:   300;
+  --primitive-z-tooltip: 400;
+}