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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-hap-dark: #0a0a0a;
  --color-hap-purple: #8b5cf6;
  --color-hap-cyan: #06b6d4;
}

body {
  background-color: var(--color-hap-dark);
  color: white;
  font-family: var(--font-sans);
  overflow-x: hidden;
}

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

.text-gradient {
  background: linear-gradient(to right, var(--color-hap-purple), var(--color-hap-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-hap-purple), var(--color-hap-cyan));
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}