From c5417901dba85bf8aca88ac977fb0d387f4f5194 Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Fri, 2 May 2025 22:48:57 +0800
Subject: [PATCH] Starting to clean up themes

---
 docs/css/styles.css                 |   2 +-
 docs/css/theme-orange.css           |  68 ---
 docs/css/theme.css                  | 146 ------
 docs/css/themes/claude.css          | 146 ++++++
 docs/src/_includes/layouts/base.njk |   2 +-
 docs/src/assets/styles.css          | 768 ++++++++++++++++------------
 6 files changed, 580 insertions(+), 552 deletions(-)
 delete mode 100644 docs/css/theme-orange.css
 delete mode 100644 docs/css/theme.css
 create mode 100644 docs/css/themes/claude.css

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 4847ecb..6dd411b 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -16,4 +16,4 @@
 
 }
 
-/* @import "./theme-orange.css"; */
+@import "./themes/claude.css";
diff --git a/docs/css/theme-orange.css b/docs/css/theme-orange.css
deleted file mode 100644
index 7822a0a..0000000
--- a/docs/css/theme-orange.css
+++ /dev/null
@@ -1,68 +0,0 @@
-:root {
-  --radius: 0.5rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.606 0.25 292.717);
-  --primary-foreground: oklch(0.969 0.016 293.756);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.606 0.25 292.717);
-  --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.141 0.005 285.823);
-  --sidebar-primary: oklch(0.606 0.25 292.717);
-  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.606 0.25 292.717);
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.541 0.281 293.009);
-  --primary-foreground: oklch(0.969 0.016 293.756);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --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.541 0.281 293.009);
-  --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.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.541 0.281 293.009);
-  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.541 0.281 293.009);
-}
diff --git a/docs/css/theme.css b/docs/css/theme.css
deleted file mode 100644
index 45a3a77..0000000
--- a/docs/css/theme.css
+++ /dev/null
@@ -1,146 +0,0 @@
-:root {
-  --background: oklch(1.00 0 0);
-  --foreground: oklch(0.27 0 0);
-  --card: oklch(1.00 0 0);
-  --card-foreground: oklch(0.27 0 0);
-  --popover: oklch(1.00 0 0);
-  --popover-foreground: oklch(0.27 0 0);
-  --primary: oklch(0.77 0.16 70.08);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.97 0.00 264.54);
-  --secondary-foreground: oklch(0.45 0.03 256.80);
-  --muted: oklch(0.98 0.00 247.84);
-  --muted-foreground: oklch(0.55 0.02 264.36);
-  --accent: oklch(0.99 0.02 95.28);
-  --accent-foreground: oklch(0.47 0.12 46.20);
-  --destructive: oklch(0.64 0.21 25.33);
-  --destructive-foreground: oklch(1.00 0 0);
-  --border: oklch(0.93 0.01 264.53);
-  --input: oklch(0.93 0.01 264.53);
-  --ring: oklch(0.77 0.16 70.08);
-  --chart-1: oklch(0.77 0.16 70.08);
-  --chart-2: oklch(0.67 0.16 58.32);
-  --chart-3: oklch(0.56 0.15 49.00);
-  --chart-4: oklch(0.47 0.12 46.20);
-  --chart-5: oklch(0.41 0.11 45.90);
-  --sidebar: oklch(0.98 0.00 247.84);
-  --sidebar-foreground: oklch(0.27 0 0);
-  --sidebar-primary: oklch(0.77 0.16 70.08);
-  --sidebar-primary-foreground: oklch(1.00 0 0);
-  --sidebar-accent: oklch(0.99 0.02 95.28);
-  --sidebar-accent-foreground: oklch(0.47 0.12 46.20);
-  --sidebar-border: oklch(0.93 0.01 264.53);
-  --sidebar-ring: oklch(0.77 0.16 70.08);
-  --font-sans: Inter, sans-serif;
-  --font-serif: Source Serif 4, serif;
-  --font-mono: JetBrains Mono, monospace;
-  --radius: 0.375rem;
-  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
-}
-
-.dark {
-  --background: oklch(0.20 0 0);
-  --foreground: oklch(0.92 0 0);
-  --card: oklch(0.27 0 0);
-  --card-foreground: oklch(0.92 0 0);
-  --popover: oklch(0.27 0 0);
-  --popover-foreground: oklch(0.92 0 0);
-  --primary: oklch(0.77 0.16 70.08);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.27 0 0);
-  --secondary-foreground: oklch(0.92 0 0);
-  --muted: oklch(0.27 0 0);
-  --muted-foreground: oklch(0.72 0 0);
-  --accent: oklch(0.47 0.12 46.20);
-  --accent-foreground: oklch(0.92 0.12 95.75);
-  --destructive: oklch(0.64 0.21 25.33);
-  --destructive-foreground: oklch(1.00 0 0);
-  --border: oklch(0.37 0 0);
-  --input: oklch(0.37 0 0);
-  --ring: oklch(0.77 0.16 70.08);
-  --chart-1: oklch(0.84 0.16 84.43);
-  --chart-2: oklch(0.67 0.16 58.32);
-  --chart-3: oklch(0.47 0.12 46.20);
-  --chart-4: oklch(0.56 0.15 49.00);
-  --chart-5: oklch(0.47 0.12 46.20);
-  --sidebar: oklch(0.17 0 0);
-  --sidebar-foreground: oklch(0.92 0 0);
-  --sidebar-primary: oklch(0.77 0.16 70.08);
-  --sidebar-primary-foreground: oklch(1.00 0 0);
-  --sidebar-accent: oklch(0.47 0.12 46.20);
-  --sidebar-accent-foreground: oklch(0.92 0.12 95.75);
-  --sidebar-border: oklch(0.37 0 0);
-  --sidebar-ring: oklch(0.77 0.16 70.08);
-  --font-sans: Inter, sans-serif;
-  --font-serif: Source Serif 4, serif;
-  --font-mono: JetBrains Mono, monospace;
-  --radius: 0.375rem;
-  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
-}
-
-@theme inline {
-  --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);
-  --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);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
\ No newline at end of file
diff --git a/docs/css/themes/claude.css b/docs/css/themes/claude.css
new file mode 100644
index 0000000..0be9307
--- /dev/null
+++ b/docs/css/themes/claude.css
@@ -0,0 +1,146 @@
+:root {
+  --background: oklch(0.98 0.01 95.10);
+  --foreground: oklch(0.34 0.03 95.72);
+  --card: oklch(0.98 0.01 95.10);
+  --card-foreground: oklch(0.19 0.00 106.59);
+  --popover: oklch(1.00 0 0);
+  --popover-foreground: oklch(0.27 0.02 98.94);
+  --primary: oklch(0.62 0.14 39.04);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.92 0.01 92.99);
+  --secondary-foreground: oklch(0.43 0.02 98.60);
+  --muted: oklch(0.93 0.02 90.24);
+  --muted-foreground: oklch(0.61 0.01 97.42);
+  --accent: oklch(0.92 0.01 92.99);
+  --accent-foreground: oklch(0.27 0.02 98.94);
+  --destructive: oklch(0.19 0.00 106.59);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.88 0.01 97.36);
+  --input: oklch(0.76 0.02 98.35);
+  --ring: oklch(0.59 0.17 253.06);
+  --chart-1: oklch(0.56 0.13 43.00);
+  --chart-2: oklch(0.69 0.16 290.41);
+  --chart-3: oklch(0.88 0.03 93.13);
+  --chart-4: oklch(0.88 0.04 298.18);
+  --chart-5: oklch(0.56 0.13 42.06);
+  --sidebar: oklch(0.97 0.01 98.88);
+  --sidebar-foreground: oklch(0.36 0.01 106.65);
+  --sidebar-primary: oklch(0.62 0.14 39.04);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.92 0.01 92.99);
+  --sidebar-accent-foreground: oklch(0.33 0 0);
+  --sidebar-border: oklch(0.94 0 0);
+  --sidebar-ring: oklch(0.77 0 0);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+.dark {
+  --background: oklch(0.27 0.00 106.64);
+  --foreground: oklch(0.81 0.01 93.01);
+  --card: oklch(0.27 0.00 106.64);
+  --card-foreground: oklch(0.98 0.01 95.10);
+  --popover: oklch(0.31 0.00 106.60);
+  --popover-foreground: oklch(0.92 0.00 106.48);
+  --primary: oklch(0.67 0.13 38.76);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.98 0.01 95.10);
+  --secondary-foreground: oklch(0.31 0.00 106.60);
+  --muted: oklch(0.22 0.00 106.71);
+  --muted-foreground: oklch(0.77 0.02 99.07);
+  --accent: oklch(0.21 0.01 95.42);
+  --accent-foreground: oklch(0.97 0.01 98.88);
+  --destructive: oklch(0.64 0.21 25.33);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.36 0.01 106.89);
+  --input: oklch(0.43 0.01 100.22);
+  --ring: oklch(0.59 0.17 253.06);
+  --chart-1: oklch(0.56 0.13 43.00);
+  --chart-2: oklch(0.69 0.16 290.41);
+  --chart-3: oklch(0.21 0.01 95.42);
+  --chart-4: oklch(0.31 0.05 289.32);
+  --chart-5: oklch(0.56 0.13 42.06);
+  --sidebar: oklch(0.24 0.00 67.71);
+  --sidebar-foreground: oklch(0.81 0.01 93.01);
+  --sidebar-primary: oklch(0.33 0 0);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.17 0.00 106.62);
+  --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
+  --sidebar-border: oklch(0.94 0 0);
+  --sidebar-ring: oklch(0.77 0 0);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+@theme inline {
+  --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);
+  --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);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
\ No newline at end of file
diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
index 970d258..abce9f2 100644
--- a/docs/src/_includes/layouts/base.njk
+++ b/docs/src/_includes/layouts/base.njk
@@ -190,7 +190,7 @@
 ) }}
 
 <main id="content">
