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

:root {
  --color-primary: #6366f1; /* Indigo 500 */
  --color-secondary: #64748b; /* Slate 500 */
  --color-accent: #06b6d4; /* Cyan 500 */
  --color-background: #0f172a; /* Slate 900 */
  --color-surface: #1e293b; /* Slate 800 */
  --color-on-primary: #ffffff; /* White */
  --color-on-secondary: #ffffff; /* White */
  --color-on-background: #f1f5f9; /* Slate 100 */
  --color-on-surface: #f1f5f9; /* Slate 100 */
}

.dark:root {
  --color-primary: #818cf8; /* Indigo 400 */
  --color-secondary: #94a3b8; /* Slate 400 */
  --color-accent: #22d3ee; /* Cyan 400 */
  --color-background: #1f2937; /* Gray 800 */
  --color-surface: #374151; /* Gray 700 */
  --color-on-primary: #1f2937; /* Gray 800 */
  --color-on-secondary: #1f2937; /* Gray 800 */
  --color-on-background: #f3f4f6; /* Gray 100 */
  --color-on-surface: #f3f4f6; /* Gray 100 */
}

body {
  @apply bg-background text-on-background font-sans;
}

/* Custom styles for glass effect (optional, Tailwind's backdrop-blur is used directly) */
/* If more complex glassmorphism is needed, custom classes can be defined here */
.glass-effect {
  /* This class is primarily illustrative, as Tailwind's utilities handle most of it directly */
  /* For example, bg-surface/50 backdrop-blur-lg */
}