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

@layer base {
  :root {
    color-scheme: light;
  }

  .dark {
    color-scheme: dark;
  }

  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    @apply bg-paper text-slate-800 dark:bg-ink dark:text-slate-200 font-body antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-display text-slate-950 dark:text-white;
  }

  ::selection {
    @apply bg-indigo/20 text-slate-950 dark:bg-indigo-light/30 dark:text-white;
  }

  :focus-visible {
    outline: 2px solid theme("colors.indigo.DEFAULT");
    outline-offset: 3px;
    border-radius: 4px;
  }
}

@layer components {
  .section-shell {
    @apply mx-auto w-full max-w-6xl px-6 sm:px-8 lg:px-10;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-sm px-5 py-3 text-sm font-medium transition-colors duration-200 ease-out focus-visible:outline-2;
  }

  .btn-primary {
    @apply btn bg-indigo text-white hover:bg-indigo-soft dark:bg-indigo-light dark:text-slate-950 dark:hover:bg-white;
  }

  .btn-outline {
    @apply btn border border-slate-300 text-slate-800 hover:border-indigo hover:text-indigo dark:border-slate-700 dark:text-slate-200 dark:hover:border-indigo-light dark:hover:text-indigo-light;
  }

  .card {
    @apply rounded border border-border-light bg-surface-light shadow-soft dark:border-border-dark dark:bg-surface-dark dark:shadow-softDark;
  }
}