-  <header class="bg-background sticky inset-x-0 top-0 isolate z-10 flex shrink-0 items-center gap-2 border-b">
+  <header class="bg-background sticky inset-x-0 top-0 isolate z-20 flex shrink-0 items-center gap-2 border-b z-10">
     <div class="flex h-14 w-full items-center gap-2 px-4">
       <button
         type="button"
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index 1ddbe95..b3843e4 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -8,9 +8,9 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: 'Inter';
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: 'JetBrains Mono';
+    --font-sans: var(--font-sans);
+    --font-serif: var(--font-serif);
+    --font-mono: var(--font-mono);
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-900: oklch(41.4% 0.112 45.904);
@@ -64,13 +64,13 @@
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
-    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --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-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-2xs: var(--shadow-2xs);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -79,6 +79,7 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --shadow: var(--shadow);
     --color-background: var(--background);
     --color-foreground: var(--foreground);
     --color-card: var(--card);
@@ -306,6 +307,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -659,16 +663,16 @@
     border-radius: calc(infinity * 1px);
   }
   .rounded-lg {
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
   }
   .rounded-md {
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
   }
   .rounded-sm {
-    border-radius: var(--radius-sm);
+    border-radius: calc(var(--radius) - 4px);
   }
   .rounded-xl {
-    border-radius: var(--radius-xl);
+    border-radius: calc(var(--radius) + 4px);
   }
   .border {
     border-style: var(--tw-border-style);
@@ -685,22 +689,22 @@
     background-color: var(--color-neutral-900) !important;
   }
   .bg-accent {
-    background-color: var(--color-accent);
+    background-color: var(--accent);
   }
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
   .bg-background {
-    background-color: var(--color-background);
+    background-color: var(--background);
   }
   .bg-foreground {
-    background-color: var(--color-foreground);
+    background-color: var(--foreground);
   }
   .bg-muted {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
   }
   .bg-sidebar-primary {
-    background-color: var(--color-sidebar-primary);
+    background-color: var(--sidebar-primary);
   }
   .object-cover {
     object-fit: cover;
@@ -840,22 +844,22 @@
     color: var(--color-amber-900);
   }
   .text-destructive {
-    color: var(--color-destructive);
+    color: var(--destructive);
   }
   .text-foreground {
-    color: var(--color-foreground);
+    color: var(--foreground);
   }
   .text-muted-foreground {
-    color: var(--color-muted-foreground);
+    color: var(--muted-foreground);
   }
   .text-sidebar-foreground\/70 {
-    color: var(--color-sidebar-foreground);
+    color: var(--sidebar-foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent);
+      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
     }
   }
   .text-sidebar-primary-foreground {
-    color: var(--color-sidebar-primary-foreground);
+    color: var(--sidebar-primary-foreground);
   }
   .text-zinc-50 {
     color: var(--color-zinc-50);
@@ -881,14 +885,14 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-xs {
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .ring-sidebar-ring {
-    --tw-ring-color: var(--color-sidebar-ring);
+    --tw-ring-color: var(--sidebar-ring);
   }
   .ring-offset-background {
-    --tw-ring-offset-color: var(--color-background);
+    --tw-ring-offset-color: var(--background);
   }
   .outline-hidden {
     --tw-outline-style: none;
@@ -982,7 +986,7 @@
     &:checked {
       &::before {
         content: var(--tw-content);
-        background-color: var(--color-background);
+        background-color: var(--background);
       }
     }
   }
@@ -1008,9 +1012,9 @@
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
@@ -1018,9 +1022,9 @@
   .hover\:bg-destructive\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
         }
       }
     }
