@intelligo-dev/cli 1.0.0-beta.1 → 1.0.0-beta.14

package/templates/app-scaffold/db-schema.ts.tpl

@@ -0,0 +1,29 @@
+/**
+ * Tables this application owns.
+ *
+ * Everything the framework needs — users, workspaces, members, plans,
+ * subscriptions, credits, executions, audit events, notifications,
+ * conversations, documents — is `@intelligo-dev/core`'s and arrives
+ * with its own migrations. Define your product's tables here, scope
+ * them to a workspace, and reference framework tables by import:
+ *
+ *   import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
+ *   import { organization, users } from "@intelligo-dev/core/db/schema";
+ *
+ *   export const reports = pgTable("reports", {
+ *     id: text("id").primaryKey(),
+ *     workspaceId: text("workspace_id")
+ *       .notNull()
+ *       .references(() => organization.id, { onDelete: "cascade" }),
+ *     createdBy: text("created_by").references(() => users.id),
+ *     createdAt: timestamp("created_at").defaultNow().notNull(),
+ *   });
+ *
+ * Then `pnpm db:generate` writes the migration into ./drizzle and
+ * `pnpm db:migrate` applies it after the framework's chain.
+ *
+ * Intelligo never reads these tables (every table has one
+ * owner), so their shape is entirely yours.
+ */
+
+export {};

package/templates/app-scaffold/drizzle-journal.json.tpl

@@ -0,0 +1,5 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": []
+}

package/templates/app-scaffold/drizzle.config.ts.tpl

