.

src/app/globals.css

@@ -1,32 +1,338 @@
 @import "tailwindcss";
 
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
+
 :root {
-  --background: #f9fafb;
-  --foreground: #111827;
-}
+  /* Claymorphism Color System - Light Mode */
+  --color-primary: #4F46E5;
+  --color-on-primary: #FFFFFF;
+  --color-secondary: #818CF8;
+  --color-accent: #EA580C;
+  --color-background: #EEF2FF;
+  --color-foreground: #1E1B4B;
+  --color-muted: #EBEEF8;
+  --color-border: #C7D2FE;
+  --color-destructive: #DC2626;
+  --color-ring: #4F46E5;
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  /* Semantic colors */
+  --color-success: #16A34A;
+  --color-warning: #F59E0B;
+  --color-info: #3B82F6;
+
+  /* Claymorphism shadows */
+  --shadow-clay-sm: 2px 2px 4px #C7D2FE, -2px -2px 4px #FFFFFF;
+  --shadow-clay-md: 4px 4px 8px #C7D2FE, -4px -4px 8px #FFFFFF;
+  --shadow-clay-lg: 8px 8px 16px #C7D2FE, -8px -8px 16px #FFFFFF;
+  --shadow-clay-inset: inset 2px 2px 4px #C7D2FE, inset -2px -2px 4px #FFFFFF;
+  --shadow-clay-press: inset 4px 4px 8px #C7D2FE, inset -4px -4px 8px #FFFFFF;
+
+  /* Dark mode Claymorphism shadows */
+  --shadow-clay-dark-sm: 2px 2px 4px #1E1B4B, -2px -2px 4px #3730A3;
+  --shadow-clay-dark-md: 4px 4px 8px #1E1B4B, -4px -4px 8px #3730A3;
+  --shadow-clay-dark-lg: 8px 8px 16px #1E1B4B, -8px -8px 16px #3730A3;
+  --shadow-clay-dark-inset: inset 2px 2px 4px #1E1B4B, inset -2px -2px 4px #3730A3;
+  --shadow-clay-dark-press: inset 4px 4px 8px #1E1B4B, inset -4px -4px 8px #3730A3;
+
+  /* Typography */
+  --font-sans: 'Fira Sans', system-ui, sans-serif;
+  --font-mono: 'Fira Code', monospace;
+  --font-base: 1rem;
+  --leading-normal: 1.5;
+
+  /* Spacing scale */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #111827;
-    --foreground: #f9fafb;
+    /* Claymorphism Color System - Dark Mode */
+    --color-primary: #818CF8;
+    --color-on-primary: #1E1B4B;
+    --color-secondary: #A5B4FC;
+    --color-accent: #FB923C;
+    --color-background: #1E1B4B;
+    --color-foreground: #EEF2FF;
+    --color-muted: #312E81;
+    --color-border: #3730A3;
+    --color-destructive: #EF4444;
+    --color-ring: #818CF8;
+
+    --color-success: #22C55E;
+    --color-warning: #FBBF24;
+    --color-info: #60A5FA;
   }
 }
 