@@ -1028,7 +1032,7 @@
   .hover\:bg-sidebar-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-sidebar-accent);
+        background-color: var(--sidebar-accent);
       }
     }
   }
@@ -1042,14 +1046,14 @@
   .hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-foreground);
+        color: var(--foreground);
       }
     }
   }
   .hover\:text-sidebar-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-sidebar-accent-foreground);
+        color: var(--sidebar-accent-foreground);
       }
     }
   }
@@ -1069,20 +1073,20 @@
   }
   .focus\:bg-destructive\/10 {
     &:focus {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
       }
     }
   }
   .focus\:text-destructive {
     &:focus {
-      color: var(--color-destructive);
+      color: var(--destructive);
     }
   }
   .focus-visible\:border-ring {
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
   }
   .focus-visible\:ring-1 {
@@ -1105,14 +1109,14 @@
   }
   .focus-visible\:ring-ring {
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
     }
   }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
   }
@@ -1258,9 +1262,9 @@
   .dark\:checked\:bg-input\/30 {
     &:is(.dark *) {
       &:checked {
-        background-color: var(--color-input);
+        background-color: var(--input);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+          background-color: color-mix(in oklab, var(--input) 30%, transparent);
         }
       }
     }
@@ -1270,7 +1274,7 @@
       &:checked {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-primary);
+          background-color: var(--primary);
         }
       }
     }
@@ -1279,9 +1283,9 @@
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-destructive);
+          background-color: var(--destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
           }
         }
       }
@@ -1290,9 +1294,9 @@
   .dark\:focus\:bg-destructive\/20 {
     &:is(.dark *) {
       &:focus {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
         }
       }
     }
