@import "tailwindcss";

@keyframes meteor {
  0%   { transform: rotate(215deg) translateX(0); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: rotate(215deg) translateX(-500px); opacity: 0; }
}

@keyframes shimmer-slide {
  from { transform: translateX(-150%); }
  to   { transform: translateX(250%); }
}

@theme {
  --color-primary: #0A0A0A;
  --color-accent1: #C8853A;
  --color-accent2: #E85D3A;
  --color-accent3: #3B4FA6;
  --color-text-main: #F5F0E8;

  --font-sans: var(--font-inter), sans-serif;
  --font-serif: var(--font-playfair), serif;

  --animate-meteor: meteor 5s linear infinite;
  --animate-shimmer-slide: shimmer-slide 2.5s ease-in-out infinite;
}

body {
  background-color: var(--color-primary);
  color: var(--color-text-main);
  @apply font-sans;
}