@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
@import "tailwindcss";

:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.08 0 0);
  --card: oklch(0.98 0 0);
  --card-foreground: oklch(0.08 0 0);
  --popover: oklch(0.98 0 0);
  --popover-foreground: oklch(0.08 0 0);
  --primary: oklch(0.08 0 0);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.96 0 0);
  --secondary-foreground: oklch(0.08 0 0);
  --muted: oklch(0.96 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.75 0.15 265);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.9 0 0);
  --ring: oklch(0.65 0.15 265);
}

.dark {
  --background: oklch(0.08 0 0);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.12 0 0);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.12 0 0);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.98 0 0);
  --primary-foreground: oklch(0.08 0 0);
  --secondary: oklch(0.18 0 0);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.15 0 0);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.75 0.15 265);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.2 0 0);
  --input: oklch(0.2 0 0);
  --ring: oklch(0.65 0.15 265);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: oklch(0.08 0 0);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.12 0 0);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.12 0 0);
    --popover-foreground: oklch(0.98 0 0);
    --primary: oklch(0.98 0 0);
    --primary-foreground: oklch(0.08 0 0);
    --secondary: oklch(0.18 0 0);
    --secondary-foreground: oklch(0.98 0 0);
    --muted: oklch(0.15 0 0);
    --muted-foreground: oklch(0.65 0 0);
    --accent: oklch(0.75 0.15 265);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.98 0 0);
    --border: oklch(0.2 0 0);
    --input: oklch(0.2 0 0);
    --ring: oklch(0.65 0.15 265);
  }
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground font-sans;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.6;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Custom utility classes */
.btn-primary {
  @apply inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90;
}

.btn-secondary {
  @apply inline-flex h-11 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-8 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground;
}

.btn-outline {
  @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:-translate-y-0.5;
}

.card {
  @apply bg-card rounded-2xl shadow-xl p-8 border border-border hover:shadow-2xl transition-shadow duration-300;
}

.hero-section {
  @apply bg-gradient-to-br from-indigo-600 via-purple-600 to-blue-700 text-white py-20;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.form-input {
  @apply w-full px-3 py-2 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent bg-background text-foreground;
}

.form-label {
  @apply block text-sm font-medium text-foreground mb-1;
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Feature Cards */
.feature-card {
  @apply bg-card rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-border;
}

.feature-icon {
  @apply w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center text-white text-xl mb-4;
}

/* Code blocks */
code {
  @apply bg-muted px-3 py-1 rounded-lg text-sm font-mono border border-border text-muted-foreground;
}

pre {
  @apply bg-muted text-muted-foreground p-4 rounded-xl overflow-x-auto border border-border;
}

/* Status badges */
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-green-500/10 text-green-500 border border-green-500/20;
}

.badge-warning {
  @apply bg-yellow-500/10 text-yellow-500 border border-yellow-500/20;
}

.badge-info {
  @apply bg-blue-500/10 text-blue-500 border border-blue-500/20;
}

/* Loading states */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
}

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

::-webkit-scrollbar-track {
  @apply bg-muted;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/30 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/50;
}