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

@layer base {
  :root {
    --color-bg: #ffffff;
    --color-surface: #f8fafc;
    --color-text: #0f172a;
    --color-text-secondary: #64748b;
    --color-border: #e2e8f0;
  }

  .dark {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-border: #334155;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-white text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100;
    font-family: 'Inter', 'Tajawal', system-ui, sans-serif;
    text-rendering: optimizeLegibility;
  }

  /* RTL Support */
  [dir="rtl"] body {
    font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
  }

  [dir="rtl"] .ltr-only {
    direction: ltr;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-primary-500 dark:hover:bg-primary-600;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 transition-all hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-600 dark:hover:bg-slate-700;
  }

  .btn-success {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-emerald-500 dark:hover:bg-emerald-600;
  }

  .card {
    @apply rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 transition-shadow hover:shadow-md dark:bg-slate-800 dark:ring-slate-700;
  }

  .tool-card {
    @apply card cursor-pointer hover:ring-primary-300 hover:shadow-lg transition-all duration-200 dark:hover:ring-primary-600;
  }

  .input-field {
    @apply block w-full rounded-xl border-0 py-3 px-4 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-600 dark:placeholder:text-slate-500;
  }

  .section-heading {
    @apply text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-100;
  }
}

/* Upload zone styles */
.upload-zone {
  @apply flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-8 text-center transition-colors cursor-pointer dark:border-slate-600 dark:bg-slate-800/50;
}

.upload-zone:hover,
.upload-zone.drag-active {
  @apply border-primary-400 bg-primary-50 dark:border-primary-500 dark:bg-primary-900/20;
}

.upload-zone.drag-active {
  @apply ring-2 ring-primary-300 dark:ring-primary-600;
}

/* Progress bar animation */
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.progress-bar-animated {
  animation: progress-pulse 1.5s ease-in-out infinite;
}

/* Ad slot container */
.ad-slot {
  @apply flex items-center justify-center bg-slate-50 rounded-xl border border-slate-200 min-h-[90px] overflow-hidden dark:bg-slate-800 dark:border-slate-700;
}

/* Dropdown animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeSlideIn 0.15s ease-out;
}

/* Hero upload zone — larger variant for the homepage */
.hero-upload-zone {
  @apply flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-gradient-to-b from-slate-50 to-white p-10 text-center transition-all duration-200 cursor-pointer sm:p-12 dark:border-slate-600 dark:from-slate-800/60 dark:to-slate-800/30;
}

.hero-upload-zone:hover {
  @apply border-primary-400 bg-gradient-to-b from-primary-50 to-white shadow-lg dark:border-primary-500 dark:from-primary-900/20 dark:to-slate-800/30;
}

.hero-upload-zone.drag-active {
  @apply border-primary-500 bg-gradient-to-b from-primary-100 to-primary-50 ring-2 ring-primary-300 shadow-xl dark:border-primary-400 dark:from-primary-900/30 dark:to-primary-900/10 dark:ring-primary-600;
}

/* Modal animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-backdrop {
  animation: modalFadeIn 0.2s ease-out;
}

.modal-content {
  animation: modalSlideUp 0.25s ease-out;
}

.deferred-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}
