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

@layer base {
  :root {
    /* Refined Color Palette */
    --light-beige: 60 20% 98%; /* #FAFAF8 */
    --dark-beige: 36 21% 95%; /* #F5F3F0 */
    --gold: 39 47% 56%; /* #C5A059 */
    --dark-brown: 40 16% 15%; /* #2C2820 */
    --dark-brown-light: 30 9% 21%; /* #3A3530 */
    --dark-bg: 0 0% 10%; /* #1A1A1A */
    
    /* Unified Glassmorphism 2.0 Properties */
    --glass-light: rgba(255, 255, 255, 0.7);
    --glass-dark: rgba(44, 40, 32, 0.7);
    --glass-lighter: rgba(255, 255, 255, 0.8);
    
    --background: 60 20% 98%;
    --foreground: 40 16% 15%;
    --border: 40 16% 90%;
    --input: 40 16% 90%;
    --ring: 39 47% 56%;
    
    --primary: 39 47% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 40 16% 15%;
    --secondary-foreground: 0 0% 100%;
    --muted: 36 21% 95%;
    --muted-foreground: 40 16% 40%;
    --card: 0 0% 100%;
    --card-foreground: 40 16% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 40 16% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    --radius: 1rem;
  }

  .dark {
    --background: 40 16% 10%;
    --foreground: 0 0% 100%;
    --border: 40 16% 20%;
    --input: 40 16% 20%;
    --ring: 39 47% 56%;
    --primary: 39 47% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 40 16% 15%;
    --secondary-foreground: 0 0% 100%;
    --muted: 40 16% 15%;
    --muted-foreground: 40 16% 60%;
    --card: 40 16% 12%;
    --card-foreground: 0 0% 100%;
    --popover: 40 16% 12%;
    --popover-foreground: 0 0% 100%;
  }

  * {
    @apply border-border;
  }
  
  html {
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
  }
  
  body {
    @apply text-foreground;
    background-color: hsl(var(--light-beige));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  .font-playfair {
    font-family: 'Playfair Display', Georgia, serif;
  }

  .font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
}

@layer components {
  /* Unified Glassmorphism System */
  .glass-panel {
    background-color: var(--glass-light);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
  }
  .glass-panel:hover {
    background-color: var(--glass-lighter);
  }

  .glass-dark-panel {
    background-color: #332E26;
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
  }

  .glass-lighter-panel {
    background-color: var(--glass-lighter);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
  }

  /* CTA Button Refined Style */
  .btn-glass {
    @apply relative overflow-hidden bg-[#C5A059] text-[#2C2820] font-bold transition-all duration-300;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }
  .btn-glass:hover {
    @apply shadow-md -translate-y-[2px] bg-[#B39050];
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .shadow-soft {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  }
  
  /* Clean Gradients (No noise, no textures) */
  .bg-gradient-light {
    background: linear-gradient(to bottom, #FAFAF9, #F3F0EB);
  }
  
  .bg-gradient-dark {
    background: linear-gradient(to bottom, #3A3530, #2C2820);
  }

  /* Legacy gradient-hero for compatibility if needed, mapped to new */
  .gradient-hero {
    background: linear-gradient(to bottom, #FAFAF9, #F3F0EB);
  }

  .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .backdrop-blur-md { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .backdrop-blur-lg { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Działający efekt glow-gold na hover kafla (Etap 1, Naprawa #2).
   Celuje wprost w klasę z DOM `hover:glow-gold`. Poza @layer, by Tailwind nie wyciął. */
.hover\:glow-gold:hover {
  border-color: rgba(197, 160, 89, 0.6);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 0 24px rgba(197, 160, 89, 0.18);
}