+@theme inline {
+  --color-background: var(--color-background);
+  --color-foreground: var(--color-foreground);
+  --color-primary: var(--color-primary);
+  --color-on-primary: var(--color-on-primary);
+  --color-secondary: var(--color-secondary);
+  --color-accent: var(--color-accent);
+  --color-muted: var(--color-muted);
+  --color-border: var(--color-border);
+  --color-destructive: var(--color-destructive);
+  --color-ring: var(--color-ring);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
 * {
   box-sizing: border-box;
 }
 
+html {
+  font-family: var(--font-sans);
+  font-size: var(--font-base);
+  line-height: var(--leading-normal);
+}
+
 body {
-  background: var(--background);
-  color: var(--foreground);
+  background: var(--color-background);
+  color: var(--color-foreground);
   font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Claymorphism utility classes */
+.clay-card {
+  background: var(--color-background);
+  border: 2px solid var(--color-border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-clay-md);
+  transition: box-shadow 200ms ease-out, transform 150ms ease-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-card {
+    box-shadow: var(--shadow-clay-dark-md);
+  }
+}
+
+.clay-card:hover {
+  box-shadow: var(--shadow-clay-lg);
+  transform: translateY(-2px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-card:hover {
+    box-shadow: var(--shadow-clay-dark-lg);
+  }
+}
+
+.clay-card:active {
+  box-shadow: var(--shadow-clay-press);
+  transform: translateY(0);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-card:active {
+    box-shadow: var(--shadow-clay-dark-press);
+  }
+}
+
+.clay-button {
+  background: var(--color-background);
+  border: 2px solid var(--color-border);
+  border-radius: 12px;
+  box-shadow: var(--shadow-clay-sm);
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  transition: all 150ms ease-out;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button {
+    box-shadow: var(--shadow-clay-dark-sm);
+  }
+}
+
+.clay-button:hover {
+  box-shadow: var(--shadow-clay-md);
+  transform: translateY(-1px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button:hover {
+    box-shadow: var(--shadow-clay-dark-md);
+  }
+}
+
+.clay-button:active {
+  box-shadow: var(--shadow-clay-press);
+  transform: translateY(0);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button:active {
+    box-shadow: var(--shadow-clay-dark-press);
+  }
+}
+
+.clay-button-primary {
+  background: var(--color-primary);
+  border: 2px solid var(--color-primary);
+  color: var(--color-on-primary);
+  box-shadow: var(--shadow-clay-sm);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button-primary {
+    box-shadow: var(--shadow-clay-dark-sm);
+  }
+}
+
+.clay-button-primary:hover {
+  box-shadow: var(--shadow-clay-md);
+  filter: brightness(1.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button-primary:hover {
+    box-shadow: var(--shadow-clay-dark-md);
+  }
+}
+
+.clay-button-primary:active {
+  box-shadow: var(--shadow-clay-press);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button-primary:active {
+    box-shadow: var(--shadow-clay-dark-press);
+  }
+}
+
+.clay-button-accent {
+  background: var(--color-accent);
+  border: 2px solid var(--color-accent);
+  color: #FFFFFF;
+  box-shadow: var(--shadow-clay-sm);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button-accent {
+    box-shadow: var(--shadow-clay-dark-sm);
+  }
+}
+
+.clay-button-accent:hover {
+  box-shadow: var(--shadow-clay-md);
+  filter: brightness(1.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button-accent:hover {
+    box-shadow: var(--shadow-clay-dark-md);
+  }
+}
+
+.clay-button-accent:active {
+  box-shadow: var(--shadow-clay-press);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-button-accent:active {
+    box-shadow: var(--shadow-clay-dark-press);
+  }
+}
+
+.clay-input {
+  background: var(--color-muted);
+  border: 2px solid var(--color-border);
+  border-radius: 10px;
+  color: var(--color-foreground);
+  font-family: var(--font-mono);
+  padding: 0.5rem 0.75rem;
+  box-shadow: var(--shadow-clay-inset);
+  transition: all 150ms ease-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-input {
+    box-shadow: var(--shadow-clay-dark-inset);
+  }
+}
+
+.clay-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-clay-inset), 0 0 0 3px var(--color-ring);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-input:focus {
+    box-shadow: var(--shadow-clay-dark-inset), 0 0 0 3px var(--color-ring);
+  }
+}
+
+.clay-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--color-muted);
+  border-radius: 9999px;
+  height: 8px;
+  outline: none;
+}
+
+.clay-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+  border: 3px solid var(--color-background);
+  box-shadow: var(--shadow-clay-sm);
+  transition: all 150ms ease-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-slider::-webkit-slider-thumb {
+    box-shadow: var(--shadow-clay-dark-sm);
+  }
+}
+
+.clay-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: var(--shadow-clay-md);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-slider::-webkit-slider-thumb:hover {
+    box-shadow: var(--shadow-clay-dark-md);
+  }
+}
+
+.clay-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+  border: 3px solid var(--color-background);
+  box-shadow: var(--shadow-clay-sm);
+}
+
+@media (prefers-color-scheme: dark) {
+  .clay-slider::-moz-range-thumb {
+    box-shadow: var(--shadow-clay-dark-sm);
+  }
 }
 
 /* Custom scrollbar */
