/** Shopify CDN: Minification failed

Line 10:0 All "@import" rules must come first

**/
@tailwind base;
@tailwind components;
@tailwind utilities;

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

@layer base {
  :root {
    /* Warm parchment background */
    --background: 40 33% 96%;
    --foreground: 25 30% 15%;

    /* Card - slightly warmer cream */
    --card: 42 40% 94%;
    --card-foreground: 25 30% 15%;

    /* Popover */
    --popover: 42 40% 94%;
    --popover-foreground: 25 30% 15%;

    /* Primary - Rich Gold */
    --primary: 38 70% 45%;
    --primary-foreground: 40 33% 98%;

    /* Secondary - Deep Forest Green */
    --secondary: 150 35% 25%;
    --secondary-foreground: 40 33% 98%;

    /* Muted - Soft Parchment */
    --muted: 38 25% 88%;
    --muted-foreground: 25 20% 40%;

    /* Accent - Royal Blue */
    --accent: 220 60% 35%;
    --accent-foreground: 40 33% 98%;

    /* Destructive - Soft Burgundy */
    --destructive: 0 50% 40%;
    --destructive-foreground: 40 33% 98%;

    /* Borders */
    --border: 38 30% 80%;
    --input: 38 30% 85%;
    --ring: 38 70% 45%;

    --radius: 0.5rem;

    /* Custom colors */
    --gold: 38 70% 45%;
    --gold-light: 42 65% 65%;
    --gold-dark: 35 75% 35%;
    --ivory: 40 33% 96%;
    --parchment: 38 35% 90%;
    --burgundy: 350 45% 35%;
    --burgundy-light: 350 40% 50%;
    --royal-blue: 220 60% 35%;
    --royal-blue-light: 220 50% 55%;
    --forest-green: 150 35% 25%;
    --forest-green-light: 150 30% 40%;
    --warm-brown: 25 30% 25%;
    --candlelight: 35 90% 70%;

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, hsl(38 70% 50%) 0%, hsl(42 75% 60%) 50%, hsl(38 70% 45%) 100%);
    --gradient-parchment: linear-gradient(180deg, hsl(40 33% 96%) 0%, hsl(38 35% 90%) 100%);
    --gradient-stained-glass: linear-gradient(135deg, 
      hsla(220, 60%, 35%, 0.1) 0%, 
      hsla(38, 70%, 45%, 0.15) 25%, 
      hsla(150, 35%, 25%, 0.1) 50%,
      hsla(350, 45%, 35%, 0.1) 75%,
      hsla(220, 60%, 35%, 0.1) 100%
    );
    --gradient-candlelight: radial-gradient(ellipse at center, hsla(35, 90%, 70%, 0.3) 0%, transparent 70%);

    /* Shadows */
    --shadow-gold: 0 4px 20px -4px hsla(38, 70%, 45%, 0.4);
    --shadow-soft: 0 4px 30px -6px hsla(25, 30%, 15%, 0.15);
    --shadow-glow: 0 0 40px hsla(35, 90%, 70%, 0.25);

    /* Sidebar */
    --sidebar-background: 38 35% 90%;
    --sidebar-foreground: 25 30% 15%;
    --sidebar-primary: 38 70% 45%;
    --sidebar-primary-foreground: 40 33% 98%;
    --sidebar-accent: 150 35% 25%;
    --sidebar-accent-foreground: 40 33% 98%;
    --sidebar-border: 38 30% 80%;
    --sidebar-ring: 38 70% 45%;
  }

  .dark {
    --background: 25 25% 10%;
    --foreground: 40 30% 92%;

    --card: 25 22% 14%;
    --card-foreground: 40 30% 92%;

    --popover: 25 22% 14%;
    --popover-foreground: 40 30% 92%;

    --primary: 38 70% 50%;
    --primary-foreground: 25 30% 10%;

    --secondary: 150 30% 35%;
    --secondary-foreground: 40 30% 92%;

    --muted: 25 20% 20%;
    --muted-foreground: 38 25% 65%;

    --accent: 220 50% 50%;
    --accent-foreground: 40 30% 92%;

    --destructive: 0 50% 45%;
    --destructive-foreground: 40 30% 92%;

    --border: 25 20% 22%;
    --input: 25 20% 22%;
    --ring: 38 70% 50%;

    --sidebar-background: 25 22% 12%;
    --sidebar-foreground: 40 30% 92%;
  }
}

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

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

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

@layer components {
  .text-gradient-gold {
    background: linear-gradient(135deg, hsl(38 70% 50%) 0%, hsl(42 75% 65%) 50%, hsl(38 70% 45%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .border-gold-ornate {
    border-image: linear-gradient(135deg, hsl(38 70% 45%), hsl(42 75% 60%), hsl(38 70% 45%)) 1;
  }

  .bg-parchment-texture {
    background-color: hsl(var(--parchment));
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  }

  .glow-candle {
    box-shadow: 0 0 60px hsla(35, 90%, 70%, 0.3), 0 0 100px hsla(35, 90%, 70%, 0.15);
  }

  .stained-glass-overlay {
    background: var(--gradient-stained-glass);
  }

  .ornate-border {
    border: 2px solid transparent;
    background: 
      linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
      linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-light)), hsl(var(--gold))) border-box;
  }

  .flourish::before,
  .flourish::after {
    content: '❧';
    @apply text-primary/60 mx-4;
  }

  .decorative-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--gold)), transparent);
  }
}

@layer utilities {
  .animate-glow {
    animation: glow 3s ease-in-out infinite alternate;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 30px hsla(35, 90%, 70%, 0.2);
  }
  to {
    box-shadow: 0 0 60px hsla(35, 90%, 70%, 0.4);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsla(38, 70%, 55%, 0.3) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}