@import "tailwindcss";

/* Dark mode configuration - use class selector for manual toggle */
@variant dark (&:where(.dark, .dark *));

/* Theme-aware custom properties for consistent styling */
@theme {
  /* Light mode is the new default, dark mode via .dark class */
}

/* Light mode (default) custom properties */
:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #d97706;
  --color-accent-hover: #b45309;
}

/* Dark mode custom properties */
.dark {
  --color-bg-primary: #111827;
  --color-bg-secondary: #1f2937;
  --color-bg-tertiary: #374151;
  --color-text-primary: #f3f4f6;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-border: #374151;
  --color-accent: #f59e0b;
  --color-accent-hover: #d97706;
}