Changes

src/index.css

@@ -12,47 +12,46 @@
 
 @layer base {
   :root {
-    /* Tropical warm palette */
+    /* Paleta: Egyptian Blue, Slate Indigo, Baby Blue Ice, Dark Amethyst, Dusty Grape */
-    --background: 30 30% 97%;
+    --background: 225 30% 96%;
-    --foreground: 280 30% 12%;
+    --foreground: 260 32% 24%;
 
-    --card: 30 25% 95%;
+    --card: 225 25% 94%;
-    --card-foreground: 280 30% 12%;
+    --card-foreground: 260 32% 24%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 280 30% 12%;
+    --popover-foreground: 260 32% 24%;
 
-    /* Primary: vibrant orange */
+    /* Primary: Egyptian Blue */
-    --primary: 24 95% 55%;
+    --primary: 231 66% 37%;
     --primary-foreground: 0 0% 100%;
 
-    /* Secondary: tropical pink */
+    /* Secondary: Slate Indigo */
-    --secondary: 340 82% 60%;
+    --secondary: 225 34% 48%;
     --secondary-foreground: 0 0% 100%;
 
-    /* Accent: rich violet */
+    /* Accent: Baby Blue Ice */
-    --accent: 280 65% 50%;
+    --accent: 220 81% 75%;
-    --accent-foreground: 0 0% 100%;
+    --accent-foreground: 260 32% 24%;
 
-    --muted: 30 20% 92%;
+    --muted: 225 20% 90%;
-    --muted-foreground: 280 15% 40%;
+    --muted-foreground: 227 20% 42%;
 
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
 
-    --border: 30 20% 85%;
+    --border: 225 20% 85%;
-    --input: 30 20% 85%;
+    --input: 225 20% 85%;
-    --ring: 24 95% 55%;
+    --ring: 231 66% 37%;
 
     --radius: 0.75rem;
 
     /* Custom tokens */
-    --gradient-tropical: linear-gradient(135deg, hsl(24 95% 55%), hsl(340 82% 60%), hsl(280 65% 50%));
+    --gradient-tropical: linear-gradient(135deg, hsl(231 66% 37%), hsl(225 34% 48%), hsl(220 81% 75%));
-    --gradient-warm: linear-gradient(180deg, hsl(30 30% 97%), hsl(30 25% 93%));
+    --gradient-warm: linear-gradient(180deg, hsl(225 30% 96%), hsl(225 25% 92%));
-    --shadow-glow: 0 0 40px hsl(24 95% 55% / 0.25);
+    --shadow-glow: 0 0 40px hsl(231 66% 37% / 0.3);
-    --shadow-card: 0 8px 30px hsl(280 30% 12% / 0.08);
+    --shadow-card: 0 8px 30px hsl(260 32% 24% / 0.08);
-    --shadow-elevated: 0 20px 50px hsl(280 30% 12% / 0.12);
+    --shadow-elevated: 0 20px 50px hsl(260 32% 24% / 0.12);
-
     /* Sidebar (unused but required) */
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
@@ -65,25 +64,25 @@
   }
 
   .dark {
-    --background: 280 25% 8%;
+    --background: 260 30% 8%;
-    --foreground: 30 20% 95%;
+    --foreground: 220 81% 90%;
-    --card: 280 20% 12%;
+    --card: 260 28% 12%;
-    --card-foreground: 30 20% 95%;
+    --card-foreground: 220 81% 90%;
-    --popover: 280 20% 12%;
+    --popover: 260 28% 12%;
-    --popover-foreground: 30 20% 95%;
+    --popover-foreground: 220 81% 90%;
-    --primary: 24 95% 55%;
+    --primary: 220 81% 75%;
-    --primary-foreground: 0 0% 100%;
+    --primary-foreground: 260 32% 24%;
-    --secondary: 340 82% 60%;
+    --secondary: 225 34% 48%;
     --secondary-foreground: 0 0% 100%;
-    --accent: 280 65% 55%;
+    --accent: 231 66% 45%;
     --accent-foreground: 0 0% 100%;
-    --muted: 280 15% 18%;
+    --muted: 260 20% 18%;
-    --muted-foreground: 30 15% 65%;
+    --muted-foreground: 225 20% 65%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 100%;
-    --border: 280 15% 20%;
+    --border: 260 15% 20%;
-    --input: 280 15% 20%;
+    --input: 260 15% 20%;
-    --ring: 24 95% 55%;
+    --ring: 220 81% 75%;
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;

tailwind.config.ts

@@ -77,8 +77,8 @@ export default {
           to: { height: "0" },
         },
         "pulse-glow": {
-          "0%, 100%": { boxShadow: "0 0 20px hsl(24 95% 55% / 0.3)" },
+          "0%, 100%": { boxShadow: "0 0 20px hsl(231 66% 37% / 0.3)" },
-          "50%": { boxShadow: "0 0 40px hsl(24 95% 55% / 0.6)" },
+          "50%": { boxShadow: "0 0 40px hsl(231 66% 37% / 0.6)" },
         },
       },
       animation: {