index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --theme-bg: #f8fafc; /* slate-50 */
    --theme-surface: rgba(255, 255, 255, 0.8);
    --theme-border: #e2e8f0; /* slate-200 */
    --theme-text: #1e293b; /* slate-800 */
    --theme-muted: #64748b; /* slate-500 */
    --theme-primary: #2563eb; /* blue-600 */
    --theme-primary-hover: #1d4ed8; /* blue-700 */
  }

  .dark {
    /* Grey-glassmorphic with a touch of blue */
    --theme-bg: #0f172a; /* slate-900 */
    --theme-surface: rgba(30, 41, 59, 0.6); /* slate-800 with opacity for glassmorphism */
    --theme-border: rgba(51, 65, 85, 0.5); /* slate-700 transparent */
    --theme-text: #f8fafc; /* slate-50 */
    --theme-muted: #94a3b8; /* slate-400 */
    --theme-primary: #3b82f6; /* blue-500 */
    --theme-primary-hover: #60a5fa; /* blue-400 */
  }

  body {
    @apply bg-theme-bg text-theme-text transition-colors duration-300 min-h-screen;
    background-image: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.05), transparent 40%);
  }

  /* Glassmorphic Panel Utility */
  .glass-panel {
    @apply bg-theme-surface backdrop-blur-xl border border-theme-border shadow-xl;
  }
}