@otfdashkit/ui 0.1.0

package/src/themes/glass.css

@@ -0,0 +1,142 @@
+/* OTF UI — Glass theme
+   Inspired by Apple Vision Pro + macOS: frosted glass, soft depth, translucent layers.
+   Font: Nunito — rounded, friendly, Apple-adjacent
+   Radius: large and soft — everything is rounded
+   Shadows: diffuse, color-tinted blur shadows
+   Motion: smooth, elegant, longer duration
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
+
+.theme-glass {
+  /* ── Colors ───────────────────────────────── */
+  --background: 210 40% 96%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 221 83% 53%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 92%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 40% 93%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 210 40% 92%;
+  --accent-foreground: 221 83% 53%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 221 83% 53%;
+
+  /* ── Glass-specific ────────────────────────── */
+  --glass-blur: blur(16px) saturate(180%);
+  --glass-bg: rgba(255, 255, 255, 0.72);
+  --glass-border: rgba(255, 255, 255, 0.6);
+  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
+
+  /* ── Typography ────────────────────────────── */
+  --font-sans: 'Nunito', -apple-system, OtfMacSystemFont, 'Helvetica Neue', sans-serif;
+  --font-heading: 'Nunito', -apple-system, sans-serif;
+  --font-mono: 'SF Mono', 'Fira Code', monospace;
+  --font-size-xs: 0.6875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.9375rem;
+  --font-size-lg: 1.0625rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5625rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 600;
+  --font-weight-semibold: 700;
+  --font-weight-heading: 700;
+  --line-height-tight: 1.3;
+  --line-height-normal: 1.6;
+  --line-height-relaxed: 1.75;
+  --line-height-heading: 1.25;
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-body: 0em;
+  --letter-spacing-heading: -0.015em;
+
+  /* ── Border radius (large, Apple-inspired) ─── */
+  --radius: 0.875rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.875rem;
+  --radius-lg: 1.25rem;
+  --radius-xl: 1.75rem;
+  --radius-full: 9999px;
+
+  /* ── Shadow tokens (granular) ────────────────── */
+  --shadow-color: 220 60% 60%;
+  --shadow-opacity: 0.12;
+  --shadow-blur: 16px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 4px;
+
+  /* ── Shadows (diffuse, color-tinted) ─────────── */
+  --shadow-sm: 0 2px 8px 0 rgba(100, 130, 200, 0.08);
+  --shadow-md: 0 4px 16px 0 rgba(100, 130, 200, 0.12), 0 1px 4px rgba(100, 130, 200, 0.08);
+  --shadow-lg: 0 8px 32px 0 rgba(100, 130, 200, 0.16), 0 2px 8px rgba(100, 130, 200, 0.1);
+  --shadow-xl: 0 16px 48px 0 rgba(100, 130, 200, 0.2), 0 4px 16px rgba(100, 130, 200, 0.12);
+  --shadow-card: var(--glass-shadow);
+
+  /* ── Animation (smooth, longer duration) ──────── */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+  --easing-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+/* Glass card style utility */
+.theme-glass .glass,
+.theme-glass [data-glass] {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+.theme-glass.dark {
+  --background: 222 47% 8%;
+  --foreground: 213 31% 91%;
+  --card: 222 47% 11%;
+  --card-foreground: 213 31% 91%;
+  --popover: 222 47% 11%;
+  --popover-foreground: 213 31% 91%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 222 47% 15%;
+  --secondary-foreground: 213 31% 91%;
+  --muted: 222 47% 15%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 222 47% 15%;
+  --accent-foreground: 217 91% 60%;
+  --destructive: 0 62% 30%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 222 47% 18%;
+  --input: 222 47% 18%;
+  --ring: 217 91% 60%;
+  --glass-bg: rgba(15, 20, 40, 0.72);
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+
+  --shadow-color: 0 0% 0%;
+  --shadow-opacity: 0.35;
+  --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 16px 0 rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
+  --shadow-lg: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-card: var(--glass-shadow);
+}
+
+/* ── Chart / semantic accent tokens ────────────── */
+.theme-glass, .theme-glass.dark {
+  --chart-1: 221 83% 53%;   /* blue    — brand / primary  */
+  --chart-2: 142 71% 45%;   /* green   — success / done   */
+  --chart-3: 200 80% 55%;   /* cyan    — info / todo       */
+  --chart-4: 38 92% 50%;    /* amber   — warning / in-prog */
+  --chart-5: 280 65% 60%;   /* purple  — accent / special  */
+}

package/src/themes/linear.css

@@ -0,0 +1,123 @@
+/* OTF UI — Linear theme
+   Inspired by Linear.app + Vercel: monochrome, dense, sharp, no-nonsense.
+   Font: Inter — professional and tight
+   Radius: minimal — almost square controls
+   Shadows: crisp and directional, no blur
+   Motion: fast, no bounce
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+.theme-linear {
+  /* ── Colors ───────────────────────────────── */
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+
+  /* ── Typography ────────────────────────────── */
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-heading: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --font-size-xs: 0.6875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.9375rem;
+  --font-size-lg: 1.0625rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-heading: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-heading: 1.15;
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-body: -0.005em;
+  --letter-spacing-heading: -0.03em;
+
+  /* ── Border radius (minimal — almost square) ─ */
+  --radius: 0.25rem;
+  --radius-sm: 0.125rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.375rem;
+  --radius-xl: 0.5rem;
+  --radius-full: 9999px;
+
+  /* ── Shadow tokens (granular) ────────────────── */
+  --shadow-color: 0 0% 0%;
+  --shadow-opacity: 0.06;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 1px;
+
+  /* ── Shadows (crisp, directional, no spread) ─ */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
+  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);
+  --shadow-card: 0 0 0 1px hsl(var(--border)), 0 1px 3px 0 rgb(0 0 0 / 0.04);
+
+  /* ── Animation (fast, no bounce) ────────────── */
+  --duration-fast: 80ms;
+  --duration-normal: 120ms;
+  --duration-slow: 200ms;
+  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+  --easing-bounce: cubic-bezier(0.34, 1.1, 0.64, 1);
+}
+
+.theme-linear.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 6%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 6%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 83.1%;
+
+  --shadow-color: 0 0% 0%;
+  --shadow-opacity: 0.35;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-card: 0 0 0 1px hsl(var(--border));
+}
+
+/* ── Chart / semantic accent tokens ────────────── */
+.theme-linear, .theme-linear.dark {
+  --chart-1: 0 0% 70%;      /* silver  — neutral primary  */
+  --chart-2: 142 71% 45%;   /* green   — success / done   */
+  --chart-3: 217 91% 60%;   /* blue    — info / todo       */
+  --chart-4: 38 92% 50%;    /* amber   — warning / in-prog */
+  --chart-5: 280 65% 60%;   /* purple  — accent / special  */
+}

