/* 
 * Buggy Members Club Premium Design System
 * Agent 5: Premium UI/UX Development
 * Luxury family community platform for high-net-worth families
 */

/* CSS Custom Properties - Premium Design System */
:root {
  /* Premium Color Palette */
  --primary-navy: #1e40af;
  --secondary-navy: #1e3a8a;
  --soft-navy: rgba(30, 64, 175, 0.1);
  
  --luxury-gold: #d97706;
  --warm-gold: #f59e0b;
  --soft-gold: rgba(217, 119, 6, 0.1);
  
  --elite-purple: #7c3aed;
  --royal-purple: #6d28d9;
  --soft-purple: rgba(124, 58, 237, 0.1);
  
  --prosperity-emerald: #059669;
  --forest-emerald: #047857;
  --soft-emerald: rgba(5, 150, 105, 0.1);
  
  /* Neutral Palette */
  --pure-white: #ffffff;
  --soft-white: #fefefe;
  --pearl-white: #f8fafc;
  --light-gray: #e2e8f0;
  --warm-gray: #64748b;
  --charcoal: #334155;
  --deep-charcoal: #1e293b;
  
  /* Typography */
  --font-elegant: 'Playfair Display', 'Georgia', serif;
  --font-modern: 'Inter', 'Helvetica Neue', sans-serif;
  --font-accent: 'Montserrat', 'Arial', sans-serif;
  
  /* Spacing System */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.15);
  --shadow-premium: 0 12px 40px rgba(30, 64, 175, 0.15);
  
  /* Transitions */
  --transition-quick: all 0.2s ease;
  --transition-smooth: all 0.3s ease;
  --transition-elegant: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Premium Gradients */
  --gradient-premium: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
  --gradient-luxury: linear-gradient(135deg, var(--luxury-gold) 0%, var(--warm-gold) 100%);
  --gradient-elite: linear-gradient(135deg, var(--elite-purple) 0%, var(--royal-purple) 100%);
  --gradient-platinum: linear-gradient(135deg, var(--charcoal) 0%, var(--deep-charcoal) 100%);
  --gradient-soft: linear-gradient(135deg, var(--pure-white) 0%, var(--pearl-white) 100%);
}

/* Base Typography */
.premium-heading {
  font-family: var(--font-elegant);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
}

.premium-heading.h1, .premium-heading-1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-lg);
}

.premium-heading.h2, .premium-heading-2 {
  font-size: 2rem;
  margin-bottom: var(--space-lg);
}

.premium-heading.h3, .premium-heading-3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.premium-text {
  font-family: var(--font-modern);
  color: var(--charcoal);
  line-height: 1.6;
}

.premium-text-muted {
  color: var(--warm-gray);
}

.premium-text-accent {
  font-family: var(--font-accent);
  font-weight: 500;
}

/* Premium Buttons */
.btn-premium-primary {
  background: var(--gradient-premium);
  border: none;
  color: var(--pure-white);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-elegant);
  box-shadow: var(--shadow-soft);
}

.btn-premium-primary:hover {
  background: var(--gradient-premium);
  color: var(--pure-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium);
}

.btn-premium-outline {
  background: transparent;
  border: 2px solid var(--primary-navy);
  color: var(--primary-navy);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-elegant);
}

.btn-premium-outline:hover {
  background: var(--primary-navy);
  color: var(--pure-white);
  border-color: var(--primary-navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn-premium-luxury {
  background: var(--gradient-luxury);
  border: none;
  color: var(--pure-white);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-elegant);
  box-shadow: var(--shadow-soft);
}

.btn-premium-luxury:hover {
  background: var(--gradient-luxury);
  color: var(--pure-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(217, 119, 6, 0.3);
}

.btn-premium-elite {
  background: var(--gradient-elite);
  border: none;
  color: var(--pure-white);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-elegant);
  box-shadow: var(--shadow-soft);
}

.btn-premium-elite:hover {
  background: var(--gradient-elite);
  color: var(--pure-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
}

/* Premium Cards */
.premium-card {
  background: var(--pure-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(30, 64, 175, 0.1);
  transition: var(--transition-smooth);
  overflow: hidden;
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}

.premium-card-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--light-gray);
  background: var(--gradient-soft);
}

.premium-card-body {
  padding: var(--space-lg);
}

.premium-card-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--light-gray);
  background: var(--pearl-white);
}

/* Tier-Specific Styling */
.tier-club {
  border-left: 4px solid var(--primary-navy);
}

.tier-elite {
  border-left: 4px solid var(--elite-purple);
}

.tier-platinum {
  border-left: 4px solid var(--luxury-gold);
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-badge.club {
  background: var(--soft-navy);
  color: var(--primary-navy);
}

.tier-badge.elite {
  background: var(--soft-purple);
  color: var(--elite-purple);
}

.tier-badge.platinum {
  background: var(--soft-gold);
  color: var(--luxury-gold);
}

/* Premium Forms */
.premium-form-control {
  border: 2px solid var(--light-gray);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-modern);
  transition: var(--transition-quick);
  background: var(--pure-white);
}

.premium-form-control:focus {
  border-color: var(--primary-navy);
  box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25);
  outline: none;
}

.premium-form-label {
  font-family: var(--font-accent);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.875rem;
}

