/* css/base.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    overflow-x: clip;
  }

  html, body {
    font-family: var(--font-body);
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: clip;
  }

  ::selection {
    background-color: var(--color-primary-500);
    color: white;
  }

  /* Custom component classes that Tailwind cannot handle smoothly */


  /* Form error states */
  .form__field--error {
    border-color: var(--color-error) !important;
  }
}