/* ==========================================================================
   CSS Custom Properties - Golden & White Luxury Wedding Theme
   Molecular Bar Setup Delhi
   ========================================================================== */

:root {
  /* Primary Colors */
  --color-gold: #C9A84C;
  --color-gold-light: #E8D48B;
  --color-white: #FFFFFF;
  --color-cream: #FDF8F0;
  --color-charcoal: #2D2D2D;
  --color-warm-gray: #6B6B6B;
  --color-champagne: #F7E7CE;
  --color-rose-gold: #B76E79;
  --color-dark: #1A1A1A;

  /* Gradient Combinations */
  --gradient-primary: linear-gradient(135deg, #C9A84C, #E8D48B);
  --gradient-hero: linear-gradient(135deg, #FDF8F0 0%, #F7E7CE 50%, #FFFFFF 100%);
  --gradient-cta: linear-gradient(135deg, #C9A84C, #E8D48B, #C9A84C);
  --gradient-dark: linear-gradient(180deg, #1A1A1A 0%, #2D2D2D 100%);
  --gradient-stats: linear-gradient(135deg, #C9A84C 0%, #E8D48B 50%, #C9A84C 100%);

  /* Card Styles */
  --card-bg: #FFFFFF;
  --card-border: rgba(201, 168, 76, 0.2);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 15px 40px rgba(201, 168, 76, 0.15);

  /* Typography */
  --font-primary: 'Cormorant Garamond', serif;
  --font-secondary: 'Lato', sans-serif;
  --font-accent: 'Playfair Display', serif;
  --font-nav: 'Montserrat', sans-serif;

  /* Spacing */
  --section-padding: 80px 0;
  --section-padding-mobile: 50px 0;
  --container-max: 1200px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-elegant: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-gold: 0 4px 15px rgba(201, 168, 76, 0.4);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);

  /* Z-Index Scale */
  --z-floating-buttons: 1000;
  --z-navbar: 1050;
  --z-modal: 1100;
  --z-back-to-top: 999;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 50%;
  --radius-pill: 30px;
}