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

:root {
  --color-cream:        #FAF7F2;
  --color-sand:         #F0E0CC;
  --color-orange:       #E8651A;
  --color-orange-hover: #D4571A;
  --color-dark:         #1C1C1C;
  --color-sage:         #4A6741;
  --color-earth:        #C4A882;
  --color-brown:        #3D2B1F;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-cream text-brown font-body;
  }

  h1, h2, h3, h4 {
    @apply font-display;
  }
}