@cupcodev/ui 1.0.2 → 1.0.7

package/styles/index.css

@@ -0,0 +1,3 @@
+@import "./tokens.css";
+@import "./global.css";
+@import "./dock.css";

package/styles/tokens.css

@@ -1,305 +1,305 @@
-@layer base {
-  :root {
-    /* Cupcode Core Colors (HSL) */
-    --cc-surface: 0 0% 100%;              /* #ffffff */
-    --cc-ink: 262 95% 11%;                /* #18013a */
-    --cc-pink: 330 87% 52%;               /* #ed1e79 */
-    --cc-purple: 277 77% 48%;             /* #951ddb */
-    
-    /* Legacy color variables (compatibilidade) */
-    --color-one: #ed1e79;
-    --color-two: #951ddb;
-    --color-three: #18013a;
-    --color-four: #ffffff;
-    --cupcode-dark: #18013a;
-    --cupcode-pink: #ed1e79;
-    --cupcode-purple: #951ddb;
-    --cupcode-white: #ffffff;
-    
-    /* Base tokens */
-    --background: 0 0% 100%;
-    --foreground: 262 95% 11%;
-    
-    --card: 0 0% 100%;
-    --card-foreground: 262 95% 11%;
-    
-    --popover: 0 0% 100%;
-    --popover-foreground: 262 95% 11%;
-    
-    --primary: 277 77% 48%;
-    --primary-foreground: 0 0% 100%;
-    
-    --secondary: 330 87% 52%;
-    --secondary-foreground: 0 0% 100%;
-    
-    --muted: 262 20% 96%;
-    --muted-foreground: 262 15% 45%;
-    
-    --accent: 330 87% 52%;
-    --accent-foreground: 0 0% 100%;
-    
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    
-    --success: 142 76% 36%;
-    --success-foreground: 0 0% 100%;
-    
-    --warning: 38 92% 50%;
-    --warning-foreground: 0 0% 100%;
-    
-    --info: 199 89% 48%;
-    --info-foreground: 0 0% 100%;
-    
-    --border: 262 20% 90%;
-    --input: 262 20% 90%;
-    --ring: 277 77% 48%;
-    
-    /* Glass Morphism tokens (Light Mode) */
-    --glass-bg: rgba(255, 255, 255, 0.16);
-    --glass-bg-subtle: rgba(255, 255, 255, 0.08);
-    --glass-bg-strong: rgba(255, 255, 255, 0.24);
-    --glass-border: rgba(255, 255, 255, 0.35);
-    --glass-border-subtle: rgba(255, 255, 255, 0.18);
-    --glass-highlight: rgba(255, 255, 255, 0.55);
-    --glass-ambient: rgba(24, 1, 58, 0.12);
-    
-    /* Blur levels */
-    --glass-blur-xs: 6px;
-    --glass-blur-sm: 10px;
-    --glass-blur-md: 16px;
-    --glass-blur-lg: 24px;
-    --glass-blur-xl: 40px;
-  
-  /* Border radius */
-  --radius-sm: 10px;
-  --radius-md: 14px;
-  --radius: 14px;
-  --radius-lg: 18px;
-  --radius-xl: 24px;
-  --radius-2xl: 32px;
-  --radius-pill: 9999px;
-  
-  /* Typography */
-  --font-display: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-ui: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-sans: "Tomorrow", sans-serif;
-  
-  /* ===== SPACING SCALE (Cupcode) ===== */
-  --space-0: 0;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-7: 28px;
-  --space-8: 32px;
-  --space-9: 36px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-14: 56px;
-  --space-16: 64px;
-  --space-20: 80px;
-  --space-24: 96px;
-  --space-32: 128px;
-  
-  /* ===== FLUID TYPOGRAPHY (Responsive scales) ===== */
-  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
-  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
-  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
-  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
-  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
-  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
-  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
-  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
-  
-  /* ===== MOTION SYSTEM (Cupcode) ===== */
-  /* Velocity tokens */
-  --motion-instant: 0ms;
-  --motion-fast: 120ms;
-  --motion-medium: 220ms;
-  --motion-slow: 360ms;
-  --motion-slower: 500ms;
-  --motion-slowest: 800ms;
-  
-  /* Easing curves Cupcode */
-  --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --ease-jelly: cubic-bezier(0.77, 0, 0.175, 1);
-  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
-  
-  /* Legacy duration support */
-  --dur-fast: var(--motion-fast);
-  --dur-med: var(--motion-medium);
-  --dur-slow: var(--motion-slow);
-  
-  /* ===== STATE OPACITIES ===== */
-  --opacity-hover: 0.85;
-  --opacity-active: 0.7;
-  --opacity-disabled: 0.5;
-  --opacity-focus: 1;
-  --opacity-subtle: 0.6;
-  
-  /* Gradients */
-  --cc-gradient-galaxy: linear-gradient(120deg, 
-    hsl(var(--cc-pink)) 0%, 
-    hsl(var(--cc-purple)) 100%
-  );
-  --cc-gradient-comet: radial-gradient(
-    circle at 50% 0%,
-    rgba(255, 255, 255, 0.4) 0%,
-    rgba(237, 30, 121, 0.15) 30%,
-    rgba(149, 29, 219, 0.1) 60%,
-    transparent 100%
-  );
-  
-  /* Gradientes Animados */
-  --cc-gradient-animated-1: linear-gradient(
-    135deg,
-    hsl(var(--cc-pink)) 0%,
-    hsl(var(--cc-purple)) 50%,
-    hsl(var(--cc-pink)) 100%
-  );
-  --cc-gradient-animated-2: linear-gradient(
-    -45deg,
-    hsl(var(--cc-pink)) 0%,
-    hsl(var(--cc-purple)) 25%,
-    hsl(var(--cc-pink)) 50%,
-    hsl(var(--cc-purple)) 75%,
-    hsl(var(--cc-pink)) 100%
-  );
-  --cc-gradient-shimmer: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.3) 50%,
-    transparent 100%
-  );
-  
-  /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
-  --elevation-0: none;
-  --elevation-1: 
-    0 1px 2px rgba(149, 29, 219, 0.04),
-    0 1px 3px rgba(24, 1, 58, 0.06);
-  --elevation-2: 
-    0 2px 4px rgba(149, 29, 219, 0.06),
-    0 3px 8px rgba(24, 1, 58, 0.08);
-  --elevation-3: 
-    0 4px 8px rgba(149, 29, 219, 0.08),
-    0 6px 16px rgba(24, 1, 58, 0.1);
-  --elevation-4: 
-    0 8px 16px rgba(149, 29, 219, 0.1),
-    0 12px 32px rgba(24, 1, 58, 0.12);
-  --elevation-5: 
-    0 16px 32px rgba(149, 29, 219, 0.12),
-    0 24px 64px rgba(24, 1, 58, 0.15);
-  
-  /* Shadow tokens (named) */
-  --shadow-sm: 0 1px 4px rgba(24, 1, 58, 0.1);
-  --shadow-md: 0 4px 12px rgba(24, 1, 58, 0.15);
-  --shadow-lg: 0 8px 24px rgba(24, 1, 58, 0.2);
-  --shadow-xl: 0 16px 48px rgba(24, 1, 58, 0.25);
-  --shadow-glow-pink: 0 0 24px rgba(237, 30, 121, 0.4);
-  --shadow-glow-purple: 0 0 24px rgba(149, 29, 219, 0.4);
-  --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
-  
-  /* Clay/Neumorphism tokens */
-  --white: #fff;
-  --greyLight-1: #e4ebf5;
-  --greyLight-2: #c8d0e7;
-  --accent-color: #1fa8f5;
-  --accent-color-fg: #fefefe;
-  --backdrop-color: #89d4fe;
-  --app-content-background-color: #c0d8ec;
-  --inset-shadow: rgba(7, 43, 74, 0.3);
-  --outset-shadow: rgba(223, 240, 255, 0.25);
-  --clay-box-shadow: rgba(7, 43, 74, 0.3);
-  --clay-background-color: #c0d8ec;
-  --clay-fg-color: #444;
-  }
-
-  /* ===== DARK MODE ===== */
-  .dark {
-  /* Cupcode Core Colors (mantém as mesmas cores base) */
-  --cc-surface: 0 0% 100%;
-  --cc-ink: 262 95% 11%;
-  --cc-pink: 330 87% 52%;
-  --cc-purple: 277 77% 48%;
-  
-  /* Base tokens - Dark Mode */
-  --background: 262 90% 8%;           /* #0d0021 - Deep purple almost black */
-  --foreground: 0 0% 98%;             /* #fafafa - Soft white */
-  
-  --card: 262 80% 12%;                /* #1a0336 - Darker purple card */
-  --card-foreground: 0 0% 98%;
-  
-  --popover: 262 75% 10%;             /* #150028 - Deep purple popover */
-  --popover-foreground: 0 0% 98%;
-  
-  --primary: 277 77% 58%;             /* Lighter purple for dark mode */
-  --primary-foreground: 0 0% 100%;
-  
-  --secondary: 330 87% 62%;           /* Lighter pink for dark mode */
-  --secondary-foreground: 0 0% 100%;
-  
-  --muted: 262 40% 18%;               /* #1f0a3d - Muted purple */
-  --muted-foreground: 262 20% 75%;    /* Light purple gray text */
-  
-  --accent: 330 87% 62%;              /* Vibrant pink accent */
-  --accent-foreground: 0 0% 100%;
-  
-  --destructive: 0 84% 65%;
-  --destructive-foreground: 0 0% 100%;
-  
-  --success: 142 76% 45%;
-  --success-foreground: 0 0% 100%;
-  
-  --warning: 38 92% 60%;
-  --warning-foreground: 0 0% 100%;
-  
-  --info: 199 89% 58%;
-  --info-foreground: 0 0% 100%;
-  
-  --border: 262 40% 22%;              /* #2b0f52 - Purple border */
-  --input: 262 40% 22%;
-  --ring: 277 77% 58%;
-  
-  /* Glass Morphism tokens (Dark Mode) */
-  --glass-bg: rgba(149, 29, 219, 0.12);           /* Purple tinted glass */
-  --glass-bg-subtle: rgba(149, 29, 219, 0.08);
-  --glass-bg-strong: rgba(149, 29, 219, 0.20);
-  --glass-border: rgba(237, 30, 121, 0.25);       /* Pink border glow */
-  --glass-border-subtle: rgba(149, 29, 219, 0.15);
-  --glass-highlight: rgba(255, 255, 255, 0.1);
-  --glass-ambient: rgba(237, 30, 121, 0.08);      /* Pink ambient glow */
-  
-  /* Shadow tokens (Dark Mode) */
-  --shadow-sm: 0 1px 4px rgba(237, 30, 121, 0.2);
-  --shadow-md: 0 4px 12px rgba(149, 29, 219, 0.3);
-  --shadow-lg: 0 8px 24px rgba(149, 29, 219, 0.4);
-  --shadow-xl: 0 16px 48px rgba(237, 30, 121, 0.5);
-  --shadow-glow-pink: 0 0 32px rgba(237, 30, 121, 0.6);
-  --shadow-glow-purple: 0 0 32px rgba(149, 29, 219, 0.6);
-  --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
-  
-  /* Elevation (Dark Mode) */
-  --elevation-1: 
-    0 1px 2px rgba(237, 30, 121, 0.1),
-    0 1px 3px rgba(149, 29, 219, 0.15);
-  --elevation-2: 
-    0 2px 4px rgba(237, 30, 121, 0.15),
-    0 3px 8px rgba(149, 29, 219, 0.2);
-  --elevation-3: 
-    0 4px 8px rgba(237, 30, 121, 0.2),
-    0 6px 16px rgba(149, 29, 219, 0.25);
-  --elevation-4: 
-    0 8px 16px rgba(237, 30, 121, 0.25),
-    0 12px 32px rgba(149, 29, 219, 0.3);
-  --elevation-5: 
-    0 16px 32px rgba(237, 30, 121, 0.3),
-    0 24px 64px rgba(149, 29, 219, 0.4);
-  }
-
-}
+@layer base {
+  :root {
+    /* Cupcode Core Colors (HSL) */
+    --cc-surface: 0 0% 100%;              /* #ffffff */
+    --cc-ink: 262 95% 11%;                /* #18013a */
+    --cc-pink: 330 87% 52%;               /* #ed1e79 */
+    --cc-purple: 277 77% 48%;             /* #951ddb */
+    
+    /* Legacy color variables (compatibilidade) */
+    --color-one: #ed1e79;
+    --color-two: #951ddb;
+    --color-three: #18013a;
+    --color-four: #ffffff;
+    --cupcode-dark: #18013a;
+    --cupcode-pink: #ed1e79;
+    --cupcode-purple: #951ddb;
+    --cupcode-white: #ffffff;
+    
+    /* Base tokens */
+    --background: 0 0% 100%;
+    --foreground: 262 95% 11%;
+    
+    --card: 0 0% 100%;
+    --card-foreground: 262 95% 11%;
+    
+    --popover: 0 0% 100%;
+    --popover-foreground: 262 95% 11%;
+    
+    --primary: 277 77% 48%;
+    --primary-foreground: 0 0% 100%;
+    
+    --secondary: 330 87% 52%;
+    --secondary-foreground: 0 0% 100%;
+    
+    --muted: 262 20% 96%;
+    --muted-foreground: 262 15% 45%;
+    
+    --accent: 330 87% 52%;
+    --accent-foreground: 0 0% 100%;
+    
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    
+    --success: 142 76% 36%;
+    --success-foreground: 0 0% 100%;
+    
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    
+    --info: 199 89% 48%;
+    --info-foreground: 0 0% 100%;
+    
+    --border: 262 20% 90%;
+    --input: 262 20% 90%;
+    --ring: 277 77% 48%;
+    
+    /* Glass Morphism tokens (Light Mode) */
+    --glass-bg: rgba(255, 255, 255, 0.16);
+    --glass-bg-subtle: rgba(255, 255, 255, 0.08);
+    --glass-bg-strong: rgba(255, 255, 255, 0.24);
+    --glass-border: rgba(255, 255, 255, 0.35);
+    --glass-border-subtle: rgba(255, 255, 255, 0.18);
+    --glass-highlight: rgba(255, 255, 255, 0.55);
+    --glass-ambient: rgba(24, 1, 58, 0.12);
+    
+    /* Blur levels */
+    --glass-blur-xs: 6px;
+    --glass-blur-sm: 10px;
+    --glass-blur-md: 16px;
+    --glass-blur-lg: 24px;
+    --glass-blur-xl: 40px;
+  
+  /* Border radius */
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-pill: 9999px;
+  
+  /* Typography */
+  --font-display: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-ui: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-sans: "Tomorrow", sans-serif;
+  
+  /* ===== SPACING SCALE (Cupcode) ===== */
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+  
+  /* ===== FLUID TYPOGRAPHY (Responsive scales) ===== */
+  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
+  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
+  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
+  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
+  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
+  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
+  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
+  
+  /* ===== MOTION SYSTEM (Cupcode) ===== */
+  /* Velocity tokens */
+  --motion-instant: 0ms;
+  --motion-fast: 120ms;
+  --motion-medium: 220ms;
+  --motion-slow: 360ms;
+  --motion-slower: 500ms;
+  --motion-slowest: 800ms;
+  
+  /* Easing curves Cupcode */
+  --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-jelly: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
+  
+  /* Legacy duration support */
+  --dur-fast: var(--motion-fast);
+  --dur-med: var(--motion-medium);
+  --dur-slow: var(--motion-slow);
+  
+  /* ===== STATE OPACITIES ===== */
+  --opacity-hover: 0.85;
+  --opacity-active: 0.7;
+  --opacity-disabled: 0.5;
+  --opacity-focus: 1;
+  --opacity-subtle: 0.6;
+  
+  /* Gradients */
+  --cc-gradient-galaxy: linear-gradient(120deg, 
+    hsl(var(--cc-pink)) 0%, 
+    hsl(var(--cc-purple)) 100%
+  );
+  --cc-gradient-comet: radial-gradient(
+    circle at 50% 0%,
+    rgba(255, 255, 255, 0.4) 0%,
+    rgba(237, 30, 121, 0.15) 30%,
+    rgba(149, 29, 219, 0.1) 60%,
+    transparent 100%
+  );
+  
+  /* Gradientes Animados */
+  --cc-gradient-animated-1: linear-gradient(
+    135deg,
+    hsl(var(--cc-pink)) 0%,
+    hsl(var(--cc-purple)) 50%,
+    hsl(var(--cc-pink)) 100%
+  );
+  --cc-gradient-animated-2: linear-gradient(
+    -45deg,
+    hsl(var(--cc-pink)) 0%,
+    hsl(var(--cc-purple)) 25%,
+    hsl(var(--cc-pink)) 50%,
+    hsl(var(--cc-purple)) 75%,
+    hsl(var(--cc-pink)) 100%
+  );
+  --cc-gradient-shimmer: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    transparent 100%
+  );
+  
+  /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
+  --elevation-0: none;
+  --elevation-1: 
+    0 1px 2px rgba(149, 29, 219, 0.04),
+    0 1px 3px rgba(24, 1, 58, 0.06);
+  --elevation-2: 
+    0 2px 4px rgba(149, 29, 219, 0.06),
+    0 3px 8px rgba(24, 1, 58, 0.08);
+  --elevation-3: 
+    0 4px 8px rgba(149, 29, 219, 0.08),
+    0 6px 16px rgba(24, 1, 58, 0.1);
+  --elevation-4: 
+    0 8px 16px rgba(149, 29, 219, 0.1),
+    0 12px 32px rgba(24, 1, 58, 0.12);
+  --elevation-5: 
+    0 16px 32px rgba(149, 29, 219, 0.12),
+    0 24px 64px rgba(24, 1, 58, 0.15);
+  
+  /* Shadow tokens (named) */
+  --shadow-sm: 0 1px 4px rgba(24, 1, 58, 0.1);
+  --shadow-md: 0 4px 12px rgba(24, 1, 58, 0.15);
+  --shadow-lg: 0 8px 24px rgba(24, 1, 58, 0.2);
+  --shadow-xl: 0 16px 48px rgba(24, 1, 58, 0.25);
+  --shadow-glow-pink: 0 0 24px rgba(237, 30, 121, 0.4);
+  --shadow-glow-purple: 0 0 24px rgba(149, 29, 219, 0.4);
+  --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
+  
+  /* Clay/Neumorphism tokens */
+  --white: #fff;
+  --greyLight-1: #e4ebf5;
+  --greyLight-2: #c8d0e7;
+  --accent-color: #1fa8f5;
+  --accent-color-fg: #fefefe;
+  --backdrop-color: #89d4fe;
+  --app-content-background-color: #c0d8ec;
+  --inset-shadow: rgba(7, 43, 74, 0.3);
+  --outset-shadow: rgba(223, 240, 255, 0.25);
+  --clay-box-shadow: rgba(7, 43, 74, 0.3);
+  --clay-background-color: #c0d8ec;
+  --clay-fg-color: #444;
+  }
+
+  /* ===== DARK MODE ===== */
+  .dark {
+  /* Cupcode Core Colors (mantém as mesmas cores base) */
+  --cc-surface: 0 0% 100%;
+  --cc-ink: 262 95% 11%;
+  --cc-pink: 330 87% 52%;
+  --cc-purple: 277 77% 48%;
+  
+  /* Base tokens - Dark Mode */
+  --background: 262 90% 8%;           /* #0d0021 - Deep purple almost black */
+  --foreground: 0 0% 98%;             /* #fafafa - Soft white */
+  
+  --card: 262 80% 12%;                /* #1a0336 - Darker purple card */
+  --card-foreground: 0 0% 98%;
+  
+  --popover: 262 75% 10%;             /* #150028 - Deep purple popover */
+  --popover-foreground: 0 0% 98%;
+  
+  --primary: 277 77% 58%;             /* Lighter purple for dark mode */
+  --primary-foreground: 0 0% 100%;
+  
+  --secondary: 330 87% 62%;           /* Lighter pink for dark mode */
+  --secondary-foreground: 0 0% 100%;
+  
+  --muted: 262 40% 18%;               /* #1f0a3d - Muted purple */
+  --muted-foreground: 262 20% 75%;    /* Light purple gray text */
+  
+  --accent: 330 87% 62%;              /* Vibrant pink accent */
+  --accent-foreground: 0 0% 100%;
+  
+  --destructive: 0 84% 65%;
+  --destructive-foreground: 0 0% 100%;
+  
+  --success: 142 76% 45%;
+  --success-foreground: 0 0% 100%;
+  
+  --warning: 38 92% 60%;
+  --warning-foreground: 0 0% 100%;
+  
+  --info: 199 89% 58%;
+  --info-foreground: 0 0% 100%;
+  
+  --border: 262 40% 22%;              /* #2b0f52 - Purple border */
+  --input: 262 40% 22%;
+  --ring: 277 77% 58%;
+  
+  /* Glass Morphism tokens (Dark Mode) */
+  --glass-bg: rgba(149, 29, 219, 0.12);           /* Purple tinted glass */
+  --glass-bg-subtle: rgba(149, 29, 219, 0.08);
+  --glass-bg-strong: rgba(149, 29, 219, 0.20);
+  --glass-border: rgba(237, 30, 121, 0.25);       /* Pink border glow */
+  --glass-border-subtle: rgba(149, 29, 219, 0.15);
+  --glass-highlight: rgba(255, 255, 255, 0.1);
+  --glass-ambient: rgba(237, 30, 121, 0.08);      /* Pink ambient glow */
+  
+  /* Shadow tokens (Dark Mode) */
+  --shadow-sm: 0 1px 4px rgba(237, 30, 121, 0.2);
+  --shadow-md: 0 4px 12px rgba(149, 29, 219, 0.3);
+  --shadow-lg: 0 8px 24px rgba(149, 29, 219, 0.4);
+  --shadow-xl: 0 16px 48px rgba(237, 30, 121, 0.5);
+  --shadow-glow-pink: 0 0 32px rgba(237, 30, 121, 0.6);
+  --shadow-glow-purple: 0 0 32px rgba(149, 29, 219, 0.6);
+  --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
+  
+  /* Elevation (Dark Mode) */
+  --elevation-1: 
+    0 1px 2px rgba(237, 30, 121, 0.1),
+    0 1px 3px rgba(149, 29, 219, 0.15);
+  --elevation-2: 
+    0 2px 4px rgba(237, 30, 121, 0.15),
+    0 3px 8px rgba(149, 29, 219, 0.2);
+  --elevation-3: 
+    0 4px 8px rgba(237, 30, 121, 0.2),
+    0 6px 16px rgba(149, 29, 219, 0.25);
+  --elevation-4: 
+    0 8px 16px rgba(237, 30, 121, 0.25),
+    0 12px 32px rgba(149, 29, 219, 0.3);
+  --elevation-5: 
+    0 16px 32px rgba(237, 30, 121, 0.3),
+    0 24px 64px rgba(149, 29, 219, 0.4);
+  }
+
+}