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

:root {
  --primary: #f97316;
}

html[data-color-theme='ember'] {
  --primary: #f97316;
}

html[data-color-theme='ocean'] {
  --primary: #0ea5e9;
}

html[data-color-theme='forest'] {
  --primary: #10b981;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer base {
  * {
    @apply transition-colors duration-150;
  }

  body {
    @apply bg-slate-50 text-slate-900 font-sans antialiased dark:bg-slate-900 dark:text-slate-100;
  }

  button:focus-visible {
    @apply outline-none ring-2 ring-[var(--primary)] outline-offset-2;
  }

  input:focus {
    @apply ring-2 ring-[var(--primary)] border-[var(--primary)] outline-none;
  }
}

@layer components {
  .card {
    @apply bg-white border border-slate-200 rounded-lg shadow-sm dark:bg-slate-800 dark:border-slate-700;
  }

  .page-enter {
    animation: fade-in 200ms ease-out;
  }
}