@@ -40,17 +346,24 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #9ca3af;
+  background: var(--color-border);
   border-radius: 4px;
+  border: 2px solid var(--color-background);
+}
+
+@media (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb {
+    border: 2px solid var(--color-background);
+  }
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
+  background: var(--color-primary);
 }
 
 /* Focus visible styles */
 :focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid var(--color-ring);
   outline-offset: 2px;
 }
 
@@ -66,10 +379,37 @@ body {
   }
 }
 
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes pulse-soft {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
 .animate-slide-in {
   animation: slide-in 0.3s ease-out;
 }
 
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.animate-scale-in {
+  animation: scale-in 0.2s ease-out;
+}
+
+.animate-pulse-soft {
+  animation: pulse-soft 2s ease-in-out infinite;
+}
+
 /* Canvas styles */
 canvas {
   display: block;
@@ -77,39 +417,171 @@ canvas {
 
 /* Selection styles */
 ::selection {
-  background: #3b82f6;
-  color: white;
+  background: var(--color-primary);
+  color: var(--color-on-primary);
 }
 
-/* Input range styles */
-input[type="range"] {
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Claymorphism number input */
+input[type="number"].clay-number {
   -webkit-appearance: none;
   appearance: none;
 }
 
-input[type="range"]::-webkit-slider-thumb {
+input[type="number"].clay-number::-webkit-inner-spin-button,
+input[type="number"].clay-number::-webkit-outer-spin-button {
   -webkit-appearance: none;
   appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #3b82f6;
-  cursor: pointer;
-  border: 2px solid white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  background: var(--color-muted);
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  color: var(--color-primary);
+  font-family: var(--font-mono);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-input[type="range"]::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #3b82f6;
-  cursor: pointer;
-  border: 2px solid white;
+@media (prefers-color-scheme: dark) {
+  input[type="number"].clay-number::-webkit-inner-spin-button,
+  input[type="number"].clay-number::-webkit-outer-spin-button {
+    background: var(--color-muted);
+    border-color: var(--color-border);
+  }
+}
+
+/* Tooltip styles */
+.tooltip {
+  position: relative;
+}
+
+.tooltip::before {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.5rem 0.75rem;
+  background: var(--color-foreground);
+  color: var(--color-background);
+  font-size: 0.75rem;
+  font-family: var(--font-sans);
+  border-radius: 8px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 200ms ease-out;
+  pointer-events: none;
+  z-index: 50;
+  margin-bottom: 0.5rem;
+  box-shadow: var(--shadow-clay-lg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .tooltip::before {
+    box-shadow: var(--shadow-clay-dark-lg);
+  }
 }
 
-/* Number input arrows */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+.tooltip:hover::before,
+.tooltip:focus-within::before {
   opacity: 1;
+  visibility: visible;
+}
+
+/* Badge styles */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  font-family: var(--font-sans);
+}
+
+.badge-primary {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+}
+
+.badge-secondary {
+  background: var(--color-secondary);
+  color: var(--color-on-primary);
+}
+
+.badge-accent {
+  background: var(--color-accent);
+  color: white;
+}
+
+.badge-muted {
+  background: var(--color-muted);
+  color: var(--color-foreground);
+  border: 1px solid var(--color-border);
+}
+
+.badge-outline {
+  background: transparent;
+  color: var(--color-foreground);
+  border: 1px solid var(--color-border);
+}
+
+/* Card header */
+.card-header {
+  padding: var(--space-4) var(--space-4) var(--space-2);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Divider */
+.divider {
+  height: 1px;
+  background: var(--color-border);
+  border: none;
+}
+
+/* Code block */
+.code-block {
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: var(--space-4);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  overflow-x: auto;
+  box-shadow: var(--shadow-clay-inset);
+}
+
+@media (prefers-color-scheme: dark) {
+  .code-block {
+    box-shadow: var(--shadow-clay-dark-inset);
+  }
+}
+
+/* Loading spinner */
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }

src/components/ui/Badge.tsx

@@ -4,25 +4,26 @@ import { forwardRef, HTMLAttributes } from 'react'
 import { cn } from '@/utils/helpers'
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline'
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'muted'
 }
 
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, variant = 'default', children, ...props }, ref) => {
+  ({ className, variant = 'primary', children, ...props }, ref) => {
     const variants = {
-      default: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
-      secondary: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+      primary: 'badge-primary',
+      secondary: 'badge-secondary',
       success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
       warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
       danger: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
-      outline: 'border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300',
+      outline: 'badge-outline',
+      muted: 'badge-muted',
     }
 
     return (
       <span
         ref={ref}
         className={cn(
-          'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+          'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium badge',
           variants[variant],
           className
         )}

src/components/ui/Button.tsx

@@ -4,7 +4,7 @@ import { forwardRef, ButtonHTMLAttributes } from 'react'
 import { cn } from '@/utils/helpers'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'accent' | 'danger'
   size?: 'sm' | 'md' | 'lg' | 'icon'
   loading?: boolean
 }
@@ -12,21 +12,22 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
     const baseStyles =
-      'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
+      'inline-flex items-center justify-center font-medium transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
 
     const variants = {
-      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500',
-      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700',
-      outline: 'border border-gray-300 bg-transparent hover:bg-gray-100 focus-visible:ring-gray-500 dark:border-gray-600 dark:hover:bg-gray-800',
-      ghost: 'bg-transparent hover:bg-gray-100 focus-visible:ring-gray-500 dark:hover:bg-gray-800',
-      danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500',
+      primary: 'clay-button-primary',
+      secondary: 'clay-button',
+      outline: 'clay-button border-2',
+      ghost: 'bg-transparent hover:clay-card text-inherit p-0',
+      accent: 'clay-button-accent',
+      danger: 'clay-button clay-button-accent bg-red-500 border-red-500 text-white',
     }
 
     const sizes = {
-      sm: 'h-8 px-3 text-sm gap-1.5',
-      md: 'h-10 px-4 text-sm gap-2',
-      lg: 'h-12 px-6 text-base gap-2',
-      icon: 'h-10 w-10',
+      sm: 'h-8 px-3 text-sm gap-1.5 rounded-lg',
+      md: 'h-10 px-4 text-sm gap-2 rounded-xl',
+      lg: 'h-12 px-6 text-base gap-2 rounded-xl',
+      icon: 'h-10 w-10 rounded-xl',
     }
 
     return (

src/components/ui/Card.tsx

@@ -10,15 +10,15 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 export const Card = forwardRef<HTMLDivElement, CardProps>(
   ({ className, variant = 'default', children, ...props }, ref) => {
     const variants = {
-      default: 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
-      outlined: 'bg-transparent border-2 border-gray-300 dark:border-gray-600',
-      elevated: 'bg-white dark:bg-gray-800 shadow-lg border-none',
+      default: 'clay-card',
+      outlined: 'clay-card border-2',
+      elevated: 'clay-card shadow-lg',
     }
 
     return (
       <div
         ref={ref}
-        className={cn('rounded-lg', variants[variant], className)}
+        className={cn('rounded-2xl', variants[variant], className)}
         {...props}
       >
         {children}
@@ -31,7 +31,7 @@ Card.displayName = 'Card'
 
 export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => (
-    <div ref={ref} className={cn('px-6 py-4 border-b border-gray-200 dark:border-gray-700', className)} {...props}>
+    <div ref={ref} className={cn('px-6 py-4 border-b border-current/20', className)} {...props}>
       {children}
     </div>
   )
@@ -41,7 +41,7 @@ CardHeader.displayName = 'CardHeader'
 
 export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
   ({ className, children, ...props }, ref) => (
-    <h3 ref={ref} className={cn('text-lg font-semibold text-gray-900 dark:text-gray-100', className)} {...props}>
+    <h3 ref={ref} className={cn('text-lg font-semibold text-current', className)} {...props}>
       {children}
     </h3>
   )
@@ -51,7 +51,7 @@ CardTitle.displayName = 'CardTitle'
 
 export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
   ({ className, children, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm text-gray-500 dark:text-gray-400 mt-1', className)} {...props}>
+    <p ref={ref} className={cn('text-sm text-current/70 mt-1', className)} {...props}>
       {children}
     </p>
   )
@@ -71,7 +71,7 @@ CardContent.displayName = 'CardContent'
 
 export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => (
-    <div ref={ref} className={cn('px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-2', className)} {...props}>
+    <div ref={ref} className={cn('px-6 py-4 border-t border-current/20 flex items-center gap-2', className)} {...props}>
       {children}
     </div>
   )

src/components/ui/Input.tsx

@@ -18,7 +18,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         {label && (
           <label
             htmlFor={inputId}
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            className="block text-sm font-medium text-current mb-1"
           >
             {label}
           </label>
@@ -27,11 +27,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           id={inputId}
           className={cn(
-            'flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm',
-            'placeholder:text-gray-400',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-            'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-100',
-            'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500',
+            'clay-input clay-number',
             error && 'border-red-500 focus:ring-red-500',
             className
           )}
@@ -45,7 +41,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           </p>
         )}
         {helperText && !error && (
-          <p id={`${inputId}-helper`} className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          <p id={`${inputId}-helper`} className="mt-1 text-sm text-current/70">
             {helperText}
           </p>
         )}
@@ -54,6 +50,4 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   }
 )
 
-Input.displayName = 'Input'
-
-// Removed empty LabelProps interface - using LabelHTMLAttributes directly
+Input.displayName = 'Input'

src/components/ui/Select.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { forwardRef, SelectHTMLAttributes, OptionHTMLAttributes } from 'react'
+import React, { forwardRef, SelectHTMLAttributes, OptionHTMLAttributes } from 'react'
 import { cn } from '@/utils/helpers'
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
@@ -19,7 +19,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         {label && (
           <label
             htmlFor={selectId}
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            className="block text-sm font-medium text-current mb-1"
           >
             {label}
           </label>
@@ -28,10 +28,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           ref={ref}
           id={selectId}
           className={cn(
-            'flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-            'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-100',
-            'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100',
+            'clay-input',
             error && 'border-red-500 focus:ring-red-500',
             className
           )}

src/components/ui/Slider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { forwardRef, InputHTMLAttributes } from 'react'
+import React, { forwardRef, InputHTMLAttributes } from 'react'
 import { cn } from '@/utils/helpers'
 
 export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
@@ -22,11 +22,11 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
       <div className={cn('w-full', className)}>
         {label && (
           <div className="flex items-center justify-between mb-1">
-            <label htmlFor={sliderId} className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label htmlFor={sliderId} className="text-sm font-medium text-current">
               {label}
             </label>
             {showValue && (
-              <span className="text-sm text-gray-500 dark:text-gray-400 font-mono">
+              <span className="text-sm text-current/70 font-mono">
                 {valueFormat ? valueFormat(value) : value}
               </span>
             )}
@@ -41,17 +41,12 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
           step={step}
           value={value}
           onChange={(e) => onValueChange(Number(e.target.value))}
-          className={cn(
-            'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer',
-            'accent-blue-600 dark:bg-gray-700',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-50'
-          )}
+          className={cn('clay-slider', className)}
           {...props}
         />
       </div>
     )
-  }
+  )
 )
 
-Slider.displayName = 'Slider'
+Slider.displayName = 'Slider'

src/components/ui/Slider.tsx.bak

@@ -0,0 +1,52 @@
+'use client'
+
+import React, { forwardRef, InputHTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string
+  min: number
+  max: number
+  step?: number
+  value: number
+  onValueChange: (value: number) => void
+  showValue?: boolean
+  valueFormat?: (value: number) => string
+}
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, label, min, max, step = 1, value, onValueChange, showValue = false, valueFormat, ...props }, ref) => {
+    const sliderId = label?.toLowerCase().replace(/\s+/g, '-')
+
+    return (
+      <div className={cn('w-full', className)}>
+        {label && (
+          <div className="flex items-center justify-between mb-1">
+            <label htmlFor={sliderId} className="text-sm font-medium text-current">
+              {label}
+            </label>
+            {showValue && (
+              <span className="text-sm text-current/70 font-mono">
+                {valueFormat ? valueFormat(value) : value}
+              </span>
+            )}
+          </div>
+        )}
+        <input
+          ref={ref}
+          id={sliderId}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onValueChange(Number(e.target.value))}
+          className={cn('clay-slider', className)}
+          {...props}
+        />
+      </div>
+    )
+  )
+)
+
+Slider.displayName = 'Slider'

src/components/ui/TestSlider.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React, { forwardRef, InputHTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface TestSliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string
+  min: number
+  max: number
+  step?: number
+  value: number
+  onValueChange: (value: number) => void
+  showValue?: boolean
+  valueFormat?: (value: number) => string
+}
+
+export const TestSlider = forwardRef<HTMLInputElement, TestSliderProps>(
+  ({ className, label, min, max, step = 1, value, onValueChange, showValue = false, valueFormat, ...props }, ref) => {
+    const sliderId = label?.toLowerCase().replace(/\s+/g, '-')
+
+    return (
+      <div className={cn('w-full', className)}>
+        {label && (
+          <div className="flex items-center justify-between mb-1">
+            <label htmlFor={sliderId} className="text-sm font-medium text-current">
+              {label}
+            </label>
+            {showValue && (
+              <span className="text-sm text-current/70 font-mono">
+                {valueFormat ? valueFormat(value) : value}
+              </span>
+            )}
+          </div>
+        )}
+        <input
+          ref={ref}
+          id={sliderId}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onValueChange(Number(e.target.value))}
+          className={cn('clay-slider', className)}
+          {...props}
+        />
+      </div>
+    )
+  )
+)
+
+TestSlider.displayName = 'TestSlider'

src/components/ui/Tooltip.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import { cn } from '@/utils/helpers'
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
@@ -23,12 +23,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     }
 
     return (
-      <div ref={ref} className={cn('relative inline-block', className)} {...props}>
+      <div ref={ref} className={cn('relative inline-block group', className)} {...props}>
         {children}
         <div
           className={cn(
-            'absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg',
-            'opacity-0 invisible transition-all duration-200',
+            'absolute z-50 px-3 py-1.5 text-xs font-medium text-on-primary bg-primary rounded-lg',
+            'opacity-0 invisible transition-all duration-200 ease-out',
             'group-hover:opacity-100 group-hover:visible',
             'whitespace-nowrap',
             positions[position]
@@ -39,10 +39,10 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           <div
             className={cn(
               'absolute w-0 h-0 border-4 border-transparent',
-              position === 'top' && 'bottom-[-8px] left-1/2 -translate-x-1/2 border-t-gray-900',
-              position === 'bottom' && 'top-[-8px] left-1/2 -translate-x-1/2 border-b-gray-900',
-              position === 'left' && 'right-[-8px] top-1/2 -translate-y-1/2 border-l-gray-900',
-              position === 'right' && 'left-[-8px] top-1/2 -translate-y-1/2 border-r-gray-900'
+              position === 'top' && 'bottom-[-6px] left-1/2 -translate-x-1/2 border-t-primary',
+              position === 'bottom' && 'top-[-6px] left-1/2 -translate-x-1/2 border-b-primary',
+              position === 'left' && 'right-[-6px] top-1/2 -translate-y-1/2 border-l-primary',
+              position === 'right' && 'left-[-6px] top-1/2 -translate-y-1/2 border-r-primary'
             )}
           />
         </div>
@@ -52,6 +52,3 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 )
 
 Tooltip.displayName = 'Tooltip'
-
-// Need to import React
-import React from 'react'

src/components/ui/index.ts

@@ -1,7 +1,7 @@
 export { Button } from './Button'
 export { Input } from './Input'
 export { Select } from './Select'
-export { Slider } from './Slider'
+export { TestSlider as Slider } from './TestSlider'
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
 export { Badge } from './Badge'
 export { Tooltip } from './Tooltip'