/* Wedding Template Design System */
:root {
  /* Base colors - Wedding theme with romantic rose and gold */
  --background: 0 0% 100%;
  --foreground: 280 15% 25%;

  /* Color Palette (HSL) */
  --primary: 320 45% 55%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 320 50% 65%;
  --primary-dark: 320 40% 45%;

  --secondary: 40 30% 75%;
  --secondary-foreground: 280 15% 25%;
  --secondary-light: 40 35% 85%;

  --muted: 280 10% 96%;
  --muted-foreground: 280 8% 45%;

  --accent: 270 40% 92%;
  --accent-foreground: 280 15% 25%;

  --border: 280 10% 88%;
  --input: 280 10% 88%;
  --ring: 320 45% 55%;

  --radius: 0.75rem;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(320 45% 55%) 0%, hsl(270 50% 60%) 100%);
  --gradient-secondary: linear-gradient(135deg, hsl(40 30% 75%) 0%, hsl(320 30% 80%) 100%);
  --gradient-hero: linear-gradient(135deg, hsl(320 50% 50% / 0.95) 0%, hsl(270 50% 60% / 0.9) 100%);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(280 10% 98%) 100%);

  /* Shadows */
  --shadow-soft: 0 2px 8px hsla(280, 15%, 25%, 0.06);
  --shadow-medium: 0 4px 16px hsla(280, 15%, 25%, 0.1);
  --shadow-large: 0 8px 32px hsla(280, 15%, 25%, 0.15);
  --shadow-glow: 0 0 24px hsla(320, 45%, 55%, 0.2);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Custom Tailwind Config via CSS vars */
@layer base {
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
  }
}

/* Utilities */
.gradient-primary { background: var(--gradient-primary); }
.gradient-secondary { background: var(--gradient-secondary); }
.gradient-hero { background: var(--gradient-hero); }
.gradient-card { background: var(--gradient-card); }

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-large { box-shadow: var(--shadow-large); }
.shadow-glow { box-shadow: var(--shadow-glow); }

.transition-smooth { transition: var(--transition-smooth); }
.transition-bounce { transition: var(--transition-bounce); }

/* Custom Component Styles */
.hero-section {
  position: relative;
  height: 600px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-section {
    height: 700px;
  }
}