@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/assets/css/chat.css

@@ -0,0 +1,229 @@
+/* Exegia chat surfaces, tokens, and Beautiful UI aliases. */
+
+/* Chat surfaces (bubble, composer) — ring + inset depth per theme. */
+:root {
+  --chat-ring: color-mix(in oklab, var(--foreground) 10%, transparent);
+  --chat-inset: rgb(0 0 0 / 0.05);
+  --chat-inset-shadow: inset 0 2px 8px 5px var(--chat-inset);
+  --chat-field: oklch(0.985 0 0);
+  --chat-ai-accent-foreground: var(--color-white);
+  --chat-ai-accent: var(--color-indigo-800);
+  --inset-shadow-color-light: --alpha(var(--color-white) / 20%);
+  --inset-shadow-color-dark: --alpha(var(--color-black) / 10%);
+}
+.dark {
+  --chat-ring: #040404;
+  --chat-inset: --alpha(var(--color-black) / 55%);
+  --chat-inset-shadow: inset 0 2px 8px 5px var(--chat-inset);
+  --chat-field: #252525;
+  --chat-ai-accent-foreground: var(--color-white);
+  --chat-ai-accent: var(--color-indigo-800);
+  --inset-shadow-color-light: --alpha(var(--color-white) / 20%);
+  --inset-shadow-color-dark: --alpha(var(--color-black) / 10%);
+}
+
+/* Exegia chat tokens — one variable per Sketch swatch (`exegia-ui`, Light / … and Dark / …). */
+:root {
+  --bg-page: #f4f4f5;
+  --surface-card: #ffffff;
+  --surface-subtle: #0000000f;
+  --surface-canvas: #fafafa;
+  --surface-code: #f7f7f8;
+  --surface-bubble-sender: #262626;
+  --surface-bubble-recipient: #ececed;
+  --border-default: #00000020;
+  --text-primary: #1a1a1a;
+  --text-secondary: #6b6b6b;
+  --text-muted: #9a9a9a;
+  --text-inverse: #f2f2f2;
+  --accent-default: #a153ff;
+  --accent-subtle: #a153ff26;
+  --accent-text: #6b21c9;
+  --link: #3b2faf;
+  --icon: #4a4a4a;
+  --overlay-scrim: #00000099;
+  --overlay-on-media: #ffffff;
+  --brand: #f7b500;
+  --chart-grid: #00000012;
+  --chart-area-fill: #a153ff2e;
+  --code-keyword: #3b6ff5;
+  --code-string: #25a878;
+  --semantic-success: #25a878;
+  --semantic-success-subtle: #25a8781f;
+  --semantic-warning: #f09a2f;
+  --semantic-warning-subtle: #f09a2f1f;
+  --semantic-danger: #e5484d;
+  --semantic-danger-subtle: #e5484d1f;
+  --semantic-info: #3b82f6;
+  --semantic-info-subtle: #3b82f61f;
+  --chart-series-1: #a153ff;
+  --chart-series-2: #f7b500;
+  --chart-series-3: #3b82f6;
+  --chart-series-4: #25a878;
+  --chart-series-5: #f26d5b;
+  --tag-amber-text: #c98b2a;
+  --tag-amber-fill: #f9eede;
+  --tag-amber-border: #f4dfc0;
+  --tag-purple-text: #8465d7;
+  --tag-purple-fill: #eae4fa;
+  --tag-purple-border: #d9cff7;
+  --tag-blue-text: #3b82f6;
+  --tag-blue-fill: #e6efff;
+  --tag-blue-border: #cfe0ff;
+  --tag-green-text: #25a878;
+  --tag-green-fill: #e4f5ee;
+  --tag-green-border: #c6ebd9;
+}
+.dark {
+  --bg-page: #2c2c2c;
+  --surface-card: #252525;
+  --surface-subtle: #ffffff14;
+  --surface-canvas: #1f1f1f;
+  --surface-code: #1b1b1b;
+  --surface-bubble-sender: #efefef;
+  --surface-bubble-recipient: #262626;
+  --border-default: #ffffff1f;
+  --text-primary: #f2f2f2;
+  --text-secondary: #b3b3b3;
+  --text-muted: #808080;
+  --text-inverse: #181818;
+  --accent-default: #b171ff;
+  --accent-subtle: #a153ff40;
+  --accent-text: #d4b5ff;
+  --link: #9d94ff;
+  --icon: #d0d0d0;
+  --overlay-scrim: #00000099;
+  --overlay-on-media: #ffffff;
+  --brand: #f7b500;
+  --chart-grid: #ffffff14;
+  --chart-area-fill: #b171ff33;
+  --code-keyword: #8ab4ff;
+  --code-string: #3fc48f;
+  --semantic-success: #3fc48f;
+  --semantic-success-subtle: #3fc48f33;
+  --semantic-warning: #f5ad4f;
+  --semantic-warning-subtle: #f5ad4f33;
+  --semantic-danger: #f26b6f;
+  --semantic-danger-subtle: #f26b6f33;
+  --semantic-info: #6aa1ff;
+  --semantic-info-subtle: #6aa1ff33;
+  --chart-series-1: #b171ff;
+  --chart-series-2: #f7b500;
+  --chart-series-3: #6aa1ff;
+  --chart-series-4: #3fc48f;
+  --chart-series-5: #ff8a7a;
+  --tag-amber-text: #f2c063;
+  --tag-amber-fill: #f2c06326;
+  --tag-amber-border: #f2c06359;
+  --tag-purple-text: #c9b3ff;
+  --tag-purple-fill: #c9b3ff26;
+  --tag-purple-border: #c9b3ff59;
+  --tag-blue-text: #8ab4ff;
+  --tag-blue-fill: #8ab4ff26;
+  --tag-blue-border: #8ab4ff59;
+  --tag-green-text: #6fd7ab;
+  --tag-green-fill: #6fd7ab26;
+  --tag-green-border: #6fd7ab59;
+}
+@theme inline {
+  --color-bg-page: var(--bg-page);
+  --color-surface-card: var(--surface-card);
+  --color-surface-subtle: var(--surface-subtle);
+  --color-surface-canvas: var(--surface-canvas);
+  --color-surface-code: var(--surface-code);
+  --color-surface-bubble-sender: var(--surface-bubble-sender);
+  --color-surface-bubble-recipient: var(--surface-bubble-recipient);
+  --color-border-default: var(--border-default);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-muted: var(--text-muted);
+  --color-text-inverse: var(--text-inverse);
+  --color-accent-default: var(--accent-default);
+  --color-accent-subtle: var(--accent-subtle);
+  --color-accent-text: var(--accent-text);
+  --color-link: var(--link);
+  --color-icon: var(--icon);
+  --color-overlay-scrim: var(--overlay-scrim);
+  --color-overlay-on-media: var(--overlay-on-media);
+  --color-brand: var(--brand);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-area-fill: var(--chart-area-fill);
+  --color-code-keyword: var(--code-keyword);
+  --color-code-string: var(--code-string);
+  --color-semantic-success: var(--semantic-success);
+  --color-semantic-success-subtle: var(--semantic-success-subtle);
+  --color-semantic-warning: var(--semantic-warning);
+  --color-semantic-warning-subtle: var(--semantic-warning-subtle);
+  --color-semantic-danger: var(--semantic-danger);
+  --color-semantic-danger-subtle: var(--semantic-danger-subtle);
+  --color-semantic-info: var(--semantic-info);
+  --color-semantic-info-subtle: var(--semantic-info-subtle);
+  --color-chart-series-1: var(--chart-series-1);
+  --color-chart-series-2: var(--chart-series-2);
+  --color-chart-series-3: var(--chart-series-3);
+  --color-chart-series-4: var(--chart-series-4);
+  --color-chart-series-5: var(--chart-series-5);
+  --color-tag-amber-text: var(--tag-amber-text);
+  --color-tag-amber-fill: var(--tag-amber-fill);
+  --color-tag-amber-border: var(--tag-amber-border);
+  --color-tag-purple-text: var(--tag-purple-text);
+  --color-tag-purple-fill: var(--tag-purple-fill);
+  --color-tag-purple-border: var(--tag-purple-border);
+  --color-tag-blue-text: var(--tag-blue-text);
+  --color-tag-blue-fill: var(--tag-blue-fill);
+  --color-tag-blue-border: var(--tag-blue-border);
+  --color-tag-green-text: var(--tag-green-text);
+  --color-tag-green-fill: var(--tag-green-fill);
+  --color-tag-green-border: var(--tag-green-border);
+}
+
+/* Beautiful-UI vocabulary (page / surface / ink / line, card shadows) aliased
+ * onto the chat tokens above so ported primitives keep their class names and
+ * follow light/dark for free. `--accent` stays shadcn's — use --accent-default. */
+:root {
+  --page: var(--bg-page);
+  --surface: var(--surface-card);
+  --inset: var(--surface-subtle);
+  --field: var(--surface-subtle);
+  --hover: var(--surface-subtle);
+  --hover-2: color-mix(in srgb, var(--text-primary) 10%, var(--surface-card));
+  --ink: var(--text-primary);
+  --ink-2: var(--text-secondary);
+  --ink-3: var(--text-muted);
+  --line: var(--border-default);
+  --line-strong: color-mix(in srgb, var(--text-primary) 14%, var(--border-default));
+  --accent-ink: var(--accent-text);
+  --accent-tint: var(--accent-subtle);
+  --ease-link: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  --radius-chip: 6px;
+  --radius-control: 8px;
+  --radius-card: 10px;
+  --shadow-hairline: 0 0 0 1px var(--line);
+  --shadow-btn: 0 0 0 1px var(--line-strong), 0 1px 2px rgb(0 0 0 / 0.05);
+  --shadow-card: 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 6px rgb(0 0 0 / 0.04);
+  --shadow-raised: 0 0 0 1px var(--line), 0 2px 10px rgb(0 0 0 / 0.08);
+}
+
+@theme inline {
+  --color-page: var(--page);
+  --color-surface: var(--surface);
+  --color-inset: var(--inset);
+  --color-field: var(--field);
+  --color-hover: var(--hover);
+  --color-hover-2: var(--hover-2);
+  --color-ink: var(--ink);
+  --color-ink-2: var(--ink-2);
+  --color-ink-3: var(--ink-3);
+  --color-line: var(--line);
+  --color-line-strong: var(--line-strong);
+  --color-accent-ink: var(--accent-ink);
+  --color-accent-tint: var(--accent-tint);
+  --radius-chip: var(--radius-chip);
+  --radius-control: var(--radius-control);
+  --radius-card: var(--radius-card);
+  --shadow-hairline: var(--shadow-hairline);
+  --shadow-btn: var(--shadow-btn);
+  --shadow-card: var(--shadow-card);
+  --shadow-raised: var(--shadow-raised);
+}