/* Premium Tables */
.premium-table {
  width: 100%;
  background: var(--pure-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.premium-table th {
  background: var(--gradient-soft);
  padding: var(--space-md);
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--charcoal);
  border-bottom: 2px solid var(--light-gray);
}

.premium-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--light-gray);
  color: var(--charcoal);
}

.premium-table tbody tr:hover {
  background: var(--pearl-white);
}

/* Premium Navigation */
.premium-nav {
  background: var(--pure-white);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

.premium-nav-item {
  border-radius: var(--radius-md);
  transition: var(--transition-quick);
}

.premium-nav-link {
  color: var(--warm-gray);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  font-family: var(--font-accent);
  font-weight: 500;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  transition: var(--transition-quick);
}

.premium-nav-link:hover,
.premium-nav-link.active {
  background: var(--soft-navy);
  color: var(--primary-navy);
}

.premium-nav-link i {
  margin-right: var(--space-sm);
  width: 20px;
  text-align: center;
}

/* Premium Modals */
.premium-modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
}

.premium-modal-header {
  background: var(--gradient-soft);
  border-bottom: 1px solid var(--light-gray);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-lg);
}

.premium-modal-title {
  font-family: var(--font-elegant);
  font-weight: 600;
  color: var(--charcoal);
}

.premium-modal-body {
  padding: var(--space-lg);
}

.premium-modal-footer {
  border-top: 1px solid var(--light-gray);
  padding: var(--space-lg);
  background: var(--pearl-white);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Premium Badges & Tags */
.premium-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.premium-badge.primary {
  background: var(--soft-navy);
  color: var(--primary-navy);
}

.premium-badge.success {
  background: var(--soft-emerald);
  color: var(--prosperity-emerald);
}

.premium-badge.warning {
  background: var(--soft-gold);
  color: var(--luxury-gold);
}

.premium-badge.premium {
  background: var(--soft-purple);
  color: var(--elite-purple);
}

/* Premium Loading States */
.premium-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--light-gray);
  border-radius: 50%;
  border-top-color: var(--primary-navy);
  animation: premium-spin 1s ease-in-out infinite;
}

@keyframes premium-spin {
  to { transform: rotate(360deg); }
}

.premium-skeleton {
  background: linear-gradient(90deg, var(--light-gray) 25%, var(--pearl-white) 50%, var(--light-gray) 75%);
  background-size: 200% 100%;
  animation: premium-skeleton 1.5s infinite;
  border-radius: var(--radius-md);
}

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

/* Premium Alerts */
.premium-alert {
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-modern);
  box-shadow: var(--shadow-soft);
}

.premium-alert.primary {
  background: var(--soft-navy);
  color: var(--primary-navy);
  border-left: 4px solid var(--primary-navy);
}

.premium-alert.success {
  background: var(--soft-emerald);
  color: var(--prosperity-emerald);
  border-left: 4px solid var(--prosperity-emerald);
}

.premium-alert.warning {
  background: var(--soft-gold);
  color: var(--luxury-gold);
  border-left: 4px solid var(--luxury-gold);
}

.premium-alert.premium {
  background: var(--soft-purple);
  color: var(--elite-purple);
  border-left: 4px solid var(--elite-purple);
}

/* Premium Utility Classes */
.premium-shadow-soft { box-shadow: var(--shadow-soft); }
.premium-shadow-medium { box-shadow: var(--shadow-medium); }
.premium-shadow-strong { box-shadow: var(--shadow-strong); }
.premium-shadow-premium { box-shadow: var(--shadow-premium); }

.premium-border-radius { border-radius: var(--radius-md); }
.premium-border-radius-lg { border-radius: var(--radius-lg); }
.premium-border-radius-xl { border-radius: var(--radius-xl); }

.premium-transition { transition: var(--transition-smooth); }
.premium-transition-quick { transition: var(--transition-quick); }
.premium-transition-elegant { transition: var(--transition-elegant); }

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --space-xs: 0.2rem;
    --space-sm: 0.4rem;
    --space-md: 0.8rem;
    --space-lg: 1.2rem;
    --space-xl: 1.6rem;
    --space-xxl: 2.4rem;
  }
  
  .premium-heading.h1, .premium-heading-1 {
    font-size: 2rem;
  }
  
  .premium-heading.h2, .premium-heading-2 {
    font-size: 1.5rem;
  }
  
  .premium-card-header,
  .premium-card-body,
  .premium-card-footer {
    padding: var(--space-md);
  }
  
  .premium-modal-header,
  .premium-modal-body,
  .premium-modal-footer {
    padding: var(--space-md);
  }
}

/* Premium Experience Body Class */
.premium-experience {
  font-family: var(--font-modern);
  background: var(--pearl-white);
  color: var(--charcoal);
}

.premium-experience h1, 
.premium-experience h2, 
.premium-experience h3, 
.premium-experience h4, 
.premium-experience h5, 
.premium-experience h6 {
  font-family: var(--font-elegant);
}

/* Print Styles */
@media print {
  .premium-card,
  .premium-modal-content,
  .premium-alert {
    box-shadow: none !important;
    border: 1px solid var(--light-gray) !important;
  }
  
  .btn-premium-primary,
  .btn-premium-luxury,
  .btn-premium-elite {
    background: var(--charcoal) !important;
    color: var(--pure-white) !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --primary-navy: #000080;
    --luxury-gold: #cc6600;
    --elite-purple: #4b0082;
    --prosperity-emerald: #006400;
    --charcoal: #000000;
    --warm-gray: #333333;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}