@@ -1332,7 +1336,7 @@
   }
   .\[\&_a\]\:text-muted-foreground {
     & a {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
   .\[\&_a\]\:no-underline {
@@ -1351,7 +1355,7 @@
     & a {
       &:hover {
         @media (hover: hover) {
-          color: var(--color-foreground);
+          color: var(--foreground);
         }
       }
     }
@@ -1391,12 +1395,12 @@
   }
   .\[\&_img\]\:ring-background {
     & img {
-      --tw-ring-color: var(--color-background);
+      --tw-ring-color: var(--background);
     }
   }
   .\[\&_img\]\:ring-card {
     & img {
-      --tw-ring-color: var(--color-card);
+      --tw-ring-color: var(--card);
     }
   }
   .\[\&_img\]\:grayscale {
@@ -1462,7 +1466,7 @@
   }
   .\[\&_svg\]\:\!text-destructive {
     & svg {
-      color: var(--color-destructive) !important;
+      color: var(--destructive) !important;
     }
   }
   .\[\&_ul\]\:m-0 {
@@ -1601,10 +1605,10 @@
 }
 @layer base {
   * {
-    border-color: var(--color-border);
-    outline-color: var(--color-ring);
+    border-color: var(--border);
+    outline-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
   html {
@@ -1612,8 +1616,8 @@
   }
   body {
     overscroll-behavior: none;
-    background-color: var(--color-background);
-    color: var(--color-foreground);
+    background-color: var(--background);
+    color: var(--foreground);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -1658,7 +1662,7 @@
     grid-template-columns: 0 1fr;
     align-items: flex-start;
     row-gap: calc(var(--spacing) * 0.5);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
     padding-inline: calc(var(--spacing) * 4);
@@ -1701,7 +1705,7 @@
       gap: calc(var(--spacing) * 1);
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
       & p {
         --tw-leading: var(--leading-relaxed);
         line-height: var(--leading-relaxed);
@@ -1715,17 +1719,17 @@
     }
   }
   .alert {
-    background-color: var(--color-card);
-    color: var(--color-card-foreground);
+    background-color: var(--card);
+    color: var(--card-foreground);
   }
   .alert-destructive {
-    background-color: var(--color-card);
-    color: var(--color-destructive);
+    background-color: var(--card);
+    color: var(--destructive);
     &>svg {
       color: currentcolor;
     }
     section {
-      color: var(--color-destructive);
+      color: var(--destructive);
     }
   }
 }
@@ -1736,7 +1740,7 @@
     cursor: pointer;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-medium);
@@ -1748,16 +1752,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -1767,19 +1771,19 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -1832,77 +1836,77 @@
     height: calc(var(--spacing) * 10);
   }
   .btn, .btn-primary, .btn-sm, .btn-sm-primary, .btn-lg, .btn-lg-primary, .btn-icon, .btn-icon-primary, .btn-sm-icon, .btn-sm-icon-primary, .btn-lg-icon, .btn-lg-icon-primary {
-    background-color: var(--color-primary);
-    color: var(--color-primary-foreground);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
         }
       }
     }
     &[aria-pressed='true'] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
       }
     }
   }
   .btn-secondary, .btn-sm-secondary, .btn-lg-secondary, .btn-icon-secondary, .btn-sm-icon-secondary, .btn-lg-icon-secondary {
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-foreground);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-secondary);
+      background-color: var(--secondary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
       }
     }
   }
   .btn-outline, .btn-sm-outline, .btn-lg-outline, .btn-icon-outline, .btn-sm-icon-outline, .btn-lg-icon-outline {
     border-style: var(--tw-border-style);
     border-width: 1px;
-    background-color: var(--color-background);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    background-color: var(--background);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:is(.dark *) {
-      border-color: var(--color-input);
+      border-color: var(--input);
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-accent);
-      color: var(--color-accent-foreground);
+      background-color: var(--accent);
+      color: var(--accent-foreground);
       &:is(.dark *) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
   }
   .btn-ghost, .btn-sm-ghost, .btn-lg-ghost, .btn-icon-ghost, .btn-sm-icon-ghost, .btn-lg-icon-ghost {
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-accent);
-      color: var(--color-accent-foreground);
+      background-color: var(--accent);
+      color: var(--accent-foreground);
       &:is(.dark *) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
   }
   .btn-link, .btn-sm-link, .btn-lg-link, .btn-icon-link, .btn-sm-icon-link, .btn-lg-icon-link {
-    color: var(--color-primary);
+    color: var(--primary);
     text-underline-offset: 4px;
     &:hover, &[aria-pressed='true'] {
       &:hover {
@@ -1913,39 +1917,39 @@
     }
   }
   .btn-destructive, .btn-sm-destructive, .btn-lg-destructive, .btn-icon-destructive, .btn-sm-icon-destructive, .btn-lg-icon-destructive {
-    background-color: var(--color-destructive);
+    background-color: var(--destructive);
     color: var(--color-white);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:focus-visible {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
       }
     }
     &:is(.dark *) {
       &:focus-visible {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
       &:is(.dark *) {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 50%, transparent);
         }
       }
     }
@@ -1960,7 +1964,7 @@
     justify-content: center;
     gap: calc(var(--spacing) * 1);
     overflow: hidden;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
     padding-inline: calc(var(--spacing) * 2);
@@ -1974,32 +1978,32 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2013,14 +2017,14 @@
   }
   .badge, .badge-primary {
     border-color: transparent;
-    background-color: var(--color-primary);
-    color: var(--color-primary-foreground);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-primary);
+          background-color: var(--primary);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+            background-color: color-mix(in oklab, var(--primary) 90%, transparent);
           }
         }
       }
@@ -2028,14 +2032,14 @@
   }
   .badge-secondary {
     border-color: transparent;
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-foreground);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-secondary);
+          background-color: var(--secondary);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-secondary) 90%, transparent);
+            background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
           }
         }
       }
@@ -2043,52 +2047,52 @@
   }
   .badge-destructive {
     border-color: transparent;
-    background-color: var(--color-destructive);
+    background-color: var(--destructive);
     color: var(--color-white);
     &:focus-visible {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
       }
     }
     &:is(.dark *) {
       &:focus-visible {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-destructive);
+          background-color: var(--destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+            background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
           }
         }
       }
     }
   }
   .badge-outline {
-    color: var(--color-foreground);
+    color: var(--foreground);
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-accent);
+          background-color: var(--accent);
         }
       }
     }
     a& {
       &:hover {
         @media (hover: hover) {
-          color: var(--color-accent-foreground);
+          color: var(--accent-foreground);
         }
       }
     }