package/src/assets/css/shadows.css

@@ -0,0 +1,157 @@
+/* Shared raised, debossed, inset, and chat shadow utilities. */
+
+@utility shadow-bezel-dynamic-* {
+  box-shadow:
+    inset 1.5px 3px 1.8px color-mix(in srgb, currentColor calc(--value(number) * 1%), white),
+    inset -1px -2px 2px color-mix(in srgb, currentColor calc(--value(number) * 1%), black);
+}
+
+@utility shadow-bezel {
+  /* Inherits light/dark ambient highlights automatically */
+  box-shadow:
+    inset 1px 1px 4px rgb(255 255 255 / 0.7),
+    inset -2px -2px 3px rgb(0 0 0 / 0.05);
+}
+
+@utility shadow-debossed {
+  box-shadow:
+    inset 2px 2px 4px rgb(0 0 0 / 0.25),
+    inset -1px -1px 2px rgb(255 255 255 / 0.7);
+}
+
+/* ── Inset bezel ─────────────────────────────────────────────────────────
+   Two independent inset layers you compose one axis at a time: `lit`, the
+   light catching the surface, and `dim`, the shading opposite it. Each layer
+   carries its own edges, blur and opacity.
+
+     inset-shadow-lit-t-2       lit layer cast in from the top edge, 2px
+     inset-shadow-lit-l-2       …and in from the left edge, 2px
+     inset-shadow-lit/20        the whole lit layer at 20% opacity
+     inset-shadow-lit-blur-6    6px blur on the lit layer
+     inset-shadow-blur-6        6px blur on both layers
+
+   `dim-*` mirrors all of it. The letter names the edge the light enters
+   from, so `-t-` pushes the layer down and `-b-` up; opposite edges of one
+   layer write the same axis, so pick one per layer. Offsets take a bare px
+   count or an arbitrary length (`inset-shadow-lit-t-[0.5rem]`). Recolour a
+   layer through --inset-shadow-lit-color / --inset-shadow-dim-color.
+
+   The family owns `box-shadow` outright — never pair it with `shadow-*`, and
+   note it can only draw inset layers, so it cannot replace the outer drop in
+   `shadow-bubble-dim`.
+*/
+@utility inset-shadow-bezel {
+  box-shadow:
+    inset var(--inset-shadow-lit-x, 0) var(--inset-shadow-lit-y, 0)
+      var(--inset-shadow-lit-blur, 0)
+      color-mix(
+        in srgb,
+        var(--inset-shadow-lit-color, #fff)
+          calc(var(--inset-shadow-lit-alpha, 100) * 1%),
+        transparent
+      ),
+    inset var(--inset-shadow-dim-x, 0) var(--inset-shadow-dim-y, 0)
+      var(--inset-shadow-dim-blur, 0)
+      color-mix(
+        in srgb,
+        var(--inset-shadow-dim-color, #000)
+          calc(var(--inset-shadow-dim-alpha, 100) * 1%),
+        transparent
+      );
+}
+
+@utility inset-shadow-lit-t-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-lit-y: calc(--value(number) * 1px);
+  --inset-shadow-lit-y: --value([length]);
+}
+
+@utility inset-shadow-lit-b-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-lit-y: calc(--value(number) * -1px);
+  --inset-shadow-lit-y: calc(--value([length]) * -1);
+}
+
+@utility inset-shadow-lit-l-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-lit-x: calc(--value(number) * 1px);
+  --inset-shadow-lit-x: --value([length]);
+}
+
+@utility inset-shadow-lit-r-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-lit-x: calc(--value(number) * -1px);
+  --inset-shadow-lit-x: calc(--value([length]) * -1);
+}
+
+@utility inset-shadow-dim-t-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-dim-y: calc(--value(number) * 1px);
+  --inset-shadow-dim-y: --value([length]);
+}
+
+@utility inset-shadow-dim-b-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-dim-y: calc(--value(number) * -1px);
+  --inset-shadow-dim-y: calc(--value([length]) * -1);
+}
+
+@utility inset-shadow-dim-l-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-dim-x: calc(--value(number) * 1px);
+  --inset-shadow-dim-x: --value([length]);
+}
+
+@utility inset-shadow-dim-r-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-dim-x: calc(--value(number) * -1px);
+  --inset-shadow-dim-x: calc(--value([length]) * -1);
+}
+
+@utility inset-shadow-lit-blur-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-lit-blur: calc(--value(number) * 1px);
+  --inset-shadow-lit-blur: --value([length]);
+}
+
+@utility inset-shadow-dim-blur-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-dim-blur: calc(--value(number) * 1px);
+  --inset-shadow-dim-blur: --value([length]);
+}
+
+/* Blur both layers at once. */
+@utility inset-shadow-blur-* {
+  @apply inset-shadow-bezel;
+  --inset-shadow-lit-blur: calc(--value(number) * 1px);
+  --inset-shadow-lit-blur: --value([length]);
+  --inset-shadow-dim-blur: calc(--value(number) * 1px);
+  --inset-shadow-dim-blur: --value([length]);
+}
+
+/* Chat design language — inner-shadow bubbles, glass pills, the composer ring. */
+@utility shadow-bubble-lit {
+  /* Light surface: top highlight + bottom-right shading. */
+  box-shadow:
+    inset 0 4px 2px rgb(255 255 255 / 1),
+    inset 1px -3px 6px rgb(0 0 0 / 0.42);
+}
+
+@utility shadow-bubble-dim {
+  /* Dark surface: soft drop + faint top sheen + bottom-left shading. */
+  box-shadow:
+    0 4px 4px rgb(0 0 0 / 0.15),
+    inset 0 5px 3px rgb(252 252 252 / 0.08),
+    inset -1px -2px 5px rgb(0 0 0 / 0.54);
+}
+
+@utility shadow-pill {
+  box-shadow: 0 4px 8px rgb(0 0 0 / 0.25);
+}
+
+@utility shadow-send {
+  box-shadow:
+    inset 0 2px 0 rgb(239 239 243 / 0.47),
+    0 1px 8px -4px rgb(0 0 0 / 1),
+    inset 0 -2px 2px rgb(23 23 23 / 0.46);
+}

