@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Premium Purple-Indigo Palette */
  --background: 260 30% 98%;
  --foreground: 260 20% 11%;
  
  --primary: 262 83% 58%;
  --primary-foreground: 210 40% 98%;
  
  --secondary: 260 20% 96%;
  --secondary-foreground: 260 20% 11%;
  
  --muted: 260 20% 96%;
  --muted-foreground: 260 10% 45%;
  
  --accent: 280 85% 97%;
  --accent-foreground: 262 83% 58%;
  
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 260 20% 92%;
  --input: 260 20% 92%;
  --ring: 262 83% 58%;
  
  --radius: 0.75rem;

  --card: 0 0% 100%;
  --card-foreground: 260 20% 11%;
}

.dark {
  --background: 260 40% 5%;
  --foreground: 260 20% 98%;
  
  --primary: 262 83% 65%;
  --primary-foreground: 210 40% 98%;
  
  --secondary: 260 30% 15%;
  --secondary-foreground: 260 20% 98%;
  
  --muted: 260 30% 15%;
  --muted-foreground: 260 20% 65%;
  
  --accent: 262 83% 20%;
  --accent-foreground: 260 20% 98%;
  
  --destructive: 0 62% 30%;
  --destructive-foreground: 210 40% 98%;
  
  --border: 260 30% 15%;
  --input: 260 30% 15%;
  --ring: 262 83% 65%;

  --card: 260 40% 8%;
  --card-foreground: 260 20% 98%;
}

/* Base Styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.2);
  border-radius: 9999px;
  transition: background-color 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.4);
}