package/src/themes/midnight.css

@@ -0,0 +1,131 @@
+/* OTF UI — Midnight theme
+   Inspired by Raycast + Arc: dark premium, neon accents, developer-first depth.
+   Font: Space Grotesk — geometric, techy, modern
+   Radius: medium, slightly angular
+   Shadows: neon glow shadows matched to accent color
+   Motion: snappy, minimal but precise
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+
+.theme-midnight {
+  /* ── Colors ───────────────────────────────── */
+  --background: 240 10% 4%;
+  --foreground: 0 0% 95%;
+  --card: 240 10% 6.5%;
+  --card-foreground: 0 0% 95%;
+  --popover: 240 10% 7%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 263 90% 68%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 10% 11%;
+  --secondary-foreground: 0 0% 90%;
+  --muted: 240 10% 11%;
+  --muted-foreground: 240 5% 55%;
+  --accent: 263 90% 68%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 240 10% 14%;
+  --input: 240 10% 14%;
+  --ring: 263 90% 68%;
+
+  /* ── Midnight-specific ──────────────────────── */
+  --neon: hsl(263 90% 68%);
+  --neon-glow: 0 0 20px hsl(263 90% 68% / 0.35), 0 0 40px hsl(263 90% 68% / 0.15);
+  --neon-subtle: 0 0 10px hsl(263 90% 68% / 0.2);
+
+  /* ── Typography ────────────────────────────── */
+  --font-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
+  --font-size-xs: 0.6875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.9375rem;
+  --font-size-lg: 1.0625rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-heading: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
+  --line-height-heading: 1.15;
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-body: -0.01em;
+  --letter-spacing-heading: -0.025em;
+
+  /* ── Border radius (medium, slightly angular) ── */
+  --radius: 0.5rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* ── Shadow tokens (granular) ────────────────── */
+  --shadow-color: 0 0% 0%;
+  --shadow-opacity: 0.5;
+  --shadow-blur: 8px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 2px;
+
+  /* ── Shadows (neon glow) ─────────────────────── */
+  --shadow-sm: 0 1px 4px 0 rgb(0 0 0 / 0.5);
+  --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.6), 0 0 0 1px hsl(var(--border));
+  --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.6), 0 0 0 1px hsl(var(--border));
+  --shadow-xl: 0 16px 40px 0 rgb(0 0 0 / 0.7), 0 0 32px hsl(var(--primary) / 0.08);
+  --shadow-card: 0 0 0 1px hsl(var(--border)), 0 2px 8px rgb(0 0 0 / 0.4);
+  --shadow-glow: var(--neon-glow);
+
+  /* ── Animation (snappy, precise) ────────────── */
+  --duration-fast: 80ms;
+  --duration-normal: 120ms;
+  --duration-slow: 200ms;
+  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+  --easing-bounce: cubic-bezier(0.34, 1.15, 0.64, 1);
+
+  /* Force dark color-scheme */
+  color-scheme: dark;
+}
+
+.theme-midnight.light {
+  --background: 240 10% 96%;
+  --foreground: 240 10% 4%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 4%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 4%;
+  --primary: 263 70% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 10% 92%;
+  --secondary-foreground: 240 10% 4%;
+  --muted: 240 10% 92%;
+  --muted-foreground: 240 5% 45%;
+  --accent: 240 10% 92%;
+  --accent-foreground: 263 70% 50%;
+  --border: 240 10% 85%;
+  --input: 240 10% 85%;
+  --ring: 263 70% 50%;
+  --neon-glow: none;
+
+  --shadow-color: 0 0% 0%;
+  --shadow-opacity: 0.06;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
+  --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.08);
+  --shadow-card: 0 0 0 1px hsl(var(--border));
+  color-scheme: light;
+}
+
+/* ── Chart / semantic accent tokens ────────────── */
+.theme-midnight {
+  --chart-1: 263 90% 68%;   /* violet  — brand / primary  */
+  --chart-2: 160 60% 45%;   /* teal    — success / done   */
+  --chart-3: 200 80% 55%;   /* cyan    — info / todo       */
+  --chart-4: 38 90% 55%;    /* amber   — warning / in-prog */
+  --chart-5: 300 65% 65%;   /* pink    — accent / special  */
+}