@@ -2099,13 +2103,13 @@
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 6);
-    border-radius: var(--radius-xl);
+    border-radius: calc(var(--radius) + 4px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    background-color: var(--color-card);
+    background-color: var(--card);
     padding-block: calc(var(--spacing) * 6);
-    color: var(--color-card-foreground);
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    color: var(--card-foreground);
+    --tw-shadow: var(--shadow-sm);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     > header {
       container-type: inline-size;
@@ -2131,7 +2135,7 @@
       p {
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height));
-        color: var(--color-muted-foreground);
+        color: var(--muted-foreground);
       }
     }
     > section {
@@ -2156,8 +2160,8 @@
     border-radius: 4px;
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    border-color: var(--input);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2165,22 +2169,22 @@
     --tw-outline-style: none;
     outline-style: none;
     &:checked {
-      border-color: var(--color-primary);
+      border-color: var(--primary);
     }
     &:checked {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -2190,30 +2194,30 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &:checked {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2221,7 +2225,7 @@
       display: block;
       width: calc(var(--spacing) * 3.5);
       height: calc(var(--spacing) * 3.5);
-      background-color: var(--color-primary-foreground);
+      background-color: var(--primary-foreground);
       --tw-content: '';
       content: var(--tw-content);
       mask-image: var(--check-icon);
@@ -2304,13 +2308,13 @@
         scale: var(--tw-scale-x) var(--tw-scale-y);
         flex-direction: column;
         gap: calc(var(--spacing) * 4);
-        border-radius: var(--radius-lg);
+        border-radius: var(--radius);
         border-style: var(--tw-border-style);
         border-width: 1px;
-        background-color: var(--color-background);
+        background-color: var(--background);
         padding: calc(var(--spacing) * 6);
         opacity: 0%;
-        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        --tw-shadow: var(--shadow-lg);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         transition-property: all;
         transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2337,7 +2341,7 @@
           > p {
             font-size: var(--text-sm);
             line-height: var(--tw-leading, var(--text-sm--line-height));
-            color: var(--color-muted-foreground);
+            color: var(--muted-foreground);
           }
         }
         > section {
@@ -2362,7 +2366,7 @@
           right: calc(var(--spacing) * 4);
           border-radius: var(--radius-xs);
           opacity: 70%;
-          --tw-ring-offset-color: var(--color-background);
+          --tw-ring-offset-color: var(--background);
           transition-property: opacity;
           transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
           transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -2376,7 +2380,7 @@
             box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
           }
           &:focus {
-            --tw-ring-color: var(--color-ring);
+            --tw-ring-color: var(--ring);
           }
           &:focus {
             --tw-ring-offset-width: 2px;
@@ -2394,10 +2398,10 @@
             pointer-events: none;
           }
           &[data-state="open"] {
-            background-color: var(--color-accent);
+            background-color: var(--accent);
           }
           &[data-state="open"] {
-            color: var(--color-muted-foreground);
+            color: var(--muted-foreground);
           }
           & svg {
             pointer-events: none;
@@ -2421,16 +2425,16 @@
     width: 100%;
     min-width: calc(var(--spacing) * 0);
     appearance: none;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
+    border-color: var(--input);
     background-color: transparent;
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 1);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2438,16 +2442,16 @@
     --tw-outline-style: none;
     outline-style: none;
     & *::selection {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &::selection {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     & *::selection {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
     &::selection {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
     &::file-selector-button {
       display: inline-flex;
@@ -2471,10 +2475,10 @@
       font-weight: var(--font-weight-medium);
     }
     &::file-selector-button {
-      color: var(--color-foreground);
+      color: var(--foreground);
     }
     &::placeholder {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
     &:disabled {
       pointer-events: none;
@@ -2490,38 +2494,38 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2568,14 +2572,14 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
       overflow-x: hidden;
       overflow-y: auto;
-      border-radius: var(--radius-md);
+      border-radius: calc(var(--radius) - 2px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      background-color: var(--color-popover);
+      background-color: var(--popover);
       padding: calc(var(--spacing) * 1);
-      color: var(--color-popover-foreground);
+      color: var(--popover-foreground);
       opacity: 100%;
-      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      --tw-shadow: var(--shadow-md);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       transition-property: all;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2656,7 +2660,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        border-radius: var(--radius-sm);
+        border-radius: calc(var(--radius) - 4px);
         padding-inline: calc(var(--spacing) * 2);
         padding-block: calc(var(--spacing) * 1.5);
         font-size: var(--text-sm);
@@ -2692,34 +2696,34 @@
           flex-shrink: 0;
         }
         & svg {
-          color: var(--color-muted-foreground);
+          color: var(--muted-foreground);
         }
       }
       [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'] {
         &:hover {
           @media (hover: hover) {
-            background-color: var(--color-accent);
+            background-color: var(--accent);
           }
         }
         &:hover {
           @media (hover: hover) {
-            color: var(--color-accent-foreground);
+            color: var(--accent-foreground);
           }
         }
         &:focus-visible {
-          background-color: var(--color-accent);
+          background-color: var(--accent);
         }
         &:focus-visible {
-          color: var(--color-accent-foreground);
+          color: var(--accent-foreground);
         }
       }
       [role='option'] {
         padding-right: calc(var(--spacing) * 7.5);
         &[data-focus] {
-          background-color: var(--color-accent);
+          background-color: var(--accent);
         }
         &[data-focus] {
-          color: var(--color-accent-foreground);
+          color: var(--accent-foreground);
         }
         &[aria-selected='true'] {
           background-image: var(--check-icon);
@@ -2743,7 +2747,7 @@
         padding-block: calc(var(--spacing) * 1.5);
         font-size: var(--text-xs);
         line-height: var(--tw-leading, var(--text-xs--line-height));
-        color: var(--color-muted-foreground);
+        color: var(--muted-foreground);
       }
       [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
         display: none;
@@ -2751,7 +2755,7 @@
       [role='separator'] {
         margin-inline: calc(var(--spacing) * -1);
         margin-block: calc(var(--spacing) * 1);
-        border-color: var(--color-border);
+        border-color: var(--border);
       }
       > header {
         margin-inline: calc(var(--spacing) * -1);
@@ -2776,7 +2780,7 @@
           width: 100%;
           min-width: calc(var(--spacing) * 0);
           flex: 1;
-          border-radius: var(--radius-md);
+          border-radius: calc(var(--radius) - 2px);
           background-color: transparent;
           padding-block: calc(var(--spacing) * 3);
           font-size: var(--text-sm);
@@ -2788,7 +2792,7 @@
             outline-offset: 2px;
           }
           &::placeholder {
-            color: var(--color-muted-foreground);
+            color: var(--muted-foreground);
           }
           &:disabled {
             cursor: not-allowed;
@@ -2831,9 +2835,9 @@
     border-radius: calc(infinity * 1px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
-    color: var(--color-primary);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    border-color: var(--input);
+    color: var(--primary);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2841,16 +2845,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -2860,25 +2864,25 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2893,7 +2897,7 @@
       --tw-translate-y: calc(calc(1/2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
       border-radius: calc(infinity * 1px);
-      background-color: var(--color-primary);
+      background-color: var(--primary);
       --tw-content: '';
       content: var(--tw-content);
     }
@@ -2932,13 +2936,13 @@
       border-radius: calc(infinity * 1px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      border-color: var(--color-primary);
-      background-color: var(--color-background);
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      border-color: var(--primary);
+      background-color: var(--background);
+      --tw-shadow: var(--shadow-sm);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &::-webkit-slider-runnable-track {
@@ -2958,13 +2962,13 @@
       border-radius: calc(infinity * 1px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      border-color: var(--color-primary);
-      background-color: var(--color-background);
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      border-color: var(--primary);
+      background-color: var(--background);
+      --tw-shadow: var(--shadow-sm);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &::-moz-range-track {
@@ -2984,13 +2988,13 @@
       border-radius: calc(infinity * 1px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      border-color: var(--color-primary);
-      background-color: var(--color-background);
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      border-color: var(--primary);
+      background-color: var(--background);
+      --tw-shadow: var(--shadow-sm);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &::-ms-track {
@@ -3001,11 +3005,11 @@
     }
     &::-ms-fill-lower {
       border-radius: calc(infinity * 1px);
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &::-ms-fill-upper {
       border-radius: calc(infinity * 1px);
-      background-color: var(--color-muted);
+      background-color: var(--muted);
     }
   }
 }
@@ -3018,10 +3022,10 @@
     align-items: center;
     justify-content: space-between;
     gap: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
+    border-color: var(--input);
     background-color: transparent;
     padding-block: calc(var(--spacing) * 2);
     padding-right: calc(var(--spacing) * 9);
@@ -3029,7 +3033,7 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     white-space: nowrap;
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3037,16 +3041,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -3056,35 +3060,35 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-input);
+          background-color: var(--input);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
+            background-color: color-mix(in oklab, var(--input) 50%, transparent);
           }
         }
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -3119,8 +3123,8 @@
     display: flex;
     width: var(--sidebar-mobile-width);
     flex-direction: column;
-    background-color: var(--color-sidebar);
-    color: var(--color-sidebar-foreground);
+    background-color: var(--sidebar);
+    color: var(--sidebar-foreground);
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -3204,7 +3208,7 @@
     [role=separator] {
       margin-inline: calc(var(--spacing) * 2);
       width: auto;
-      border-color: var(--color-sidebar-border);
+      border-color: var(--sidebar-border);
     }
     > section {
       display: flex;
@@ -3226,17 +3230,17 @@
         height: calc(var(--spacing) * 8);
         flex-shrink: 0;
         align-items: center;
-        border-radius: var(--radius-md);
+        border-radius: calc(var(--radius) - 2px);
         padding-inline: calc(var(--spacing) * 2);
         font-size: var(--text-xs);
         line-height: var(--tw-leading, var(--text-xs--line-height));
         --tw-font-weight: var(--font-weight-medium);
         font-weight: var(--font-weight-medium);
-        color: var(--color-sidebar-foreground);
+        color: var(--sidebar-foreground);
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent);
+          color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
         }
-        --tw-ring-color: var(--color-sidebar-ring);
+        --tw-ring-color: var(--sidebar-ring);
         --tw-outline-style: none;
         outline-style: none;
         @media (forced-colors: active) {
@@ -3276,12 +3280,12 @@
             align-items: center;
             gap: calc(var(--spacing) * 2);
             overflow: hidden;
-            border-radius: var(--radius-md);
+            border-radius: calc(var(--radius) - 2px);
             padding: calc(var(--spacing) * 2);
             text-align: left;
             font-size: var(--text-sm);
             line-height: var(--tw-leading, var(--text-sm--line-height));
-            --tw-ring-color: var(--color-sidebar-ring);
+            --tw-ring-color: var(--sidebar-ring);
             --tw-outline-style: none;
             outline-style: none;
             @media (forced-colors: active) {
@@ -3303,12 +3307,12 @@
             }
             &:hover {
               @media (hover: hover) {
-                background-color: var(--color-sidebar-accent);
+                background-color: var(--sidebar-accent);
               }
             }
             &:hover {
               @media (hover: hover) {
-                color: var(--color-sidebar-accent-foreground);
+                color: var(--sidebar-accent-foreground);
               }
             }
             &:focus-visible {
@@ -3316,10 +3320,10 @@
               box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
             }
             &:active {
-              background-color: var(--color-sidebar-accent);
+              background-color: var(--sidebar-accent);
             }
             &:active {
-              color: var(--color-sidebar-accent-foreground);
+              color: var(--sidebar-accent-foreground);
             }
             &:disabled {
               pointer-events: none;
@@ -3334,26 +3338,26 @@
               opacity: 50%;
             }
             &[data-active="true"] {
-              background-color: var(--color-sidebar-accent);
+              background-color: var(--sidebar-accent);
             }
             &[data-active="true"] {
               --tw-font-weight: var(--font-weight-medium);
               font-weight: var(--font-weight-medium);
             }
             &[data-active="true"] {
-              color: var(--color-sidebar-accent-foreground);
+              color: var(--sidebar-accent-foreground);
             }
             &[data-state="open"] {
               &:hover {
                 @media (hover: hover) {
-                  background-color: var(--color-sidebar-accent);
+                  background-color: var(--sidebar-accent);
                 }
               }
             }
             &[data-state="open"] {
               &:hover {
                 @media (hover: hover) {
-                  color: var(--color-sidebar-accent-foreground);
+                  color: var(--sidebar-accent-foreground);
                 }
               }
             }
@@ -3372,27 +3376,27 @@
             &:not([data-variant]), &[data-variant=default] {
               &:hover {
                 @media (hover: hover) {
-                  background-color: var(--color-sidebar-accent);
+                  background-color: var(--sidebar-accent);
                 }
               }
               &:hover {
                 @media (hover: hover) {
-                  color: var(--color-sidebar-accent-foreground);
+                  color: var(--sidebar-accent-foreground);
                 }
               }
             }
             &[data-variant=outline] {
-              background-color: var(--color-background);
+              background-color: var(--background);
               --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
               box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
               &:hover {
                 @media (hover: hover) {
-                  background-color: var(--color-sidebar-accent);
+                  background-color: var(--sidebar-accent);
                 }
               }
               &:hover {
                 @media (hover: hover) {
-                  color: var(--color-sidebar-accent-foreground);
+                  color: var(--sidebar-accent-foreground);
                 }
               }
               &:hover {
@@ -3435,7 +3439,7 @@
                 display: block;
                 width: calc(var(--spacing) * 3.5);
                 height: calc(var(--spacing) * 3.5);
-                background-color: var(--color-primary);
+                background-color: var(--primary);
                 transition-property: transform, translate, scale, rotate;
                 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                 transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -3464,7 +3468,7 @@
           gap: calc(var(--spacing) * 1);
           border-left-style: var(--tw-border-style);
           border-left-width: 1px;
-          border-color: var(--color-sidebar-border);
+          border-color: var(--sidebar-border);
           padding-inline: calc(var(--spacing) * 2.5);
           padding-block: calc(var(--spacing) * 0.5);
         }
@@ -3484,7 +3488,7 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3492,16 +3496,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -3510,19 +3514,19 @@
     &:disabled {
       opacity: 50%;
     }
-    background-color: var(--color-input);
+    background-color: var(--input);
     &:checked {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 80%, transparent);
+        background-color: color-mix(in oklab, var(--input) 80%, transparent);
       }
     }
     &:is(.dark *) {
       &:checked {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
       }
     }
     &::before {
@@ -3560,12 +3564,12 @@
     }
     &::before {
       content: var(--tw-content);
-      background-color: var(--color-background);
+      background-color: var(--background);
     }
     &:is(.dark *) {
       &::before {
         content: var(--tw-content);
-        background-color: var(--color-foreground);
+        background-color: var(--foreground);
       }
     }
     &:checked {
@@ -3578,7 +3582,7 @@
       &:checked {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-primary-foreground);
+          background-color: var(--primary-foreground);
         }
       }
     }
@@ -3605,9 +3609,9 @@
     tfoot {
       border-top-style: var(--tw-border-style);
       border-top-width: 1px;
-      background-color: var(--color-muted);
+      background-color: var(--muted);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
       }
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
@@ -3626,9 +3630,9 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-muted);
+          background-color: var(--muted);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+            background-color: color-mix(in oklab, var(--muted) 50%, transparent);
           }
         }
       }
@@ -3641,7 +3645,7 @@
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
       white-space: nowrap;
-      color: var(--color-foreground);
+      color: var(--foreground);
       &:has([role=checkbox]) {
         padding-right: calc(var(--spacing) * 0);
       }
@@ -3666,7 +3670,7 @@
       margin-top: calc(var(--spacing) * 4);
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
 }
@@ -3681,10 +3685,10 @@
       width: fit-content;
       align-items: center;
       justify-content: center;
-      border-radius: var(--radius-lg);
-      background-color: var(--color-muted);
+      border-radius: var(--radius);
+      background-color: var(--muted);
       padding: 3px;
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
       [role='tab'] {
         display: inline-flex;
         height: calc(100% - 1px);
@@ -3692,7 +3696,7 @@
         align-items: center;
         justify-content: center;
         gap: calc(var(--spacing) * 1.5);
-        border-radius: var(--radius-md);
+        border-radius: calc(var(--radius) - 2px);
         border-style: var(--tw-border-style);
         border-width: 1px;
         border-color: transparent;
@@ -3703,21 +3707,21 @@
         --tw-font-weight: var(--font-weight-medium);
         font-weight: var(--font-weight-medium);
         white-space: nowrap;
-        color: var(--color-foreground);
+        color: var(--foreground);
         transition-property: color,box-shadow;
         transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
         transition-duration: var(--tw-duration, var(--default-transition-duration));
         &:focus-visible {
-          border-color: var(--color-ring);
+          border-color: var(--ring);
         }
         &:focus-visible {
           --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
           box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         }
         &:focus-visible {
-          --tw-ring-color: var(--color-ring);
+          --tw-ring-color: var(--ring);
           @supports (color: color-mix(in lab, red, red)) {
-            --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+            --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
           }
         }
         &:focus-visible {
@@ -3725,7 +3729,7 @@
           outline-width: 1px;
         }
         &:focus-visible {
-          outline-color: var(--color-ring);
+          outline-color: var(--ring);
         }
         &:disabled {
           pointer-events: none;
@@ -3734,7 +3738,7 @@
           opacity: 50%;
         }
         &:is(.dark *) {
-          color: var(--color-muted-foreground);
+          color: var(--muted-foreground);
         }
         & svg {
           pointer-events: none;
@@ -3747,20 +3751,20 @@
           height: calc(var(--spacing) * 4);
         }
         &[aria-selected='true'] {
-          background-color: var(--color-background);
-          --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+          background-color: var(--background);
+          --tw-shadow: var(--shadow-sm);
           box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
           &:is(.dark *) {
-            border-color: var(--color-input);
+            border-color: var(--input);
           }
           &:is(.dark *) {
-            background-color: var(--color-input);
+            background-color: var(--input);
             @supports (color: color-mix(in lab, red, red)) {
-              background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+              background-color: color-mix(in oklab, var(--input) 30%, transparent);
             }
           }
           &:is(.dark *) {
-            color: var(--color-foreground);
+            color: var(--foreground);
           }
         }
       }
@@ -3778,16 +3782,16 @@
     field-sizing: content;
     min-height: calc(var(--spacing) * 16);
     width: 100%;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
+    border-color: var(--input);
     background-color: transparent;
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3795,19 +3799,19 @@
     --tw-outline-style: none;
     outline-style: none;
     &::placeholder {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -3817,12 +3821,12 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     @media (width >= 48rem) {
@@ -3830,16 +3834,16 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -3885,13 +3889,13 @@
       transition-timing-function: var(--ease-in-out);
       .toast-content {
         overflow: hidden;
-        border-radius: var(--radius-lg);
+        border-radius: var(--radius);
         border-style: var(--tw-border-style);
         border-width: 1px;
-        background-color: var(--color-popover);
+        background-color: var(--popover);
         font-size: 13px;
-        color: var(--color-popover-foreground);
-        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        color: var(--popover-foreground);
+        --tw-shadow: var(--shadow-lg);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
       &[aria-hidden='true'] {
@@ -3933,13 +3937,13 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      border-radius: var(--radius-md);
-      background-color: var(--color-primary);
+      border-radius: calc(var(--radius) - 2px);
+      background-color: var(--primary);
       padding-inline: calc(var(--spacing) * 3);
       padding-block: calc(var(--spacing) * 1.5);
       font-size: var(--text-xs);
       line-height: var(--tw-leading, var(--text-xs--line-height));
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
       opacity: 0%;
       transition-property: all;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4146,7 +4150,7 @@
     code:not(pre > code) {
       position: relative;
       border-radius: 0.25rem;
-      background-color: var(--color-muted);
+      background-color: var(--muted);
       padding-inline: 0.3rem;
       padding-block: 0.2rem;
       font-family: var(--font-mono);
@@ -4156,7 +4160,7 @@
     blockquote {
       border-left-style: var(--tw-border-style);
       border-left-width: 4px;
-      border-color: var(--color-border);
+      border-color: var(--border);
       padding-left: calc(var(--spacing) * 4);
     }
     ol {
@@ -4199,8 +4203,8 @@
     border-radius: calc(infinity * 1px);
     border-style: var(--tw-border-style);
     border-width: 4px;
-    border-color: var(--color-background);
-    background-color: var(--color-muted);
+    border-color: var(--background);
+    background-color: var(--muted);
     text-align: center;
     text-indent: -1px;
     font-family: var(--font-mono);
@@ -4226,6 +4230,98 @@
     content: counter(step);
   }
 }
+:root {
+  --background: oklch(0.98 0.01 95.10);
+  --foreground: oklch(0.34 0.03 95.72);
+  --card: oklch(0.98 0.01 95.10);
+  --card-foreground: oklch(0.19 0.00 106.59);
+  --popover: oklch(1.00 0 0);
+  --popover-foreground: oklch(0.27 0.02 98.94);
+  --primary: oklch(0.62 0.14 39.04);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.92 0.01 92.99);
+  --secondary-foreground: oklch(0.43 0.02 98.60);
+  --muted: oklch(0.93 0.02 90.24);
+  --muted-foreground: oklch(0.61 0.01 97.42);
+  --accent: oklch(0.92 0.01 92.99);
+  --accent-foreground: oklch(0.27 0.02 98.94);
+  --destructive: oklch(0.19 0.00 106.59);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.88 0.01 97.36);
+  --input: oklch(0.76 0.02 98.35);
+  --ring: oklch(0.59 0.17 253.06);
+  --chart-1: oklch(0.56 0.13 43.00);
+  --chart-2: oklch(0.69 0.16 290.41);
+  --chart-3: oklch(0.88 0.03 93.13);
+  --chart-4: oklch(0.88 0.04 298.18);
+  --chart-5: oklch(0.56 0.13 42.06);
+  --sidebar: oklch(0.97 0.01 98.88);
+  --sidebar-foreground: oklch(0.36 0.01 106.65);
+  --sidebar-primary: oklch(0.62 0.14 39.04);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.92 0.01 92.99);
+  --sidebar-accent-foreground: oklch(0.33 0 0);
+  --sidebar-border: oklch(0.94 0 0);
+  --sidebar-ring: oklch(0.77 0 0);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+.dark {
+  --background: oklch(0.27 0.00 106.64);
+  --foreground: oklch(0.81 0.01 93.01);
+  --card: oklch(0.27 0.00 106.64);
+  --card-foreground: oklch(0.98 0.01 95.10);
+  --popover: oklch(0.31 0.00 106.60);
+  --popover-foreground: oklch(0.92 0.00 106.48);
+  --primary: oklch(0.67 0.13 38.76);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.98 0.01 95.10);
+  --secondary-foreground: oklch(0.31 0.00 106.60);
+  --muted: oklch(0.22 0.00 106.71);
+  --muted-foreground: oklch(0.77 0.02 99.07);
+  --accent: oklch(0.21 0.01 95.42);
+  --accent-foreground: oklch(0.97 0.01 98.88);
+  --destructive: oklch(0.64 0.21 25.33);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.36 0.01 106.89);
+  --input: oklch(0.43 0.01 100.22);
+  --ring: oklch(0.59 0.17 253.06);
+  --chart-1: oklch(0.56 0.13 43.00);
+  --chart-2: oklch(0.69 0.16 290.41);
+  --chart-3: oklch(0.21 0.01 95.42);
+  --chart-4: oklch(0.31 0.05 289.32);
+  --chart-5: oklch(0.56 0.13 42.06);
+  --sidebar: oklch(0.24 0.00 67.71);
+  --sidebar-foreground: oklch(0.81 0.01 93.01);
+  --sidebar-primary: oklch(0.33 0 0);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.17 0.00 106.62);
+  --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
+  --sidebar-border: oklch(0.94 0 0);
+  --sidebar-ring: oklch(0.77 0 0);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;