@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* HSL variables for Light mode */
  --background: 0 0% 100%;
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 224 71.4% 4.1%;
  --primary: 20.8 63.7% 40%;
  --primary-foreground: 210 20% 98%;
  --secondary: 35 45% 45%;
  --secondary-foreground: 210 20% 98%;
  --muted: 220 14.3% 95.9%;
  --muted-foreground: 220 8.9% 46.1%;
  --accent: 20.8 63.7% 40%;
  --accent-foreground: 210 20% 98%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 20.8 63.7% 40%;
  --radius: 0.75rem;
}

.dark {
  /* HSL variables for Dark mode */
  --background: 224 71% 4%;
  --foreground: 210 20% 98%;
  --card: 224 71% 5.5%;
  --card-foreground: 210 20% 98%;
  --primary: 20.8 63.7% 55%;
  --primary-foreground: 210 20% 98%;
  --secondary: 35 45% 55%;
  --secondary-foreground: 210 20% 98%;
  --muted: 223 47% 11%;
  --muted-foreground: 215.4 16.3% 65%;
  --accent: 20.8 63.7% 45%;
  --accent-foreground: 210 20% 98%;
  --destructive: 0 62.8% 50.6%;
  --destructive-foreground: 210 20% 98%;
  --border: 223 47% 12%;
  --input: 223 47% 12%;
  --ring: 20.8 63.7% 55%;
}

@theme {
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
}

* {
  font-family: 'Inter', sans-serif;
  border-color: hsl(var(--border));
  transition-property: background-color, border-color, text-color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  min-height: 100vh;
  display: flex;
  flex-col: column;
}

/* Glassmorphic Panel Styles */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-panel {
  background: rgba(10, 10, 15, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.dark .glass-card {
  background: rgba(15, 15, 25, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Hide scrollbars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Utility bindings for styling colors natively using our HSL overrides */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.bg-muted { background-color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }
.text-primary { color: hsl(var(--primary)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-accent { color: hsl(var(--accent)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-destructive { color: hsl(var(--destructive)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-destructive-foreground { color: hsl(var(--destructive-foreground)); }