tembro 1.0.0

package/packages/cli/vendor/templates/styles/globals.css

@@ -0,0 +1,983 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: "Geist Variable", sans-serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --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);
+
+  --radius-sm: calc(var(--radius) * 0.72);
+  --radius-md: calc(var(--radius) * 0.88);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.18);
+  --radius-2xl: calc(var(--radius) * 1.4);
+  --radius-3xl: calc(var(--radius) * 1.7);
+  --radius-4xl: calc(var(--radius) * 2);
+}
+
+:root,
+.light {
+  /* Edit these first to reshape the whole library. */
+  --background: oklch(0.988 0.004 95);
+  --foreground: oklch(0.238 0.02 255);
+  --card: oklch(0.998 0.002 95);
+  --card-foreground: oklch(0.238 0.02 255);
+  --popover: oklch(0.998 0.002 95);
+  --popover-foreground: oklch(0.238 0.02 255);
+  --primary: oklch(0.312 0.05 255);
+  --primary-foreground: oklch(0.985 0.002 95);
+  --secondary: oklch(0.958 0.008 250);
+  --secondary-foreground: oklch(0.282 0.028 255);
+  --muted: oklch(0.964 0.006 250);
+  --muted-foreground: oklch(0.52 0.016 255);
+  --accent: oklch(0.948 0.014 220);
+  --accent-foreground: oklch(0.27 0.03 255);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.892 0.01 250);
+  --input: oklch(0.91 0.012 250);
+  --ring: oklch(0.66 0.035 245);
+  --chart-1: oklch(0.68 0.13 245);
+  --chart-2: oklch(0.74 0.1 205);
+  --chart-3: oklch(0.78 0.11 165);
+  --chart-4: oklch(0.72 0.15 45);
+  --chart-5: oklch(0.66 0.15 15);
+  --radius: 0.75rem;
+  --sidebar: oklch(0.982 0.006 250);
+  --sidebar-foreground: oklch(0.238 0.02 255);
+  --sidebar-primary: oklch(0.312 0.05 255);
+  --sidebar-primary-foreground: oklch(0.985 0.002 95);
+  --sidebar-accent: oklch(0.95 0.012 240);
+  --sidebar-accent-foreground: oklch(0.27 0.03 255);
+  --sidebar-border: oklch(0.89 0.012 250);
+  --sidebar-ring: oklch(0.66 0.035 245);
+  --aui-info: oklch(0.61 0.13 245);
+  --aui-info-foreground: oklch(0.985 0.004 95);
+  --aui-success: oklch(0.68 0.14 160);
+  --aui-success-foreground: oklch(0.985 0.004 95);
+  --aui-warning: oklch(0.76 0.15 80);
+  --aui-warning-foreground: oklch(0.24 0.02 80);
+  --aui-danger: var(--destructive);
+  --aui-danger-foreground: oklch(0.985 0.004 95);
+
+  --aui-radius-control: var(--radius-lg);
+  --aui-radius-surface: var(--radius-xl);
+  --aui-shadow-xs: 0 1px 2px oklch(0.24 0.02 255 / 5%);
+  --aui-shadow-sm: 0 1px 3px oklch(0.24 0.02 255 / 7%);
+  --aui-shadow-md: 0 10px 28px oklch(0.24 0.02 255 / 9%);
+  --aui-shadow-lg: 0 18px 44px oklch(0.24 0.02 255 / 12%);
+  --aui-surface-base: var(--background);
+  --aui-surface-raised: color-mix(in oklch, var(--background), white 42%);
+  --aui-surface-muted: color-mix(in oklch, var(--muted), var(--background) 52%);
+  --aui-border-strong: color-mix(in oklch, var(--border), var(--foreground) 7%);
+
+  --aui-control-radius: var(--aui-radius-control);
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 44%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 82%);
+  --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 48%);
+  --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 86%);
+  --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 48%);
+  --aui-warning-ring-soft: color-mix(in oklch, var(--aui-warning), transparent 86%);
+  --aui-control-surface: var(--aui-surface-raised);
+  --aui-control-surface-hover: color-mix(in oklch, var(--aui-surface-raised), white 12%);
+  --aui-control-surface-muted: var(--aui-surface-muted);
+  --aui-control-surface-disabled: color-mix(in oklch, var(--muted), var(--background) 62%);
+  --aui-control-surface-readonly: color-mix(in oklch, var(--muted), var(--background) 78%);
+  --aui-control-shadow: var(--aui-shadow-sm);
+  --aui-control-border-strong: var(--aui-border-strong);
+  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 68%);
+  --aui-control-panel-bg: var(--aui-surface-raised);
+  --aui-control-panel-shadow: var(--aui-shadow-md);
+  --aui-card-radius: var(--aui-radius-surface);
+  --aui-card-border: color-mix(in oklch, var(--border), white 8%);
+  --aui-card-shadow: var(--aui-shadow-md);
+  --aui-card-shadow-hover: var(--aui-shadow-lg);
+  --aui-card-soft-bg: color-mix(in oklch, var(--muted), var(--background) 34%);
+  --aui-card-outline-bg: var(--aui-surface-raised);
+  --aui-popover-shadow: var(--aui-shadow-lg);
+  --aui-overlay-surface: var(--popover);
+  --aui-overlay-border: color-mix(in oklch, var(--border), white 8%);
+  --aui-overlay-footer-bg: color-mix(in oklch, var(--muted), var(--background) 30%);
+  --aui-sidebar-surface: var(--sidebar);
+  --aui-sidebar-border: color-mix(in oklch, var(--sidebar-border), white 6%);
+  --aui-sidebar-item-bg: transparent;
+  --aui-sidebar-item-hover-bg: color-mix(in oklch, var(--sidebar-accent), transparent 18%);
+  --aui-sidebar-item-active-bg: color-mix(in oklch, var(--sidebar-primary), transparent 78%);
+  --aui-sidebar-item-active-border: color-mix(in oklch, var(--sidebar-primary), transparent 56%);
+  --aui-sidebar-item-active-fg: color-mix(in oklch, var(--sidebar-foreground), white 6%);
+  --aui-sidebar-nav-item-bg: transparent;
+  --aui-sidebar-nav-item-hover-bg: color-mix(in oklch, var(--muted), transparent 68%);
+  --aui-sidebar-nav-item-active-bg: color-mix(in oklch, var(--foreground), transparent 94%);
+  --aui-sidebar-nav-item-active-border: color-mix(in oklch, var(--border), white 4%);
+  --aui-table-surface: var(--card);
+  --aui-table-container-surface: var(--aui-surface-raised);
+  --aui-table-border: color-mix(in oklch, var(--border), white 5%);
+  --aui-table-selection-surface: color-mix(in oklch, var(--background), white 28%);
+  --aui-button-primary-shadow: 0 10px 24px color-mix(in oklch, var(--primary), transparent 88%);
+  --aui-button-danger-shadow: 0 10px 24px color-mix(in oklch, var(--destructive), transparent 89%);
+  --aui-table-header-bg: color-mix(in oklch, var(--muted), var(--background) 26%);
+  --aui-table-toolbar-bg: var(--aui-surface-raised);
+  --aui-table-toolbar-border: color-mix(in oklch, var(--border), white 16%);
+  --aui-table-row-hover-bg: color-mix(in oklch, var(--accent), white 55%);
+  --aui-table-row-selected-bg: color-mix(in oklch, var(--primary), white 90%);
+  --aui-table-stripe-bg: oklch(0.978 0.004 250 / 55%);
+  --aui-table-footer-bg: linear-gradient(180deg, oklch(0.994 0.002 95), oklch(0.974 0.006 250));
+}
+
+.dark {
+  --background: oklch(0.19 0.01 255);
+  --foreground: oklch(0.965 0.004 95);
+  --card: oklch(0.235 0.012 255);
+  --card-foreground: oklch(0.965 0.004 95);
+  --popover: oklch(0.235 0.012 255);
+  --popover-foreground: oklch(0.965 0.004 95);
+  --primary: oklch(0.82 0.04 235);
+  --primary-foreground: oklch(0.205 0.014 255);
+  --secondary: oklch(0.29 0.012 255);
+  --secondary-foreground: oklch(0.965 0.004 95);
+  --muted: oklch(0.29 0.012 255);
+  --muted-foreground: oklch(0.78 0.012 250);
+  --accent: oklch(0.31 0.018 235);
+  --accent-foreground: oklch(0.97 0.004 95);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.68 0.03 235);
+  --chart-1: oklch(0.78 0.11 235);
+  --chart-2: oklch(0.74 0.1 205);
+  --chart-3: oklch(0.72 0.1 165);
+  --chart-4: oklch(0.76 0.11 45);
+  --chart-5: oklch(0.74 0.12 15);
+  --sidebar: oklch(0.215 0.012 255);
+  --sidebar-foreground: oklch(0.965 0.004 95);
+  --sidebar-primary: oklch(0.82 0.04 235);
+  --sidebar-primary-foreground: oklch(0.205 0.014 255);
+  --sidebar-accent: oklch(0.29 0.012 255);
+  --sidebar-accent-foreground: oklch(0.965 0.004 95);
+  --sidebar-border: oklch(1 0 0 / 12%);
+  --sidebar-ring: oklch(0.68 0.03 235);
+  --aui-info: oklch(0.7 0.1 235);
+  --aui-info-foreground: oklch(0.19 0.012 255);
+  --aui-success: oklch(0.76 0.12 160);
+  --aui-success-foreground: oklch(0.19 0.012 255);
+  --aui-warning: oklch(0.8 0.13 82);
+  --aui-warning-foreground: oklch(0.19 0.012 255);
+  --aui-danger: var(--destructive);
+  --aui-danger-foreground: oklch(0.19 0.012 255);
+
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 40%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 80%);
+  --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 46%);
+  --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 84%);
+  --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 46%);
+  --aui-warning-ring-soft: color-mix(in oklch, var(--aui-warning), transparent 84%);
+  --aui-radius-control: var(--radius-lg);
+  --aui-radius-surface: var(--radius-xl);
+  --aui-shadow-xs: 0 1px 2px oklch(0 0 0 / 12%);
+  --aui-shadow-sm: 0 1px 3px oklch(0 0 0 / 16%);
+  --aui-shadow-md: 0 12px 30px oklch(0 0 0 / 26%);
+  --aui-shadow-lg: 0 22px 54px oklch(0 0 0 / 36%);
+  --aui-surface-base: var(--background);
+  --aui-surface-raised: oklch(1 0 0 / 4%);
+  --aui-surface-muted: oklch(1 0 0 / 6%);
+  --aui-border-strong: oklch(1 0 0 / 16%);
+
+  --aui-control-surface: var(--aui-surface-raised);
+  --aui-control-surface-hover: oklch(1 0 0 / 7%);
+  --aui-control-surface-muted: var(--aui-surface-muted);
+  --aui-control-surface-disabled: oklch(1 0 0 / 3%);
+  --aui-control-surface-readonly: oklch(1 0 0 / 4%);
+  --aui-control-shadow: var(--aui-shadow-sm);
+  --aui-card-border: oklch(1 0 0 / 10%);
+  --aui-card-shadow: var(--aui-shadow-md);
+  --aui-card-shadow-hover: var(--aui-shadow-lg);
+  --aui-card-soft-bg: var(--aui-surface-muted);
+  --aui-card-outline-bg: oklch(1 0 0 / 2%);
+  --aui-popover-shadow: var(--aui-shadow-lg);
+  --aui-overlay-surface: var(--popover);
+  --aui-overlay-border: oklch(1 0 0 / 10%);
+  --aui-overlay-footer-bg: oklch(1 0 0 / 5%);
+  --aui-sidebar-surface: var(--sidebar);
+  --aui-sidebar-border: oklch(1 0 0 / 10%);
+  --aui-sidebar-item-bg: transparent;
+  --aui-sidebar-item-hover-bg: oklch(1 0 0 / 7%);
+  --aui-sidebar-item-active-bg: color-mix(in oklch, var(--sidebar-primary), transparent 80%);
+  --aui-sidebar-item-active-border: color-mix(in oklch, var(--sidebar-primary), transparent 60%);
+  --aui-sidebar-item-active-fg: var(--sidebar-foreground);
+  --aui-sidebar-nav-item-bg: transparent;
+  --aui-sidebar-nav-item-hover-bg: oklch(1 0 0 / 6%);
+  --aui-sidebar-nav-item-active-bg: oklch(1 0 0 / 7%);
+  --aui-sidebar-nav-item-active-border: oklch(1 0 0 / 10%);
+  --aui-table-surface: var(--card);
+  --aui-table-container-surface: var(--aui-surface-raised);
+  --aui-table-border: oklch(1 0 0 / 8%);
+  --aui-table-selection-surface: oklch(1 0 0 / 4%);
+  --aui-control-border-strong: var(--aui-border-strong);
+  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 72%);
+  --aui-control-panel-bg: var(--aui-surface-raised);
+  --aui-control-panel-shadow: var(--aui-shadow-md);
+  --aui-button-primary-shadow: 0 1px 0 color-mix(in oklch, white, transparent 82%), 0 18px 40px color-mix(in oklch, var(--primary), transparent 82%);
+  --aui-button-danger-shadow: 0 1px 0 color-mix(in oklch, white, transparent 84%), 0 18px 40px color-mix(in oklch, var(--destructive), transparent 84%);
+  --aui-table-header-bg: color-mix(in oklch, var(--muted), var(--background) 24%);
+  --aui-table-toolbar-bg: var(--aui-surface-raised);
+  --aui-table-toolbar-border: oklch(1 0 0 / 9%);
+  --aui-table-row-hover-bg: oklch(1 0 0 / 5%);
+  --aui-table-row-selected-bg: color-mix(in oklch, var(--primary), transparent 84%);
+  --aui-table-stripe-bg: oklch(1 0 0 / 3%);
+  --aui-table-footer-bg: linear-gradient(180deg, oklch(0.245 0.012 255), oklch(0.215 0.012 255));
+}
+
+:root[data-radius="none"] { --radius: 0rem; }
+:root[data-radius="sm"] { --radius: 0.375rem; }
+:root[data-radius="md"] { --radius: 0.5rem; }
+:root[data-radius="lg"] { --radius: 0.75rem; }
+:root[data-radius="xl"] { --radius: 1rem; }
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html {
+    @apply font-sans;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}
+
+@layer components {
+  [data-slot="button"][data-slot="button"] {
+    border-radius: var(--aui-control-radius);
+    box-shadow: var(--aui-control-shadow);
+    border-color: var(--aui-control-border-strong);
+    background: var(--aui-control-surface);
+    color: var(--foreground);
+  }
+
+  [data-slot="button"][data-slot="button"]:focus-visible {
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
+  [data-slot="button"][data-slot="button"]:not(:disabled):not([aria-disabled="true"]):hover {
+    border-color: var(--aui-control-hover-border);
+    background: var(--aui-control-surface-hover);
+  }
+
+  [data-slot="button"][data-variant="default"] {
+    border-color: color-mix(in oklch, var(--primary), black 10%);
+    background: var(--primary);
+    color: var(--primary-foreground);
+    box-shadow: var(--aui-button-primary-shadow);
+  }
+
+  [data-slot="button"][data-variant="default"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(in oklch, var(--primary), white 10%);
+    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 18%), 0 20px 42px color-mix(in oklch, var(--primary), transparent 74%);
+  }
+
+  [data-slot="button"][data-variant="secondary"] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: color-mix(in oklch, var(--secondary), var(--background) 18%);
+    color: var(--secondary-foreground);
+  }
+
+  [data-slot="button"][data-variant="outline"] {
+    background: var(--aui-control-surface);
+    color: var(--foreground);
+    box-shadow: none;
+  }
+
+  [data-slot="button"][data-variant="outline"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(in oklch, var(--background), transparent 14%);
+  }
+
+  [data-slot="button"][data-variant="ghost"] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: color-mix(in oklch, var(--foreground), transparent 12%);
+  }
+
+  [data-slot="button"][data-variant="ghost"]:not(:disabled):not([aria-disabled="true"]):hover {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: color-mix(in oklch, var(--accent), transparent 22%);
+  }
+
+  [data-slot="button"][data-variant="destructive"] {
+    border-color: color-mix(in oklch, var(--destructive), black 8%);
+    background: var(--destructive);
+    color: var(--aui-danger-foreground);
+    box-shadow: var(--aui-button-danger-shadow);
+  }
+
+  [data-slot="button"][data-variant="destructive"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(in oklch, var(--destructive), white 10%);
+  }
+
+  [data-slot="button"][data-variant="warning"] {
+    border-color: color-mix(in oklch, var(--aui-warning), transparent 64%);
+    background: color-mix(in oklch, var(--aui-warning), transparent 82%);
+    color: color-mix(in oklch, var(--aui-warning-foreground), black 12%);
+    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 82%), 0 16px 34px color-mix(in oklch, var(--aui-warning), transparent 82%);
+  }
+
+  [data-slot="button"][data-variant="warning"]:not(:disabled):not([aria-disabled="true"]) {
+    background: color-mix(in oklch, var(--aui-warning), transparent 74%);
+    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 84%), 0 18px 38px color-mix(in oklch, var(--aui-warning), transparent 76%);
+  }
+
+  [data-slot="button"][data-variant="link"] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: var(--primary);
+  }
+
+  [data-slot="button"][data-variant="link"]:not(:disabled):not([aria-disabled="true"]):hover {
+    border-color: transparent;
+    background: transparent;
+    color: color-mix(in oklch, var(--primary), white 16%);
+  }
+
+  [data-slot="button"][data-loading="true"] {
+    cursor: progress;
+  }
+
+  [data-slot="button"]:disabled,
+  [data-slot="button"][aria-disabled="true"] {
+    border-color: color-mix(in oklch, var(--border), transparent 24%);
+    background: var(--aui-control-surface-disabled);
+    color: color-mix(in oklch, var(--muted-foreground), transparent 8%);
+    box-shadow: none;
+  }
+
+  [data-slot="button"][data-variant="default"]:disabled,
+  [data-slot="button"][data-variant="default"][aria-disabled="true"],
+  [data-slot="button"][data-variant="destructive"]:disabled,
+  [data-slot="button"][data-variant="destructive"][aria-disabled="true"] {
+    color: color-mix(in oklch, var(--primary-foreground), transparent 24%);
+  }
+
+  [data-slot="button"][data-variant="warning"]:disabled,
+  [data-slot="button"][data-variant="warning"][aria-disabled="true"] {
+    color: color-mix(in oklch, var(--aui-warning-foreground), transparent 30%);
+    background: color-mix(in oklch, var(--aui-warning), transparent 60%);
+  }
+
+  [data-slot="button"][data-variant="link"]:disabled,
+  [data-slot="button"][data-variant="link"][aria-disabled="true"],
+  [data-slot="button"][data-variant="ghost"]:disabled,
+  [data-slot="button"][data-variant="ghost"][aria-disabled="true"] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  [data-slot="input"][data-slot="input"],
+  [data-slot="textarea"][data-slot="textarea"],
+  [data-slot="select-trigger"][data-slot="select-trigger"] {
+    border-color: var(--aui-control-border-strong);
+    border-radius: var(--aui-control-radius);
+    background: var(--aui-control-surface);
+    box-shadow: var(--aui-control-shadow);
+  }
+
+  [data-slot="input"][data-slot="input"]:hover,
+  [data-slot="textarea"][data-slot="textarea"]:hover,
+  [data-slot="select-trigger"][data-slot="select-trigger"]:hover {
+    border-color: var(--aui-control-hover-border);
+    background: var(--aui-control-surface-hover);
+  }
+
+  [data-slot="input"][data-slot="input"]:focus-visible,
+  [data-slot="textarea"][data-slot="textarea"]:focus-visible,
+  [data-slot="select-trigger"][data-slot="select-trigger"]:focus-visible {
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
+  [data-slot="input"][data-slot="input"]:disabled,
+  [data-slot="textarea"][data-slot="textarea"]:disabled,
+  [data-slot="select-trigger"][data-slot="select-trigger"]:disabled {
+    background: var(--aui-control-surface-disabled);
+    border-color: color-mix(in oklch, var(--border), transparent 18%);
+    box-shadow: none;
+  }
+
+  [data-slot="input"][data-slot="input"][readonly],
+  [data-slot="textarea"][data-slot="textarea"][readonly] {
+    background: var(--aui-control-surface-readonly);
+    box-shadow: none;
+  }
+
+  [data-slot="input-field"][data-slot="input-field"] {
+    width: 100%;
+  }
+
+  [data-slot="input-meta"][data-slot="input-meta"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="input-count"][data-slot="input-count"] {
+    color: color-mix(in oklch, var(--muted-foreground), transparent 8%);
+  }
+
+  [data-slot="input"][aria-invalid="true"],
+  [data-slot="textarea"][aria-invalid="true"],
+  [data-slot="select-trigger"][aria-invalid="true"] {
+    border-color: color-mix(in oklch, var(--destructive), transparent 26%);
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-danger-ring), 0 0 0 5px var(--aui-danger-ring-soft);
+  }
+
+  [data-slot="badge"][data-slot="badge"] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 5%);
+    background: color-mix(in oklch, var(--muted), var(--background) 42%);
+    color: var(--foreground);
+    box-shadow: inset 0 1px 0 color-mix(in oklch, white, transparent 38%);
+  }
+
+  [data-slot="badge"][data-variant="default"] {
+    border-color: color-mix(in oklch, var(--primary), transparent 64%);
+    background: color-mix(in oklch, var(--primary), transparent 82%);
+    color: color-mix(in oklch, var(--primary), black 28%);
+  }
+
+  [data-slot="badge"][data-variant="secondary"] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 6%);
+    background: color-mix(in oklch, var(--muted), var(--background) 26%);
+  }
+
+  [data-slot="badge"][data-variant="outline"] {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  [data-slot="badge"][data-variant="ghost"] {
+    border-color: transparent;
+    background: transparent;
+    color: var(--muted-foreground);
+    box-shadow: none;
+  }
+
+  [data-slot="badge"][data-variant="destructive"] {
+    border-color: color-mix(in oklch, var(--destructive), transparent 64%);
+    background: color-mix(in oklch, var(--destructive), transparent 84%);
+    color: color-mix(in oklch, var(--destructive), black 18%);
+  }
+
+  [data-slot="badge"][data-variant="link"] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: var(--primary);
+  }
+
+  [data-slot="badge"][data-tone="info"] {
+    border-color: color-mix(in oklch, var(--aui-info), transparent 64%);
+    background: color-mix(in oklch, var(--aui-info), transparent 82%);
+    color: color-mix(in oklch, var(--aui-info), black 18%);
+  }
+
+  [data-slot="badge"][data-tone="success"] {
+    border-color: color-mix(in oklch, var(--aui-success), transparent 64%);
+    background: color-mix(in oklch, var(--aui-success), transparent 82%);
+    color: color-mix(in oklch, var(--aui-success), black 18%);
+  }
+
+  [data-slot="badge"][data-tone="warning"] {
+    border-color: color-mix(in oklch, var(--aui-warning), transparent 58%);
+    background: color-mix(in oklch, var(--aui-warning), transparent 76%);
+    color: color-mix(in oklch, var(--aui-warning-foreground), black 10%);
+  }
+
+  [data-slot="badge"][data-tone="danger"] {
+    border-color: color-mix(in oklch, var(--destructive), transparent 64%);
+    background: color-mix(in oklch, var(--destructive), transparent 84%);
+    color: color-mix(in oklch, var(--destructive), black 18%);
+  }
+
+  [data-slot="badge"][data-tone="muted"] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 6%);
+    background: color-mix(in oklch, var(--muted), var(--background) 26%);
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="tabs-list"][data-slot="tabs-list"],
+  [data-slot="calendar"][data-slot="calendar"],
+  [data-slot="segmented-control"][data-slot="segmented-control"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: var(--aui-control-panel-bg);
+    box-shadow: var(--aui-control-panel-shadow);
+  }
+
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:hover {
+    color: var(--foreground);
+    background: color-mix(in oklch, var(--background), transparent 18%);
+  }
+
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"][data-selected] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: var(--aui-control-surface);
+    color: var(--foreground);
+    box-shadow: var(--aui-control-shadow);
+  }
+
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:focus-visible {
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
+  [data-slot="card"][data-slot="card"],
+  [data-slot="stat-card"][data-slot="stat-card"] {
+    border: 1px solid var(--aui-card-border);
+    border-radius: var(--aui-card-radius);
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), white 8%), var(--card));
+    box-shadow: var(--aui-card-shadow);
+  }
+
+  [data-slot="card"][data-variant="elevated"] {
+    box-shadow: 0 1px 0 oklch(1 0 0 / 76%), 0 24px 58px oklch(0.24 0.02 255 / 10%);
+  }
+
+  [data-slot="card"][data-variant="outline"] {
+    background: var(--aui-card-outline-bg);
+    box-shadow: none;
+  }
+
+  [data-slot="card"][data-variant="soft"] {
+    border-color: color-mix(in oklch, var(--border), transparent 28%);
+    background: var(--aui-card-soft-bg);
+    box-shadow: none;
+  }
+
+  [data-slot="card"][data-tone="info"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-info) 14%), var(--card));
+  }
+
+  [data-slot="card"][data-tone="success"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-success) 14%), var(--card));
+  }
+
+  [data-slot="card"][data-tone="warning"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-warning) 14%), var(--card));
+  }
+
+  [data-slot="card"][data-tone="danger"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--destructive) 10%), var(--card));
+  }
+
+  [data-slot="card"][data-interactive="true"]:hover {
+    border-color: var(--aui-control-hover-border);
+    box-shadow: var(--aui-card-shadow-hover);
+  }
+
+  [data-slot="card"][data-interactive="true"]:focus-visible {
+    box-shadow: var(--aui-card-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
+  [data-slot="card"][data-selected="true"] {
+    border-color: color-mix(in oklch, var(--primary), transparent 44%);
+    box-shadow: var(--aui-card-shadow), 0 0 0 1px color-mix(in oklch, var(--primary), transparent 64%), 0 0 0 6px color-mix(in oklch, var(--primary), transparent 88%);
+  }
+
+  [data-slot="card"][data-disabled="true"] {
+    box-shadow: none;
+    opacity: 0.76;
+  }
+
+  [data-slot="card"][data-size="sm"] {
+    border-radius: var(--radius-xl);
+  }
+
+  [data-slot="card"][data-size="lg"] {
+    border-radius: var(--radius-3xl);
+  }
+
+  [data-slot="card"][data-density="compact"] [data-slot="card-description"] {
+    font-size: 0.8125rem;
+    line-height: 1.35;
+  }
+
+  [data-slot="card"][data-density="comfortable"] [data-slot="card-description"] {
+    font-size: 0.975rem;
+    line-height: 1.7;
+  }
+
+  [data-slot="card"] [data-slot="card"][data-slot="card"] {
+    box-shadow: none;
+    border-color: color-mix(in oklch, var(--border), transparent 18%);
+    background: color-mix(in oklch, var(--muted), transparent 74%);
+  }
+
+  [data-slot="card-footer"][data-slot="card-footer"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--muted), transparent 80%), color-mix(in oklch, var(--muted), transparent 66%));
+  }
+
+  [data-slot="popover-content"][data-slot="popover-content"],
+  [data-slot="dropdown-menu-content"][data-slot="dropdown-menu-content"],
+  [data-slot="dialog-content"][data-slot="dialog-content"],
+  [data-slot="sheet-content"][data-slot="sheet-content"],
+  [data-slot="select-content"][data-slot="select-content"] {
+    border-color: var(--aui-overlay-border);
+    background: var(--aui-overlay-surface);
+    box-shadow: var(--aui-popover-shadow);
+  }
+
+  [data-slot="dialog-footer"][data-slot="dialog-footer"] {
+    border-color: color-mix(in oklch, var(--border), transparent 12%);
+    background: var(--aui-overlay-footer-bg);
+  }
+
+  [data-slot="dialog-content"][data-size="xs"] {
+    max-width: min(28rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="sm"] {
+    max-width: min(34rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="md"] {
+    max-width: min(40rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="lg"] {
+    max-width: min(48rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="xl"] {
+    max-width: min(64rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="full"] {
+    max-width: min(84rem, calc(100% - 2rem));
+  }
+
+  [data-slot="select-item"][data-slot="select-item"]:focus,
+  [data-slot="select-item"][data-slot="select-item"][data-highlighted] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: color-mix(in oklch, var(--accent), transparent 18%);
+    color: var(--accent-foreground);
+  }
+
+  [data-slot="select-item"][data-slot="select-item"][data-selected] {
+    border-color: color-mix(in oklch, var(--primary), transparent 72%);
+    background: color-mix(in oklch, var(--primary), transparent 88%);
+    color: var(--foreground);
+  }
+
+  [data-slot="select-search"][data-slot="select-search"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: var(--aui-control-surface);
+    box-shadow: var(--aui-control-shadow);
+  }
+
+  [data-slot="select-state"][data-slot="select-state"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="async-select-content"][data-slot="async-select-content"] {
+    border-color: var(--aui-overlay-border);
+    background: var(--aui-overlay-surface);
+    box-shadow: var(--aui-popover-shadow);
+  }
+
+  [data-slot="async-select-trigger"][data-slot="async-select-trigger"] {
+    background: var(--aui-control-surface);
+  }
+
+  [data-slot="async-select-meta"][data-slot="async-select-meta"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="async-select-state"][data-slot="async-select-state"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 8%);
+  }
+
+  [data-slot="async-select-option"][data-slot="async-select-option"]:hover {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--accent), transparent 16%);
+    color: var(--accent-foreground);
+  }
+
+  [data-slot="async-select-option"][data-selected="true"] {
+    border-color: color-mix(in oklch, var(--primary), transparent 70%);
+    background: color-mix(in oklch, var(--primary), transparent 88%);
+    color: var(--foreground);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 10%);
+  }
+
+  [data-slot="async-select-create"][data-slot="async-select-create"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--background), transparent 14%);
+  }
+
+  [data-slot="async-select-create"][data-slot="async-select-create"]:hover {
+    border-color: color-mix(in oklch, var(--primary), transparent 68%);
+    background: color-mix(in oklch, var(--primary), transparent 92%);
+  }
+
+  [data-slot="async-select-tag"][data-slot="async-select-tag"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 4%);
+  }
+
+  [data-slot="async-select-clear"][data-slot="async-select-clear"],
+  [data-slot="clearable-input-clear"][data-slot="clearable-input-clear"],
+  [data-slot="async-select-meta-action"][data-slot="async-select-meta-action"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+  }
+
+  [data-slot="async-select-clear"][data-slot="async-select-clear"]:hover,
+  [data-slot="clearable-input-clear"][data-slot="clearable-input-clear"]:hover,
+  [data-slot="async-select-meta-action"][data-slot="async-select-meta-action"]:hover {
+    background: color-mix(in oklch, var(--background), transparent 18%);
+  }
+
+  [data-slot="async-select-group-label"][data-slot="async-select-group-label"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="data-table-wrapper"][data-slot="data-table-wrapper"] {
+    border-color: var(--aui-table-border);
+    background: var(--aui-table-surface);
+    box-shadow: var(--aui-card-shadow);
+  }
+
+  [data-slot="data-table-toolbar"][data-slot="data-table-toolbar"] {
+    border: 1px solid var(--aui-table-toolbar-border);
+    border-radius: var(--aui-card-radius);
+    background: var(--aui-table-toolbar-bg);
+    box-shadow: var(--aui-card-shadow);
+  }
+
+  [data-slot="data-table-toolbar"][data-variant="soft"] {
+    border-color: transparent;
+    background: color-mix(in oklch, var(--muted), transparent 70%);
+    box-shadow: none;
+  }
+
+  [data-slot="data-table-selection-bar"][data-slot="data-table-selection-bar"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: var(--aui-table-selection-surface);
+    box-shadow: var(--aui-control-shadow);
+  }
+
+  [data-slot="data-table-wrapper"] thead {
+    background: var(--aui-table-header-bg);
+  }
+
+  [data-slot="data-table-wrapper"] tbody tr:hover {
+    background: var(--aui-table-row-hover-bg);
+  }
+
+  [data-slot="data-table-wrapper"] tbody tr[data-state="selected"] {
+    background: var(--aui-table-row-selected-bg);
+  }
+
+  [data-slot="data-table-wrapper"] tbody tr[data-striped="true"] {
+    background: var(--aui-table-stripe-bg);
+  }
+
+  [data-slot="data-table-pagination"][data-slot="data-table-pagination"] {
+    border-color: var(--aui-table-border);
+    background: var(--aui-table-footer-bg);
+  }
+
+  [data-slot="table-container"][data-slot="table-container"] {
+    border-color: var(--aui-table-border);
+    background: var(--aui-table-container-surface);
+    box-shadow: var(--aui-card-shadow);
+  }
+
+  [data-slot="table-header"][data-slot="table-header"] {
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="table-footer"][data-slot="table-footer"] {
+    background: color-mix(in oklch, var(--muted), transparent 54%);
+  }
+
+  [data-slot="table-row"][data-slot="table-row"] {
+    border-color: color-mix(in oklch, var(--border), white 2%);
+  }
+
+  [data-slot="table-row"][data-slot="table-row"]:hover {
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="table-row"][data-state="selected"] {
+    background: color-mix(in oklch, var(--primary), transparent 88%);
+  }
+
+  [data-slot="table-row"][data-striped="true"] {
+    background: var(--aui-table-stripe-bg);
+  }
+
+  [data-slot="app-sidebar"][data-slot="app-sidebar"] {
+    border-right: 1px solid var(--aui-sidebar-border);
+    background: var(--aui-sidebar-surface);
+    box-shadow: inset -1px 0 0 oklch(1 0 0 / 4%);
+  }
+
+  [data-slot="app-sidebar-header"][data-slot="app-sidebar-header"],
+  [data-slot="app-sidebar-footer"][data-slot="app-sidebar-footer"] {
+    border-color: var(--aui-sidebar-border);
+  }
+
+  [data-slot="app-sidebar-item"][data-slot="app-sidebar-item"] {
+    background: var(--aui-sidebar-item-bg);
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 8%);
+  }
+
+  [data-slot="app-sidebar-item"][data-slot="app-sidebar-item"]:hover {
+    border-color: color-mix(in oklch, var(--sidebar-border), white 6%);
+    background: var(--aui-sidebar-item-hover-bg);
+    color: var(--sidebar-accent-foreground);
+  }
+
+  [data-slot="app-sidebar-item"][data-active="true"] {
+    border-color: var(--aui-sidebar-item-active-border);
+    background: var(--aui-sidebar-item-active-bg);
+    color: var(--aui-sidebar-item-active-fg);
+    box-shadow: 0 1px 0 oklch(1 0 0 / 6%), 0 10px 24px color-mix(in oklch, var(--sidebar-primary), transparent 88%);
+  }
+
+  [data-slot="app-sidebar-item"][data-slot="app-sidebar-item"]:focus-visible {
+    box-shadow: 0 0 0 1px color-mix(in oklch, var(--sidebar-ring), transparent 40%), 0 0 0 5px color-mix(in oklch, var(--sidebar-ring), transparent 82%);
+  }
+
+  [data-slot="app-sidebar-group-trigger"][data-slot="app-sidebar-group-trigger"] {
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 8%);
+  }
+
+  [data-slot="app-sidebar-group-trigger"][data-slot="app-sidebar-group-trigger"]:hover {
+    border-color: color-mix(in oklch, var(--sidebar-border), white 6%);
+    background: var(--aui-sidebar-item-hover-bg);
+    color: var(--sidebar-accent-foreground);
+  }
+
+  [data-slot="app-sidebar-group-content"][data-slot="app-sidebar-group-content"] {
+    border-left: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 28%);
+  }
+
+  [data-slot="app-sidebar-group-label"][data-slot="app-sidebar-group-label"] {
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 42%);
+  }
+
+  [data-slot="app-sidebar-footer-secondary"][data-slot="app-sidebar-footer-secondary"] {
+    border-bottom: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 16%);
+    padding-bottom: 0.75rem;
+  }
+
+  [data-slot="app-sidebar-action"][data-slot="app-sidebar-action"],
+  [data-slot="app-sidebar-account"][data-slot="app-sidebar-account"] {
+    background: color-mix(in oklch, var(--sidebar), transparent 24%);
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 10%);
+  }
+
+  [data-slot="app-sidebar-action"][data-slot="app-sidebar-action"]:hover,
+  [data-slot="app-sidebar-account"][data-slot="app-sidebar-account"]:hover {
+    border-color: color-mix(in oklch, var(--sidebar-border), white 6%);
+    background: var(--aui-sidebar-item-hover-bg);
+    color: var(--sidebar-accent-foreground);
+  }
+
+  [data-slot="app-sidebar-rail-actions"][data-slot="app-sidebar-rail-actions"] {
+    margin-bottom: 0.75rem;
+  }
+
+  [data-slot="app-sidebar-account-wrap"][data-slot="app-sidebar-account-wrap"] {
+    border-top: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 18%);
+    padding-top: 0.75rem;
+  }
+
+  [data-slot="sidebar-nav-item"][data-slot="sidebar-nav-item"] {
+    background: var(--aui-sidebar-nav-item-bg);
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="sidebar-nav-item"][data-slot="sidebar-nav-item"]:hover {
+    border-color: var(--aui-sidebar-nav-item-active-border);
+    background: var(--aui-sidebar-nav-item-hover-bg);
+    color: var(--foreground);
+  }
+
+  [data-slot="sidebar-nav-item"][data-active="true"] {
+    border-color: var(--aui-sidebar-nav-item-active-border);
+    background: var(--aui-sidebar-nav-item-active-bg);
+    color: var(--foreground);
+  }
+
+  [data-slot="sidebar-nav-group-trigger"][data-slot="sidebar-nav-group-trigger"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="sidebar-nav-group-trigger"][data-slot="sidebar-nav-group-trigger"]:hover {
+    border-color: var(--aui-sidebar-nav-item-active-border);
+    background: var(--aui-sidebar-nav-item-hover-bg);
+    color: var(--foreground);
+  }
+
+  [data-slot="sidebar-nav-group-label"][data-slot="sidebar-nav-group-label"] {
+    color: color-mix(in oklch, var(--muted-foreground), transparent 12%);
+  }
+
+  [data-slot="breadcrumbs-collapsed"][data-slot="breadcrumbs-collapsed"] {
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="breadcrumbs-link"][data-slot="breadcrumbs-link"]:hover {
+    color: var(--foreground);
+  }
+
+  [data-slot="breadcrumbs-current"][data-slot="breadcrumbs-current"] {
+    color: var(--foreground);
+  }
+
+  [data-slot="file-upload-dropzone"][data-dragging="true"] {
+    border-color: var(--primary);
+    background: color-mix(in oklch, var(--primary), transparent 93%);
+  }
+}