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

:root {
  color-scheme: light;
}

html {
  @apply antialiased;
}

body {
  @apply bg-slate-50 text-slate-900;
}

@layer base {
  /* Every interactive element gets a smooth color/background/border
     transition by default, so hover/active/disabled state changes never
     feel like an instant snap - individual components don't have to
     remember to add this themselves. */
  button,
  a,
  input,
  select,
  textarea {
    @apply transition-[color,background-color,border-color,box-shadow,opacity] duration-150 ease-out;
  }
}

@layer utilities {
  /* Ring only appears on real keyboard focus (:focus-visible), never on a
     mouse click - and uses slate instead of blue so it doesn't read as a
     copy of the browser's native tab-focus outline. */
  .focus-ring {
    @apply outline-none;
  }
  .focus-ring:focus-visible {
    @apply ring-2 ring-slate-900 ring-offset-2 ring-offset-white;
  }
}