@@ -0,0 +1,45 @@
+import { defineConfig } from "drizzle-kit";
+import { config } from "dotenv";
+
+// drizzle-kit does not load env files; Next.js does. Same precedence.
+config({ path: ".env.local" });
+config({ path: ".env" });
+
+/**
+ * Your application's migration chain — and only yours.
+ *
+ * The framework's tables (users, workspaces, plans, credits, executions,
+ * …) arrive inside `@intelligo-dev/core` together with their migration
+ * history, and `intelligo migrate` applies that chain. This config
+ * covers the tables you own: list their schema files here, generate
+ * with `pnpm db:generate`, apply with `pnpm db:migrate`.
+ * `drizzle/meta/_journal.json` starts empty so `db:migrate` succeeds
+ * before you own a table — drizzle-kit exits 1, with no message, when
+ * the journal is missing.
+ *
+ * Two chains, one database, so they record themselves in different
+ * tables: the framework in drizzle's default `__drizzle_migrations`,
+ * yours in `__app_migrations`. Do not merge them — drizzle-kit applies
+ * by timestamp, and a framework migration published after you
+ * generated one of yours would be skipped silently.
+ *
+ * Your schema may reference framework tables (`references(() =>
+ * users.id)`); drizzle-kit emits the foreign key by name and does not
+ * try to create the framework's table.
+ *
+ * Do not point `drizzle-kit push` at this config: push diffs the whole
+ * database against the schema it sees, and this config deliberately
+ * sees only yours.
+ */
+export default defineConfig({
+  dialect: "postgresql",
+  schema: ["./lib/db/schema.ts"],
+  out: "./drizzle",
+  migrations: { table: "__app_migrations", schema: "drizzle" },
+  // The framework's columns are snake_case in Postgres and camelCase in
+  // TypeScript. Keep the same convention so joins read naturally.
+  casing: "snake_case",
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/templates/app-scaffold/env.example.tpl

@@ -1,6 +1,18 @@
+# ============================================
 # Required — the app will not boot without these.
+# ============================================
+
+# Postgres with the pgvector extension (Neon, Supabase, RDS, or local).
 DATABASE_URL=
+# Driver is chosen from the URL (Neon hosts get the WebSocket driver,
+# everything else node-postgres). Force it with pg | neon-serverless.
+# INTELLIGO_DB_DRIVER=
+
+# At least 32 characters. Generate with: openssl rand -base64 32
 BETTER_AUTH_SECRET=
+
+# Where users reach the app. Auth callbacks, email links and redirects
+# are built from it, so production needs the public https URL.
 NEXT_PUBLIC_APP_URL=http://localhost:3000
 
 # Which product's plans the billing engine bills against. Your
@@ -8,6 +20,58 @@ NEXT_PUBLIC_APP_URL=http://localhost:3000
 # variable is here so CLI tooling can check it without booting the app.
 INTELLIGO_BILLING_PRODUCT=__APP_SLUG__
 
+# ============================================
+# Optional — everything works locally without these.
+# ============================================
+
+# Sign in with Google or GitHub. A provider's button appears once both
+# of its values are set; the callback URL to register with the provider
+# is NEXT_PUBLIC_APP_URL + /api/auth/callback/google (or /github).
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+
+# Email. Without a provider, emails (verification, invitations, reset
+# links) are printed to the server console, and sign-ups are not held
+# for email verification.
+# RESEND_API_KEY=
+# The sender of every email, on a domain verified with Resend. Required
+# with RESEND_API_KEY: there is no built-in sender, so sends fail without
+# it. Loops ignores it and takes the sender from each template.
+# EMAIL_FROM=Acme <noreply@example.com>
+# The product's name in every email's heading and footer; defaults to
+# the display name in EMAIL_FROM. SUPPORT_EMAIL is the address the
+# footer offers for replies; without it the footer offers none.
+# APP_NAME=Acme
+# SUPPORT_EMAIL=support@example.com
+# Loops sends by template id instead of HTML: map each template with
+# LOOPS_TRANSACTIONAL_ID_<KEY>, e.g. LOOPS_TRANSACTIONAL_ID_VERIFY_EMAIL.
+# LOOPS_API_KEY=
+# With both keys set Resend wins; force one with resend | loops | console.
+# EMAIL_PROVIDER=
+
+# Stripe. Billing pages say "not configured" until these are set; the
+# webhook at /api/webhooks/stripe verifies with the secret.
+# STRIPE_SECRET_KEY=
+# STRIPE_WEBHOOK_SECRET=
+
+# Which registered payment provider serves payments outside Stripe
+# (registerPaymentProvider in the composition root). Defaults to the
+# in-memory mock, which production refuses.
+# PAYMENT_MODE=
+
+# AI providers. Chat runs on a built-in stub model until lib/chat-model.ts
+# names a real one. Set only the key of the provider that model belongs
+# to — the provider's SDK reads it, and the framework checks none of them.
+# OPENAI_API_KEY=
+# ANTHROPIC_API_KEY=
+# GOOGLE_GENERATIVE_AI_API_KEY=
+
+# Bearer token your scheduler sends to /api/cron/maintenance
+# (`intelligo add maintenance`). At least 32 characters.
+# CRON_SECRET=
+
 # Comma-separated emails allowed to reach the Intelligo admin console.
 # Closed by default: with no value, nobody is a platform admin.
-PLATFORM_ADMIN_EMAILS=
+# PLATFORM_ADMIN_EMAILS=

package/templates/app-scaffold/globals.css.tpl

@@ -1,263 +1,42 @@
+/*
+ * Design tokens: shadcn base-nova plus status, layers and motion — what
+ * `shadcn add https://intelligo.dev/r/intelligo.json` writes. Re-value
+ * the tokens to re-theme every installed page; keep the names, registry
+ * items depend on them.
+ */
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
-/* custom variant for setting dark mode programmatically */
-@custom-variant dark (&:is(.dark, .dark *));
-
-/* ============================================================
-   Design tokens.
-   This file is yours — Intelligo generated it once and will not
-   overwrite it. These tokens are a starting point, not a dependency:
-   nothing in your app imports them from an Intelligo package, so
-   edit them freely. Registry items you install with `shadcn add`
-   assume the shadcn new-york theme below; the ones under "Design
-   tokens" are optional extras used by some Intelligo-authored
-   registry items (status colors, agent identity colors) — delete
-   what you don't use.
-   ============================================================ */
-
-/* ---- Light mode tokens ---- */
-:root {
-  /* Status: success */
-  --status-success: hsl(142 76% 36%);
-  --status-success-light: hsl(143 85% 96%);
-  --status-success-dark: hsl(144 61% 20%);
-
-  /* Status: error */
-  --status-error: hsl(0 84% 60%);
-  --status-error-light: hsl(0 86% 97%);
-  --status-error-dark: hsl(0 63% 31%);
-
-  /* Status: warning */
-  --status-warning: hsl(38 92% 50%);
-  --status-warning-light: hsl(48 96% 89%);
-  --status-warning-dark: hsl(32 95% 44%);
-
-  /* Status: info */
-  --status-info: hsl(217 91% 60%);
-  --status-info-light: hsl(214 95% 93%);
-  --status-info-dark: hsl(224 76% 48%);
-
-  /* Brand — Monochrome */
-  --brand-primary: #18181B;
-  --brand-primary-foreground: #ffffff;
-  --brand-accent: #27272A;
-  --brand-accent-end: #3F3F46;
-
-  /* Spacing (semantic aliases) */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-glow-primary: 0 0 40px rgba(255, 255, 255, 0.1);
-
-  /* Z-index scale */
-  --z-dropdown: 50;
-  --z-sticky: 100;
-  --z-modal: 200;
-  --z-popover: 250;
-  --z-toast: 300;
-
-  /* Typography */
-  --font-size-xs: 0.75rem;     /* 12px */
-  --font-size-sm: 0.875rem;    /* 14px */
-  --font-size-base: 1rem;      /* 16px */
-  --font-size-lg: 1.125rem;    /* 18px */
-  --font-size-xl: 1.25rem;     /* 20px */
-  --font-size-2xl: 1.5rem;     /* 24px */
-  --font-size-3xl: 1.875rem;   /* 30px */
-
-  --line-height-tight: 1.25;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0em;
-  --letter-spacing-wide: 0.025em;
-
-  /* Agent identity colors */
-  --agent-career: #7c3aed;
-  --agent-university: #2563eb;
-  --agent-scholarship: #d97706;
-  --agent-student-life: #059669;
-  --agent-ai-futures: #e11d48;
-  --agent-parent: #92400e;
-
-  /* Weather (decorative/thematic) */
-  --weather-day-start: hsl(200 95% 65%);     /* sky-400 equivalent */
-  --weather-day-mid: hsl(217 91% 60%);       /* blue-500 equivalent */
-  --weather-day-end: hsl(221 83% 53%);       /* blue-600 equivalent */
-  --weather-night-start: hsl(244 47% 20%);   /* indigo-900 equivalent */
-  --weather-night-mid: hsl(269 67% 18%);     /* purple-900 equivalent */
-  --weather-night-end: hsl(222 47% 11%);     /* slate-900 equivalent */
-}
-
-/* ---- Dark mode overrides ---- */
-.dark {
-  /* Status: success — lighter text on dark backgrounds */
-  --status-success: hsl(142 69% 58%);
-  --status-success-light: hsl(143 50% 15%);
-  --status-success-dark: hsl(144 76% 80%);
-
-  /* Status: error */
-  --status-error: hsl(0 91% 71%);
-  --status-error-light: hsl(0 50% 15%);
-  --status-error-dark: hsl(0 84% 85%);
-
-  /* Status: warning */
-  --status-warning: hsl(38 95% 64%);
-  --status-warning-light: hsl(38 60% 15%);
-  --status-warning-dark: hsl(38 92% 80%);
+@custom-variant dark (&:is(.dark *));
 
-  /* Status: info */
-  --status-info: hsl(217 91% 70%);
-  --status-info-light: hsl(217 60% 15%);
-  --status-info-dark: hsl(217 91% 85%);
-
-  /* Brand (dark) — Monochrome */
-  --brand-primary: #E8E8E8;
-  --brand-primary-foreground: #121212;
-  --brand-accent: #888888;
-  --brand-accent-end: #555555;
-
-  /* Weather — same in dark mode (self-contained card) */
-  --weather-day-start: hsl(200 95% 65%);
-  --weather-day-mid: hsl(217 91% 60%);
-  --weather-day-end: hsl(221 83% 53%);
-  --weather-night-start: hsl(244 47% 20%);
-  --weather-night-mid: hsl(269 67% 18%);
-  --weather-night-end: hsl(222 47% 11%);
-}
-
-/* ============================================================
-   shadcn new-york theme — style: new-york, baseColor: neutral,
-   cssVariables: true (components.json). Standard shadcn palette;
-   registry items you install assume this default theme, so change
-   it after things are working, not before.
-   ============================================================ */
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-/* define theme — maps CSS variables to Tailwind utilities */
 @theme inline {
-  --font-sans: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
+  --font-sans: var(--font-sans);
+  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
+  --font-heading: var(--font-sans);
   --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-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);
-
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -266,64 +45,176 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-exit: cubic-bezier(0.77, 0, 0.175, 1);
+  --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);
+}
 
