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

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

:root {
  --color-light: #ffffff;
  --color-dark: #1a1a1a;
  --color-gray: #666666;
  --color-light-gray: #f8f9fa;
  --color-border: #e5e7eb;
}

.dark {
  --color-light: #0a0a0a;
  --color-dark: #ffffff;
  --color-gray: #a1a1aa;
  --color-light-gray: #18181b;
  --color-border: #27272a;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-dark);
  background: var(--color-light);
  font-weight: 400;
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Typography */
.text-primary {
  color: var(--color-dark);
}

.text-secondary {
  color: var(--color-gray);
}

/* Clean button styles */
.btn-clean {
  @apply px-4 py-2 text-sm font-medium transition-all duration-200 border border-transparent;
}

.btn-primary {
  @apply btn-clean bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200;
}

.btn-secondary {
  @apply btn-clean text-gray-600 hover:text-black hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800;
}

.btn-outline {
  @apply btn-clean border-gray-200 text-gray-600 hover:border-gray-300 hover:text-black dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-white;
}

/* Input styles */
.input-clean {
  @apply w-full px-4 py-3 text-sm border border-gray-200 rounded-none focus:border-black focus:ring-0 focus:outline-none transition-colors bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:focus:border-white;
}

.textarea-clean {
  @apply input-clean resize-none;
}

/* Card styles */
.card-clean {
  @apply bg-white border border-gray-100 transition-all duration-200 hover:border-gray-200 dark:bg-gray-900 dark:border-gray-800 dark:hover:border-gray-700;
}

/* Layout utilities */
.container-narrow {
  @apply max-w-2xl mx-auto px-6;
}

.container-wide {
  @apply max-w-4xl mx-auto px-6;
}

/* Typography scale */
.text-display {
  @apply text-4xl font-light tracking-tight text-black dark:text-white;
}

.text-title {
  @apply text-2xl font-medium text-black dark:text-white;
}

.text-subtitle {
  @apply text-lg font-normal;
}

.text-body {
  @apply text-base leading-relaxed;
}

.text-caption {
  @apply text-sm text-gray-500 dark:text-gray-400;
}

/* Minimal animations */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

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

/* Loading spinner */
.spinner {
  @apply w-5 h-5 border-2 border-gray-200 border-t-black rounded-full animate-spin dark:border-gray-700 dark:border-t-white;
}

/* Auth styles */
.auth-input-field {
  @apply input-clean;
}

.auth-button {
  @apply btn-primary w-full py-3;
}

/* Dark mode specific overrides */
.dark .bg-white {
  @apply bg-gray-900;
}

.dark .bg-gray-50 {
  @apply bg-gray-800;
}

.dark .border-gray-100 {
  @apply border-gray-800;
}

.dark .text-gray-600 {
  @apply text-gray-300;
}

.dark .text-gray-500 {
  @apply text-gray-400;
}

.dark .text-gray-700 {
  @apply text-gray-200;
}

.dark .hover\:text-gray-600:hover {
  @apply text-gray-300;
}