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

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 6%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 6%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 6%;

    --primary: 43 74% 52%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 6%;
    --secondary-foreground: 43 74% 52%;

    --muted: 40 20% 95%;
    --muted-foreground: 0 0% 40%;

    --accent: 43 50% 90%;
    --accent-foreground: 0 0% 6%;

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

    --border: 40 20% 88%;
    --input: 40 20% 88%;
    --ring: 43 74% 52%;

    --radius: 0.5rem;

    --gold: 43 74% 52%;
    --gold-light: 43 80% 70%;
    --gold-dark: 43 70% 38%;
    --gold-muted: 43 30% 85%;
    --charcoal: 0 0% 12%;
    --charcoal-light: 0 0% 20%;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 0 0% 4%;
    --foreground: 40 20% 95%;
    --card: 0 0% 8%;
    --card-foreground: 40 20% 95%;
    --popover: 0 0% 8%;
    --popover-foreground: 40 20% 95%;
    --primary: 43 74% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 14%;
    --secondary-foreground: 43 74% 52%;
    --muted: 0 0% 14%;
    --muted-foreground: 40 10% 60%;
    --accent: 0 0% 14%;
    --accent-foreground: 40 20% 95%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 43 74% 52%;
  }
}

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

  body {
    @apply bg-background text-foreground font-body antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

@layer components {
  .gold-gradient {
    background: linear-gradient(135deg, hsl(43 74% 52%), hsl(43 80% 65%), hsl(43 74% 52%));
  }

  .gold-text-gradient {
    background: linear-gradient(135deg, hsl(43 74% 52%), hsl(43 80% 70%), hsl(43 70% 45%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .dark-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
  }

  .dark-overlay-strong {
    background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 100%);
  }

  .section-padding {
    @apply py-16 md:py-24 px-4 md:px-8;
  }

  .page-banner {
    @apply relative h-[300px] md:h-[400px] flex items-center justify-center overflow-hidden;
  }

  .page-banner-overlay {
    @apply absolute inset-0 dark-overlay-strong z-10;
  }

  .page-banner-content {
    @apply relative z-20 text-center;
  }

  .gold-divider {
    @apply w-20 h-1 gold-gradient mx-auto rounded-full;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