-  /* Design token mappings — from packages/ui/src/tokens.css */
-  --color-status-success: var(--status-success);
-  --color-status-success-light: var(--status-success-light);
-  --color-status-error: var(--status-error);
-  --color-status-error-light: var(--status-error-light);
-  --color-status-warning: var(--status-warning);
-  --color-status-warning-light: var(--status-warning-light);
-  --color-status-info: var(--status-info);
-  --color-status-info-light: var(--status-info-light);
-  --color-brand-primary: var(--brand-primary);
-  --color-brand-accent: var(--brand-accent);
-
-  /* Agent color mappings */
-  --color-agent-career: var(--agent-career);
-  --color-agent-university: var(--agent-university);
-  --color-agent-scholarship: var(--agent-scholarship);
-  --color-agent-student-life: var(--agent-student-life);
-  --color-agent-ai-futures: var(--agent-ai-futures);
-  --color-agent-parent: var(--agent-parent);
-
-  /* Typography token mappings */
-  --font-size-xs: var(--font-size-xs);
-  --font-size-sm: var(--font-size-sm);
-  --font-size-base: var(--font-size-base);
-  --font-size-lg: var(--font-size-lg);
-  --font-size-xl: var(--font-size-xl);
-  --font-size-2xl: var(--font-size-2xl);
-  --font-size-3xl: var(--font-size-3xl);
-  --line-height-tight: var(--line-height-tight);
-  --line-height-snug: var(--line-height-snug);
-  --line-height-normal: var(--line-height-normal);
-  --line-height-relaxed: var(--line-height-relaxed);
-  --letter-spacing-tight: var(--letter-spacing-tight);
-  --letter-spacing-normal: var(--letter-spacing-normal);
-  --letter-spacing-wide: var(--letter-spacing-wide);
+:root {
+  --font-sans: "Geist", "Geist Fallback", -apple-system, "Segoe UI", sans-serif;
+  --background: oklch(0.99 0 0);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(0.97 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(0.99 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.15 0 0);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.955 0 0);
+  --secondary-foreground: oklch(0.15 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.95 0 0);
+  --accent-foreground: oklch(0.15 0 0);
+  --destructive: oklch(0.52 0.2 25);
+  --border: oklch(0.15 0 0 / 8%);
+  --input: oklch(0.15 0 0 / 14%);
+  --ring: oklch(0.55 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.975 0 0);
+  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-primary: oklch(0.15 0 0);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.15 0 0 / 8%);
+  --sidebar-ring: oklch(0.55 0 0);
+  --destructive-foreground: oklch(0.99 0 0);
+  --success: oklch(0.49 0.12 155);
+  --success-foreground: oklch(0.99 0 0);
+  --warning: oklch(0.5 0.105 75);
+  --warning-foreground: oklch(0.99 0 0);
+  --info: oklch(0.5 0.135 245);
+  --info-foreground: oklch(0.99 0 0);
 }
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+.dark {
+  --background: oklch(0.196 0 0);
+  --foreground: oklch(0.96 0 0);
+  --card: oklch(0.227 0 0);
+  --card-foreground: oklch(0.96 0 0);
+  --popover: oklch(0.227 0 0);
+  --popover-foreground: oklch(0.96 0 0);
+  --primary: oklch(0.96 0 0);
+  --primary-foreground: oklch(0.196 0 0);
+  --secondary: oklch(0.27 0 0);
+  --secondary-foreground: oklch(0.96 0 0);
+  --muted: oklch(0.227 0 0);
+  --muted-foreground: oklch(0.68 0 0);
+  --accent: oklch(0.28 0 0);
+  --accent-foreground: oklch(0.96 0 0);
+  --destructive: oklch(0.7 0.18 25);
+  --border: oklch(1 0 0 / 7%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.58 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.175 0 0);
+  --sidebar-foreground: oklch(0.96 0 0);
+  --sidebar-primary: oklch(0.96 0 0);
+  --sidebar-primary-foreground: oklch(0.196 0 0);
+  --sidebar-accent: oklch(0.26 0 0);
+  --sidebar-accent-foreground: oklch(0.96 0 0);
+  --sidebar-border: oklch(1 0 0 / 7%);
+  --sidebar-ring: oklch(0.58 0 0);
+  --destructive-foreground: oklch(0.196 0 0);
+  --success: oklch(0.72 0.16 155);
+  --success-foreground: oklch(0.196 0 0);
+  --warning: oklch(0.78 0.15 75);
+  --warning-foreground: oklch(0.196 0 0);
+  --info: oklch(0.72 0.13 245);
+  --info-foreground: oklch(0.196 0 0);
+}
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
   * {
     @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;
   }
+  html {
+    @apply font-sans;
+  }
+  :root {
+    --z-sticky: 10;
+    --z-dropdown: 20;
+    --z-overlay: 40;
+    --z-modal: 50;
+    --z-popover: 60;
+    --z-toast: 70;
+    --duration-fast: 120ms;
+    --duration-normal: 200ms;
+    --duration-slow: 320ms;
+  }
+}
+
+@utility z-sticky {
+  z-index: var(--z-sticky);
+}
+
+@utility z-dropdown {
+  z-index: var(--z-dropdown);
+}
+
+@utility z-overlay {
+  z-index: var(--z-overlay);
+}
+
+@utility z-modal {
+  z-index: var(--z-modal);
+}
+
+@utility z-popover {
+  z-index: var(--z-popover);
+}
+
+@utility z-toast {
+  z-index: var(--z-toast);
+}
+
+@utility duration-fast {
+  transition-duration: var(--duration-fast);
+  animation-duration: var(--duration-fast);
+}
+
+@utility duration-normal {
+  transition-duration: var(--duration-normal);
+  animation-duration: var(--duration-normal);
+}
+
+@utility duration-slow {
+  transition-duration: var(--duration-slow);
+  animation-duration: var(--duration-slow);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }