diff --git a/src/index.css b/src/index.css
index 85d4d77..5ee1f4b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,112 +3,128 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 240 100.0000% 98.0392%;
-    --foreground: 240 27.5862% 22.7451%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 27.5862% 22.7451%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 27.5862% 22.7451%;
-    --primary: 251.9008 55.7604% 57.4510%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 249.3750 100% 93.7255%;
-    --secondary-foreground: 249.3750 33.3333% 37.6471%;
-    --muted: 240 50.0000% 96.0784%;
-    --muted-foreground: 240 12.1951% 48.2353%;
-    --accent: 218.4615 100.0000% 92.3529%;
-    --accent-foreground: 240 27.5862% 22.7451%;
-    --destructive: 350.1754 100% 66.4706%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 240 34.7826% 90.9804%;
-    --input: 240 34.7826% 90.9804%;
-    --ring: 251.9008 55.7604% 57.4510%;
-    --chart-1: 251.9008 55.7604% 57.4510%;
-    --chart-2: 249.6429 94.9153% 76.8627%;
-    --chart-3: 239.1781 82.0225% 65.0980%;
-    --chart-4: 243.1579 93.0070% 71.9608%;
-    --chart-5: 243.6522 47.3251% 47.6471%;
-    --sidebar: 240 50.0000% 96.0784%;
-    --sidebar-foreground: 240 27.5862% 22.7451%;
-    --sidebar-primary: 251.9008 55.7604% 57.4510%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 218.4615 100.0000% 92.3529%;
-    --sidebar-accent-foreground: 240 27.5862% 22.7451%;
-    --sidebar-border: 240 34.7826% 90.9804%;
-    --sidebar-ring: 251.9008 55.7604% 57.4510%;
-    --font-sans: Inter, sans-serif;
-    --font-serif: Georgia, serif;
-    --font-mono: JetBrains Mono, monospace;
-    --radius: 0.5rem;
-    --shadow-x: 0px;
-    --shadow-y: 4px;
-    --shadow-blur: 10px;
-    --shadow-spread: 0px;
-    --shadow-opacity: 0.12;
-    --shadow-color: hsl(240 30% 25%);
-    --shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
-    --shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
-    --shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
-    --shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
-    --shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
-    --shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
-    --shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
-    --shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
-    --tracking-normal: 0em;
-    --spacing: 0.25rem;
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 0 0% 97.6471%;
+      --foreground: 0 0% 12.5490%;
+      --card: 0 0% 98.8235%;
+      --card-foreground: 0 0% 12.5490%;
+      --popover: 0 0% 98.8235%;
+      --popover-foreground: 0 0% 12.5490%;
+      --primary: 16.6667 21.9512% 32.1569%;
+      --primary-foreground: 0 0% 100%;
+      --secondary: 34.0541 100.0000% 85.4902%;
+      --secondary-foreground: 16.2712 50.4274% 22.9412%;
+      --muted: 0 0% 93.7255%;
+      --muted-foreground: 0 0% 39.2157%;
+      --accent: 0 0% 90.9804%;
+      --accent-foreground: 0 0% 12.5490%;
+      --destructive: 10.1639 77.8723% 53.9216%;
+      --destructive-foreground: 0 0% 100%;
+      --border: 0 0% 84.7059%;
+      --input: 0 0% 84.7059%;
+      --ring: 16.6667 21.9512% 32.1569%;
+      --chart-1: 16.6667 21.9512% 32.1569%;
+      --chart-2: 34.0541 100.0000% 85.4902%;
+      --chart-3: 0 0% 90.9804%;
+      --chart-4: 34.5763 100.0000% 88.4314%;
+      --chart-5: 16.5000 24.3902% 32.1569%;
+      --sidebar: 0 0% 98.4314%;
+      --sidebar-foreground: 0 0% 14.5098%;
+      --sidebar-primary: 0 0% 20.3922%;
+      --sidebar-primary-foreground: 0 0% 98.4314%;
+      --sidebar-accent: 0 0% 96.8627%;
+      --sidebar-accent-foreground: 0 0% 20.3922%;
+      --sidebar-border: 0 0% 92.1569%;
+      --sidebar-ring: 0 0% 70.9804%;
+      --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-x: 0;
+      --shadow-y: 1px;
+      --shadow-blur: 3px;
+      --shadow-spread: 0px;
+      --shadow-opacity: 0.1;
+      --shadow-color: oklch(0 0 0);
+      --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);
+      --tracking-normal: 0em;
+      --spacing: 0.25rem;
+    }
+
+    .dark {
+      --background: 0 0% 6.6667%;
+      --foreground: 0 0% 93.3333%;
+      --card: 0 0% 9.8039%;
+      --card-foreground: 0 0% 93.3333%;
+      --popover: 0 0% 9.8039%;
+      --popover-foreground: 0 0% 93.3333%;
+      --primary: 29.5082 100% 88.0392%;
+      --primary-foreground: 183.1579 54.2857% 6.8627%;
+      --secondary: 28.2353 17.5258% 19.0196%;
+      --secondary-foreground: 29.5082 100% 88.0392%;
+      --muted: 0 0% 13.3333%;
+      --muted-foreground: 0 0% 70.5882%;
+      --accent: 0 0% 16.4706%;
+      --accent-foreground: 0 0% 93.3333%;
+      --destructive: 10.1639 77.8723% 53.9216%;
+      --destructive-foreground: 0 0% 100%;
+      --border: 45 14.2857% 10.9804%;
+      --input: 0 0% 28.2353%;
+      --ring: 29.5082 100% 88.0392%;
+      --chart-1: 29.5082 100% 88.0392%;
+      --chart-2: 28.2353 17.5258% 19.0196%;
+      --chart-3: 0 0% 16.4706%;
+      --chart-4: 30.0000 17.8571% 21.9608%;
+      --chart-5: 30 100% 87.8431%;
+      --sidebar: 240 5.8824% 10%;
+      --sidebar-foreground: 240 4.7619% 95.8824%;
+      --sidebar-primary: 224.2781 76.3265% 48.0392%;
+      --sidebar-primary-foreground: 0 0% 100%;
+      --sidebar-accent: 240 3.7037% 15.8824%;
+      --sidebar-accent-foreground: 240 4.7619% 95.8824%;
+      --sidebar-border: 240 3.7037% 15.8824%;
+      --sidebar-ring: 240 4.8780% 83.9216%;
+      --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-x: 0;
+      --shadow-y: 1px;
+      --shadow-blur: 3px;
+      --shadow-spread: 0px;
+      --shadow-opacity: 0.1;
+      --shadow-color: oklch(0 0 0);
+      --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: 240 26.8293% 8.0392%;
-    --foreground: 240 48.7179% 92.3529%;
-    --card: 240 27.7778% 14.1176%;
-    --card-foreground: 240 48.7179% 92.3529%;
-    --popover: 240 27.7778% 14.1176%;
-    --popover-foreground: 240 48.7179% 92.3529%;
-    --primary: 251.2500 100% 78.0392%;
-    --primary-foreground: 240 26.8293% 8.0392%;
-    --secondary: 242.8571 32.8125% 25.0980%;
-    --secondary-foreground: 241.9672 100% 88.0392%;
-    --muted: 240 33.3333% 20%;
-    --muted-foreground: 240 20.2532% 69.0196%;
-    --accent: 240 33.3333% 28.2353%;
-    --accent-foreground: 240 48.7179% 92.3529%;
-    --destructive: 350.1754 100% 66.4706%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 240 26.1538% 25.4902%;
-    --input: 240 26.1538% 25.4902%;
-    --ring: 251.2500 100% 78.0392%;
-    --chart-1: 251.2500 100% 78.0392%;
-    --chart-2: 230.4878 44.0860% 63.5294%;
-    --chart-3: 206.7123 89.0244% 67.8431%;
-    --chart-4: 174.2857 41.8327% 50.7843%;
-    --chart-5: 325.5224 100.0000% 73.7255%;
-    --sidebar: 240 27.7778% 14.1176%;
-    --sidebar-foreground: 240 48.7179% 92.3529%;
-    --sidebar-primary: 251.2500 100% 78.0392%;
-    --sidebar-primary-foreground: 240 26.8293% 8.0392%;
-    --sidebar-accent: 240 33.3333% 28.2353%;
-    --sidebar-accent-foreground: 240 48.7179% 92.3529%;
-    --sidebar-border: 240 26.1538% 25.4902%;
-    --sidebar-ring: 251.2500 100% 78.0392%;
-    --font-sans: Inter, sans-serif;
-    --font-serif: Georgia, serif;
-    --font-mono: JetBrains Mono, monospace;
-    --radius: 0.5rem;
-    --shadow-x: 0px;
-    --shadow-y: 4px;
-    --shadow-blur: 10px;
-    --shadow-spread: 0px;
-    --shadow-opacity: 0.12;
-    --shadow-color: hsl(240 30% 25%);
-    --shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
-    --shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
-    --shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
-    --shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
-    --shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
-    --shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
-    --shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
-    --shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
+  @layer base {
+    * {
+      @apply border-border;
+    }
+
+    body {
+      @apply bg-background text-foreground;
+    }
   }
 }