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

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

  body {
    @apply bg-cream text-charcoal;
    transition: background-color 0.5s ease, color 0.5s ease;
  }

  .dark body {
    @apply bg-dark-bg text-cream;
  }
}

@layer components {
  .noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
  }

  .btn-magnetic {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .btn-magnetic:hover {
    transform: scale(1.03);
  }

  .btn-magnetic .btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .btn-magnetic:hover .btn-bg {
    transform: translateX(0);
  }

  .btn-magnetic:hover .btn-text-dark-on-hover {
    color: #1A1A1A;
    transition: color 0.3s ease;
  }

  .dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(204, 88, 51, 0.25);
  }

  .dark .shadow-clay\/20 {
    box-shadow: 0 25px 50px -12px rgba(204, 88, 51, 0.2);
  }

  .dark .shadow-inner {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .dark .shadow-moss\/20 {
    box-shadow: 0 0 30px -4px rgba(46, 64, 54, 0.2);
  }
}