@import 'tailwindcss';

/* Tailwind v4: Use .dark class for dark mode instead of prefers-color-scheme */
@custom-variant dark (&:where(.dark, .dark *));

/* Global Resets & Transitions */
html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  @apply bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100 antialiased font-sans;
  min-height: 100vh;
}

html.theme-transition * {
  transition: none !important;
}

/* Force dark mode styles */
html.dark {
  color-scheme: dark;
}

/* Mobile touch improvements */
@media (max-width: 640px) {
  input,
  select,
  button {
    font-size: 16px !important;
  }
  .touch-manipulation {
    touch-action: manipulation;
  }
}

/* Global Button Styles */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  cursor: pointer;
}

button:disabled,
[type='button']:disabled,
[type='reset']:disabled,
[type='submit']:disabled {
  cursor: not-allowed;
}

/* Premium Utilities */
@layer utilities {
  .glass {
    @apply bg-white/70 dark:bg-gray-900/70 backdrop-blur-md border border-white/20 dark:border-gray-800/50;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
  }

  .glass-panel {
    @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50;
    box-shadow:
      0 2px 15px -3px rgba(0, 0, 0, 0.07),
      0 10px 20px -2px rgba(0, 0, 0, 0.04);
  }

  /* Custom Scrollbar */
  .scrollbar-thin {
    scrollbar-width: thin;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-700 rounded-full transition-colors;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-600;
  }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm rounded-lg transition-all duration-200 cursor-pointer font-medium 
           focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98];
  }

  .btn-primary {
    @apply bg-gray-900 text-white hover:bg-black shadow-lg shadow-gray-900/20 
           dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-white dark:shadow-gray-100/10 border border-transparent;
  }

  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 hover:border-gray-300 shadow-sm
           dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-700/80 dark:hover:border-gray-600;
  }

  .btn-ghost {
    @apply text-gray-600 hover:bg-gray-100/80 hover:text-gray-900
           dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-200;
  }

  .btn-danger {
    @apply text-red-600 hover:bg-red-50 hover:text-red-700
           dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-md {
    @apply px-4 py-2 text-sm;
  }

  .btn-icon {
    @apply p-2;
  }

  .input-field {
    @apply px-3 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 
           rounded-lg outline-none transition-shadow focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 
           placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-100;
  }

  .card {
    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700/60 rounded-xl shadow-sm;
  }
}

/* Typography Overrides (Prose) */
.prose {
  @apply text-gray-600 dark:text-gray-300 max-w-none;
}
.prose h1,
.prose h2,
.prose h3 {
  @apply text-gray-900 dark:text-gray-50 font-bold tracking-tight;
}
.prose a {
  @apply text-indigo-600 dark:text-indigo-400 no-underline hover:underline font-medium;
}
.prose code {
  @apply bg-gray-100 dark:bg-gray-800 rounded px-1.5 py-0.5 text-sm text-indigo-600 dark:text-indigo-300 font-mono font-medium before:content-[''] after:content-[''];
}
.prose pre {
  @apply bg-gray-900 dark:bg-gray-950/50 border border-gray-200 dark:border-gray-800 rounded-xl shadow-lg;
}