/* Theme Fallback CSS */
/* Provides default theme values while JavaScript theme system initializes */

:root {
  /* Base UI colors - HSL values without hsl() wrapper for Tailwind compatibility */
  --background: 222 23% 4%;
  --foreground: 210 40% 98%;
  --card: 222 23% 7%;
  --card-foreground: 210 40% 98%;
  --muted: 220 20% 12%;
  --muted-foreground: 220 15% 75%;
  --border: 220 20% 18%;
  --input: 220 20% 14%;
  --ring: 262 73% 60%;
  
  /* Primary colors - hex format */
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7c3aed;
  
  /* Glass effects */
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(148, 163, 184, 0.15);
  --glass-backdrop: blur(16px);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  
  /* Category colors */
  --category-personal: #a855f7;
  --category-work: #10b981;
  --category-code: #ef4444;
  --category-research: #3b82f6;
  
  /* Complexity colors */
  --complexity-l1: #10b981;
  --complexity-l2: #3b82f6;
  --complexity-l3: #f59e0b;
  --complexity-l4: #ef4444;
  
  /* Semantic colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
}

/* Fallback styles to ensure theme is visible during initialization */
/* These will be overridden by the theme system once loaded */

/* Ensure body has proper background */
html,
body {
  background-color: hsl(var(--background, 222 23% 4%));
  color: hsl(var(--foreground, 210 40% 98%));
}

/* Critical UI element fallbacks */
.glass-effect {
  background: var(--glass-bg, rgba(30, 41, 59, 0.7));
  backdrop-filter: var(--glass-backdrop, blur(16px));
  border-color: var(--glass-border, rgba(148, 163, 184, 0.15));
}