package/src/assets/css/theme.css

@@ -0,0 +1,321 @@
+/* Core color, typography, motion, and radius tokens. */
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Let width/height tween between auto and fixed values (e.g. a button
+       toggling to an icon-only size). Progressive enhancement: browsers
+       without support keep the instant jump. */
+  interpolate-size: allow-keywords;
+  --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.457 0.24 277.023);
+  --primary-foreground: oklch(0.962 0.018 272.314);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --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);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.811 0.111 293.571);
+  --chart-2: oklch(0.606 0.25 292.717);
+  --chart-3: oklch(0.541 0.281 293.009);
+  --chart-4: oklch(0.491 0.27 292.581);
+  --chart-5: oklch(0.432 0.232 292.759);
+  --radius: 0.875rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.511 0.262 276.966);
+  --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
+  --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);
+  --destructive-foreground: var(--color-red-700);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-700);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-700);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-700);
+  --liquid-glass-rim-light: rgba(255,255,255,0.8);
+  --liquid-glass-rim-dark: rgba(0,0,0,0.5);
+  --liquid-glass-rim-fade: 2%;
+  --liquid-glass-rim-width: 1.8px;
+  --invert: var(--color-zinc-900);
+  --invert-foreground: var(--color-zinc-50);
+}
+
+.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.398 0.195 277.366);
+  --primary-foreground: oklch(0.962 0.018 272.314);
+  --secondary: oklch(0.274 0.006 286.033);
+  --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);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.811 0.111 293.571);
+  --chart-2: oklch(0.606 0.25 292.717);
+  --chart-3: oklch(0.541 0.281 293.009);
+  --chart-4: oklch(0.491 0.27 292.581);
+  --chart-5: oklch(0.432 0.232 292.759);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.585 0.233 277.117);
+  --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
+  --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);
+  --destructive-foreground: var(--color-red-400);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-400);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-400);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-400);
+  --liquid-glass-rim-light: rgba(255,255,255,0.3);
+  --liquid-glass-rim-dark: rgba(0,0,0,0.5);
+  --liquid-glass-rim-fade: 4%;
+  --liquid-glass-rim-width: 1.5px;
+
+  .shadow-bezel {
+    box-shadow:
+      inset 1px 1px 2px rgb(255 255 255 / 0.15),
+      inset -2px -2px 4px rgb(0 0 0 / 0.6);
+  }
+
+  .shadow-debossed {
+    box-shadow:
+      inset 2px 2px 4px rgb(0 0 0 / 0.6),
+      inset -1px -1px 2px rgb(255 255 255 / 0.15);
+  }
+
+  --invert: var(--color-zinc-700);
+  --invert-foreground: var(--color-zinc-50)
+}
+
+@theme inline {
+  /* motion tokens (transitions.dev scale, via transitions-polish) */
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: ease-in-out;
+  --ease-out: ease-out;
+  --ease-linear: linear;
+  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
+  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
+  --duration-stagger: 40ms;
+  --duration-micro: 80ms;
+  --duration-quick: 150ms;
+  --duration-fast: 250ms;
+  --duration-medium: 350ms;
+  --duration-slow: 400ms;
+  --duration-very-slow: 500ms;
+  --distance-micro: 4px;
+  --distance-small: 6px;
+  --distance-base: 8px;
+  --distance-medium: 12px;
+  --distance-large: 30px;
+  --scale-large: 0.96;
+  --scale-medium: 0.97;
+  --scale-small: 0.98;
+  --scale-tiny: 0.99;
+  --blur-small: 2px;
+  --blur-medium: 3px;
+  --blur-large: 8px;
+  /* streaming-text recipe tunables (transitions.dev #30) */
+  --stream-gap: 60ms;
+  --stream-fade: var(--duration-medium);
+  --stream-blur: 1px;
+  --stream-ease: var(--ease-smooth-out);
+  --font-sans: "Inter Variable", sans-serif;
+  --font-heading: "Figtree Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --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);
+  --color-destructive-foreground: var(--destructive-foreground);
+  @keyframes liquid-drift {
+    0% {
+      background-position:
+        0% 0%,
+        100% 100%,
+        0% 0%;
+    }
+    50% {
+      background-position:
+        30% 20%,
+        70% 80%,
+        0% 0%;
+    }
+    100% {
+      background-position:
+        0% 0%,
+        100% 100%,
+        0% 0%;
+    }
+  }
+  --animate-caret-blink: 1s ease-out infinite caret-blink;
+  --animate-input-shake: input-shake 0.4s ease-in-out;
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning: var(--warning);
+  --color-success-foreground: var(--success-foreground);
+  --color-success: var(--success);
+  --color-info-foreground: var(--info-foreground);
+  --color-info: var(--info);
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+  @keyframes input-shake {
+    0%,
+    100% {
+      translate: 0;
+    }
+    20% {
+      translate: -6px 0;
+    }
+    40% {
+      translate: 6px 0;
+    }
+    60% {
+      translate: -4px 0;
+    }
+    80% {
+      translate: 4px 0;
+    }
+  }
+  @keyframes caret-blink {
+    0%,
+    70%,
+    to {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+  --animate-toast-success-odd: toast-success-odd 0.32s cubic-bezier(0.5, 1, 0.89, 1);
+  --animate-toast-success-even: toast-success-even 0.32s cubic-bezier(0.5, 1, 0.89, 1);
+  --animate-toast-error-odd: toast-error-odd 0.28s cubic-bezier(0.5, 1, 0.89, 1);
+  --animate-toast-error-even: toast-error-even 0.28s cubic-bezier(0.5, 1, 0.89, 1)
+;
+  --color-invert-foreground: var(--invert-foreground);
+  --color-invert: var(--invert);
+  @keyframes toast-success-odd {
+  0% {
+    scale: 1;
+    }
+  30% {
+    scale: 1.025;
+    }
+  60% {
+    scale: 0.99;
+    }
+  100% {
+    scale: 1;
+    }
+  }
+  @keyframes toast-error-odd {
+  0% {
+    translate: 0 0;
+    }
+  25% {
+    translate: -3px 0;
+    }
+  50% {
+    translate: 3px 0;
+    }
+  75% {
+    translate: -3px 0;
+    }
+  100% {
+    translate: 0 0;
+    }
+  }
+  @keyframes toast-success-even {
+  0% {
+    scale: 1;
+    }
+  30% {
+    scale: 1.025;
+    }
+  60% {
+    scale: 0.99;
+    }
+  100% {
+    scale: 1;
+    }
+  }
+  @keyframes toast-error-even {
+  0% {
+    translate: 0 0;
+    }
+  25% {
+    translate: -3px 0;
+    }
+  50% {
+    translate: 3px 0;
+    }
+  75% {
+    translate: -3px 0;
+    }
+  100% {
+    translate: 0 0;
+    }
+  }}