package/src/themes/minimal.css

@@ -0,0 +1,121 @@
+/* OTF UI — Minimal theme
+   Inspired by Notion + Cal.com: airy, warm, generous whitespace, content-first.
+   Font: Plus Jakarta Sans — warm, approachable, humanist
+   Radius: warm and rounded, but not pill-shaped
+   Shadows: barely-there, warm-toned
+   Motion: natural, unhurried
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
+
+.theme-minimal {
+  /* ── Colors (warm light) ───────────────────── */
+  --background: 40 33% 97%;
+  --foreground: 25 15% 15%;
+  --card: 0 0% 100%;
+  --card-foreground: 25 15% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 25 15% 15%;
+  --primary: 25 95% 53%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 35 25% 93%;
+  --secondary-foreground: 25 15% 25%;
+  --muted: 35 20% 94%;
+  --muted-foreground: 25 10% 45%;
+  --accent: 35 25% 93%;
+  --accent-foreground: 25 95% 48%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 35 15% 88%;
+  --input: 35 15% 90%;
+  --ring: 25 95% 53%;
+
+  /* ── Typography (airy, humanist) ──────────── */
+  --font-sans: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
+  --font-heading: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.3125rem;
+  --font-size-2xl: 1.625rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-heading: 700;
+  --line-height-tight: 1.35;
+  --line-height-normal: 1.65;
+  --line-height-relaxed: 1.8;
+  --line-height-heading: 1.3;
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-body: 0.005em;
+  --letter-spacing-heading: -0.01em;
+
+  /* ── Border radius (warm, medium-large) ─────── */
+  --radius: 0.625rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* ── Shadow tokens (granular) ────────────────── */
+  --shadow-color: 25 40% 30%;
+  --shadow-opacity: 0.08;
+  --shadow-blur: 8px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 2px;
+
+  /* ── Shadows (warm, barely-there) ────────────── */
+  --shadow-sm: 0 1px 3px 0 rgba(120, 80, 40, 0.06);
+  --shadow-md: 0 2px 8px 0 rgba(120, 80, 40, 0.08), 0 0 0 1px rgba(120, 80, 40, 0.04);
+  --shadow-lg: 0 4px 16px 0 rgba(120, 80, 40, 0.1), 0 1px 4px rgba(120, 80, 40, 0.06);
+  --shadow-xl: 0 8px 32px 0 rgba(120, 80, 40, 0.12), 0 2px 8px rgba(120, 80, 40, 0.06);
+  --shadow-card: 0 0 0 1px hsl(var(--border)), 0 1px 3px rgba(120, 80, 40, 0.06);
+
+  /* ── Animation (natural, unhurried) ─────────── */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 350ms;
+  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);
+  --easing-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
+}
+
+.theme-minimal.dark {
+  --background: 25 12% 8%;
+  --foreground: 35 15% 90%;
+  --card: 25 12% 10%;
+  --card-foreground: 35 15% 90%;
+  --popover: 25 12% 11%;
+  --popover-foreground: 35 15% 90%;
+  --primary: 25 95% 58%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 25 12% 15%;
+  --secondary-foreground: 35 15% 80%;
+  --muted: 25 12% 14%;
+  --muted-foreground: 25 10% 55%;
+  --accent: 25 12% 15%;
+  --accent-foreground: 25 95% 58%;
+  --border: 25 12% 18%;
+  --input: 25 12% 18%;
+  --ring: 25 95% 58%;
+
+  --shadow-color: 0 0% 0%;
+  --shadow-opacity: 0.3;
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25);
+  --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.35);
+  --shadow-lg: 0 4px 16px 0 rgb(0 0 0 / 0.4);
+  --shadow-card: 0 0 0 1px hsl(var(--border));
+}
+
+/* ── Chart / semantic accent tokens ────────────── */
+.theme-minimal, .theme-minimal.dark {
+  --chart-1: 25 95% 58%;    /* orange  — brand / primary  */
+  --chart-2: 142 71% 45%;   /* green   — success / done   */
+  --chart-3: 217 91% 60%;   /* blue    — info / todo       */
+  --chart-4: 38 92% 50%;    /* amber   — warning / in-prog */
+  --chart-5: 280 65% 60%;   /* purple  — accent / special  */
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}