:root {
  --bg-color: #0d0f17;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-hover-bg: rgba(255, 255, 255, 0.06);
  --card-hover-border: rgba(255, 255, 255, 0.15);
  
  --accent-1: #6366f1; /* Indigo */
  --accent-2: #8b5cf6; /* Violet */
  --accent-3: #ec4899; /* Pink */
  --accent-4: #14b8a6; /* Teal */
  --accent-5: #f59e0b; /* Amber */
  --accent-6: #ef4444; /* Red */

  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-family);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* App-wide styles only - component-specific styles should be defined in component scoped styles */