diff --git a/src/styles/globals.css b/src/styles/globals.css
index 9825d97..e44aad4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -59,6 +59,23 @@
   --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
+  --ring: var(--ring);
+  --input: var(--input);
+  --border: var(--border);
+  --accent-foreground: var(--accent-foreground);
+  --accent: var(--accent);
+  --muted-foreground: var(--muted-foreground);
+  --muted: var(--muted);
+  --secondary-foreground: var(--secondary-foreground);
+  --secondary: var(--secondary);
+  --primary-foreground: var(--primary-foreground);
+  --primary: var(--primary);
+  --popover-foreground: var(--popover-foreground);
+  --popover: var(--popover);
+  --card-foreground: var(--card-foreground);
+  --card: var(--card);
+  --foreground: var(--foreground);
+  --background: var(--background);
 
   @keyframes shiny-text {
     0%,
@@ -101,24 +118,24 @@
 /* https://ui.shadcn.com/docs/theming#base-colors */
 :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.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --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);
+  --background: var(--color-surface-1);
+  --foreground: var(--color-surface-12);
+  --card: var(--color-surface-2);
+  --card-foreground: var(--color-surface-12);
+  --popover: var(--color-surface-2);
+  --popover-foreground: var(--color-surface-12);
+  --primary: var(--color-primary-9);
+  --primary-foreground: var(--color-primary-contrast);
+  --secondary: var(--color-secondary-9);
+  --secondary-foreground: var(--color-secondary-contrast);
+  --muted: var(--color-surface-4);
+  --muted-foreground: var(--color-surface-11);
+  --accent: var(--color-surface-4);
+  --accent-foreground: var(--color-surface-11);
   --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.705 0.015 286.067);
+  --border: var(--color-surface-7);
+  --input: var(--color-surface-7);
+  --ring: var(--color-primary-8);
   --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);
@@ -135,24 +152,24 @@
 }
 
 .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.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --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);
+  --background: var(--color-surface-1);
+  --foreground: var(--color-surface-12);
+  --card: var(--color-surface-2);
+  --card-foreground: var(--color-surface-12);
+  --popover: var(--color-surface-2);
+  --popover-foreground: var(--color-surface-12);
+  --primary: var(--color-primary-9);
+  --primary-foreground: var(--color-primary-contrast);
+  --secondary: var(--color-secondary-9);
+  --secondary-foreground: var(--color-secondary-contrast);
+  --muted: var(--color-surface-4);
+  --muted-foreground: var(--color-surface-11);
+  --accent: var(--color-surface-4);
+  --accent-foreground: var(--color-surface-11);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
+  --border: var(--color-surface-7);
+  --input: var(--color-surface-7);
+  --ring: var(--color-primary-8);
   --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);
@@ -168,7 +185,6 @@
   --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
-
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -185,6 +201,86 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentColor);
   }
+  :root {
+    --amber-1: #fefdfb;
+    --amber-2: #fefbe9;
+    --amber-3: #fff7c2;
+    --amber-4: #ffee9c;
+    --amber-5: #fbe577;
+    --amber-6: #f3d673;
+    --amber-7: #e9c162;
+    --amber-8: #e2a336;
+    --amber-9: #ffc53d;
+    --amber-10: #ffba18;
+    --amber-11: #ab6400;
+    --amber-12: #4f3422;
+    --amber-contrast: #21201c;
+    --color-primary-1: var(--amber-1);
+    --color-primary-2: var(--amber-2);
+    --color-primary-3: var(--amber-3);
+    --color-primary-4: var(--amber-4);
+    --color-primary-5: var(--amber-5);
+    --color-primary-6: var(--amber-6);
+    --color-primary-7: var(--amber-7);
+    --color-primary-8: var(--amber-8);
+    --color-primary-9: var(--amber-9);
+    --color-primary-10: var(--amber-10);
+    --color-primary-11: var(--amber-11);
+    --color-primary-12: var(--amber-12);
+    --color-primary-contrast: var(--amber-contrast);
+    --gray-1: #fcfcfc;
+    --gray-2: #f9f9f9;
+    --gray-3: #f0f0f0;
+    --gray-4: #e8e8e8;
+    --gray-5: #e0e0e0;
+    --gray-6: #d9d9d9;
+    --gray-7: #cecece;
+    --gray-8: #bbbbbb;
+    --gray-9: #8d8d8d;
+    --gray-10: #838383;
+    --gray-11: #646464;
+    --gray-12: #202020;
+    --gray-contrast: white;
+    --color-surface-1: var(--gray-1);
+    --color-surface-2: var(--gray-2);
+    --color-surface-3: var(--gray-3);
+    --color-surface-4: var(--gray-4);
+    --color-surface-5: var(--gray-5);
+    --color-surface-6: var(--gray-6);
+    --color-surface-7: var(--gray-7);
+    --color-surface-8: var(--gray-8);
+    --color-surface-9: var(--gray-9);
+    --color-surface-10: var(--gray-10);
+    --color-surface-11: var(--gray-11);
+    --color-surface-12: var(--gray-12);
+    --color-surface-contrast: var(--gray-contrast);
+  }
+  .dark {
+    --amber-1: #16120c;
+    --amber-2: #1d180f;
+    --amber-3: #302008;
+    --amber-4: #3f2700;
+    --amber-5: #4d3000;
+    --amber-6: #5c3d05;
+    --amber-7: #714f19;
+    --amber-8: #8f6424;
+    --amber-9: #ffc53d;
+    --amber-10: #ffd60a;
+    --amber-11: #ffca16;
+    --amber-12: #ffe7b3;
+    --gray-1: #111111;
+    --gray-2: #191919;
+    --gray-3: #222222;
+    --gray-4: #2a2a2a;
+    --gray-5: #313131;
+    --gray-6: #3a3a3a;
+    --gray-7: #484848;
+    --gray-8: #606060;
+    --gray-9: #6e6e6e;
+    --gray-10: #7b7b7b;
+    --gray-11: #b4b4b4;
+    --gray-12: #eeeeee;
+  }
 }
 
 @layer base {
@@ -304,4 +400,4 @@ body {
   [data-slot="toggle-group-item"] {
     @apply !rounded-none !shadow-none;
   }
-}
+}
\ No newline at end of file