@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", serif;
  --font-display: "Cinzel", serif;

  --color-forest: #2D3A2D;
  --color-brand-primary: #2D3A2D;
  --color-brand-secondary: #F9F6F0;
  --color-brand-accent-red: #8B1E1E;
  --color-brand-accent-gold: #B08D57;
  --color-brand-text: #1B261D;
  --color-brand-dark: #1A241A;

  @keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
  }

  --animate-fade-in-up: fade-in-up 1s ease-out forwards;
  --animate-fade-in: fade-in 1.5s ease-out forwards;
  --animate-float: float 6s ease-in-out infinite;
}

@layer components {
  .ornate-label-frame {
    border: 1px solid #B08D57;
    position: relative;
    padding: 2px;
  }
  .ornate-label-frame::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 0.5px solid #B08D57;
    opacity: 0.5;
    pointer-events: none;
  }
  .label-clip {
    clip-path: polygon(
      0 10%, 10% 0, 90% 0, 100% 10%, 
      100% 90%, 90% 100%, 10% 100%, 0 90%
    );
  }
  .botanical-decor {
    opacity: 0.1;
    fill: #2D3A2D;
    pointer-events: none;
  }
  .gold-gradient-text {
    background: linear-gradient(to bottom, #B08D57, #8B6B3D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .transition-fade {
    transition: opacity 0.8s ease-in-out;
  }
}