@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-inter: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Colors */
  --background: 24 24 27;
  --foreground: 250 250 250;
  --card: 39 39 42;
  --card-foreground: 250 250 250;
  --primary: 59 130 246;
  --primary-foreground: 255 255 255;
  --secondary: 63 63 70;
  --secondary-foreground: 250 250 250;
  --muted: 63 63 70;
  --muted-foreground: 161 161 170;
  --accent: 63 63 70;
  --accent-foreground: 250 250 250;
  --destructive: 239 68 68;
  --destructive-foreground: 250 250 250;
  --border: 63 63 70;
  --input: 63 63 70;
  --ring: 59 130 246;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-inter);
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar-track {
  background: rgb(var(--background));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--secondary));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--muted-foreground));
}

/* Selection */
::selection {
  background-color: rgb(var(--primary) / 0.3);
}

/* Focus styles */
:focus-visible {
  outline: 2px solid rgb(var(--ring));
  outline-offset: 2px;
}

/* Smooth transitions */
a,
button {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Utility classes */
.text-gradient {
  background: linear-gradient(135deg, rgb(var(--primary)) 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass {
  background: rgb(var(--card) / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(var(--border) / 0.5);
}