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

@layer base {
  :root {
    --background: 0 0% 4%;
    --foreground: 45 100% 96%;

    --card: 0 0% 8%;
    --card-foreground: 45 100% 96%;

    --popover: 0 0% 8%;
    --popover-foreground: 45 100% 96%;

    --primary: 45 100% 50%;
    --primary-foreground: 0 0% 4%;

    --secondary: 0 0% 12%;
    --secondary-foreground: 45 100% 96%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 60%;

    --accent: 0 75% 40%;
    --accent-foreground: 45 100% 96%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 45 50% 20%;
    --input: 0 0% 15%;
    --ring: 45 100% 50%;

    --radius: 0.75rem;

    /* Custom gold colors */
    --gold-light: 45 100% 70%;
    --gold-main: 45 100% 50%;
    --gold-dark: 40 80% 40%;
    --crimson: 0 75% 40%;

    /* Gradients */
    --gradient-gold: linear-gradient(
      135deg,
      hsl(45, 100%, 60%),
      hsl(40, 100%, 45%)
    );
    --gradient-gold-shine: linear-gradient(
      135deg,
      hsl(45, 100%, 75%),
      hsl(45, 100%, 50%),
      hsl(40, 80%, 35%)
    );
    --gradient-card: linear-gradient(180deg, hsl(0, 0%, 10%), hsl(0, 0%, 6%));
    --gradient-hero: radial-gradient(
      ellipse at center,
      hsl(40, 50%, 8%) 0%,
      hsl(0, 0%, 4%) 70%
    );

    /* Shadows */
    --shadow-gold: 0 0 40px hsl(45, 100%, 50%, 0.3);
    --shadow-gold-strong: 0 0 60px hsl(45, 100%, 50%, 0.5);
    --glow-gold: 0 0 20px hsl(45, 100%, 50%, 0.4),
      0 0 40px hsl(45, 100%, 50%, 0.2);
  }

  .dark {
    --background: 0 0% 4%;
    --foreground: 45 100% 96%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: "Montserrat", sans-serif;
  }

  h1,
  h2,
  h3 {
    font-family: "Playfair Display", serif;
  }
}

@layer components {
  .text-gradient-gold {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(
      135deg,
      hsl(45, 100%, 75%),
      hsl(45, 100%, 55%),
      hsl(40, 80%, 45%)
    );
  }

  .bg-gradient-gold {
    background: linear-gradient(135deg, hsl(45, 100%, 60%), hsl(40, 100%, 45%));
  }

  .bg-gradient-gold-hover {
    background: linear-gradient(135deg, hsl(45, 100%, 65%), hsl(40, 100%, 50%));
  }

  .border-gradient-gold {
    border: 2px solid transparent;
    background: linear-gradient(hsl(0, 0%, 8%), hsl(0, 0%, 8%)) padding-box,
      linear-gradient(135deg, hsl(45, 100%, 60%), hsl(40, 80%, 35%)) border-box;
  }

  .card-premium {
    @apply relative overflow-hidden rounded-2xl;
    background: linear-gradient(180deg, hsl(0, 0%, 10%), hsl(0, 0%, 6%));
    border: 1px solid hsl(45, 50%, 25%, 0.3);
  }

  .card-premium::before {
    content: "";
    @apply absolute inset-0 opacity-0 transition-opacity duration-300;
    background: radial-gradient(
      circle at 50% 0%,
      hsl(45, 100%, 50%, 0.1) 0%,
      transparent 50%
    );
  }

  .card-premium:hover::before {
    @apply opacity-100;
  }

  .btn-gold {
    @apply relative px-8 py-4 font-bold rounded-xl transition-all duration-300 transform;
    background: linear-gradient(135deg, hsl(45, 100%, 55%), hsl(40, 100%, 40%));
    color: hsl(0, 0%, 4%);
    box-shadow: 0 4px 20px hsl(45, 100%, 50%, 0.3);
  }

  .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px hsl(45, 100%, 50%, 0.5);
    background: linear-gradient(135deg, hsl(45, 100%, 65%), hsl(40, 100%, 50%));
  }

  .btn-whatsapp {
    @apply fixed bottom-6 right-6 z-50 flex items-center gap-3 px-6 py-4 rounded-full font-bold transition-all duration-300;
    background: linear-gradient(135deg, hsl(142, 70%, 45%), hsl(142, 70%, 35%));
    color: white;
    box-shadow: 0 4px 20px hsl(142, 70%, 40%, 0.4);
  }

  .btn-whatsapp:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px hsl(142, 70%, 40%, 0.6);
  }

  .glow-text {
    text-shadow: 0 0 20px hsl(45, 100%, 50%, 0.5),
      0 0 40px hsl(45, 100%, 50%, 0.3);
  }

  .shine-effect {
    @apply relative overflow-hidden;
  }

  .shine-effect::after {
    content: "";
    @apply absolute inset-0;
    background: linear-gradient(
      105deg,
      transparent 40%,
      hsl(45, 100%, 80%, 0.2) 45%,
      hsl(45, 100%, 80%, 0.4) 50%,
      hsl(45, 100%, 80%, 0.2) 55%,
      transparent 60%
    );
    animation: shine 3s infinite;
  }

  .floating {
    animation: floating 3s ease-in-out infinite;
  }

  .pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
  }
}