@import "tailwindcss";

@theme {
  --color-primary-50: oklch(0.97 0.01 240);
  --color-primary-100: oklch(0.93 0.03 240);
  --color-primary-200: oklch(0.87 0.06 240);
  --color-primary-300: oklch(0.78 0.12 240);
  --color-primary-400: oklch(0.66 0.18 240);
  --color-primary-500: oklch(0.55 0.22 240);
  --color-primary-600: oklch(0.48 0.23 240);
  --color-primary-700: oklch(0.40 0.20 240);
  --color-primary-800: oklch(0.33 0.16 240);
  --color-primary-900: oklch(0.28 0.12 240);
  --color-primary-950: oklch(0.18 0.08 240);

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, monospace;
}

@layer base {
  body {
    @apply bg-slate-50 text-slate-900 antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight text-slate-900;
  }
}

@layer components {
  .glass {
    @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-xl;
  }
  
  .card-premium {
    @apply bg-white border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 rounded-xl overflow-hidden;
  }

  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-all active:scale-95;
  }
}