@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --background: 0 0% 99%;
  --foreground: 220 20% 10%;
  --card: 0 0% 100%;
  --card-foreground: 220 20% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 10%;
  --primary: 330 78% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 213 63% 42%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 10% 46%;
  --accent: 30 30% 96%;
  --accent-foreground: 220 20% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 330 78% 45%;
  --radius: 0.5rem;
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --shadow-card: 0 1px 3px 0 hsl(220 20% 10% / 0.04), 0 1px 2px -1px hsl(220 20% 10% / 0.04);
  --shadow-card-hover: 0 10px 25px -5px hsl(220 20% 10% / 0.08), 0 8px 10px -6px hsl(220 20% 10% / 0.04);
  --shadow-elevated: 0 20px 40px -10px hsl(330 78% 45% / 0.15);
}

/* Optional dark mode (if you add `class="dark"` on html/body) */
.dark{
  --background: 222 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 330 78% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 213 63% 50%;
  --secondary-foreground: 0 0% 100%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 33% 17%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;
  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 330 78% 50%;
}

html, body{ height: 100%; }
body{
  font-family: var(--font-body);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); }

/* Layout helpers used by the Lovable theme */
.container-main{ max-width: 80rem; margin-left: auto; margin-right: auto; }

.section-padding{ padding: 4rem 1rem; }
@media (min-width: 640px){ .section-padding{ padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px){ .section-padding{ padding-left: 2rem; padding-right: 2rem; padding-top: 6rem; padding-bottom: 6rem; } }

/* Product card hover feel */
.card-product{
  border-radius: 0.5rem;
  overflow: hidden;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.card-product:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* Simple fade-in (replaces tailwindcss-animate's `animate-fade-in`) */
@keyframes fade_in{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform: translateY(0);} }
.animate-fade-in{ animation: fade_in 600ms ease both; }

/* Basic prose reset for Frappe containers */
.webshop-page a{ text-decoration: none; }