@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* Fresh Modern Vibrant Palette */
  --color-brand-primary: #059669; /* Fresh Emerald */
  --color-brand-teal: #0d9488;    /* Radiant Teal */
  --color-brand-mint: #10b981;    /* Vibrant Mint */
  --color-brand-light: #ecfdf5;   /* Soft Mint Background */
  --color-gold: #f59e0b;          /* Modern Warm Gold */
  --color-gold-light: #fef3c7;    /* Pastel Gold */
  --color-dark: #0f172a;          /* Clean Modern Slate */
  --color-surface: #ffffff;
  --color-bg-fresh: #f8fafc;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1e293b;
  background-color: var(--color-bg-fresh);
  overflow-x: hidden;
}

.font-arabic {
  font-family: 'Amiri', serif;
}

/* Fresh Modern Gradient Banner */
.bg-gradient-fresh {
  background: linear-gradient(135deg, #047857 0%, #059669 40%, #0d9488 100%);
}

.bg-gradient-fresh-soft {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #f8fafc 100%);
}

/* 2D Flat Warm Gold Gradient */
.bg-gradient-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bg-gradient-gold:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.text-gradient-gold {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Modern 2D Card Styling */
.card-2d {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-2d:hover {
  border-color: #10b981;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1), 0 8px 10px -6px rgba(16, 185, 129, 0.05);
  transform: translateY(-3px);
}

/* 2D Featured VIP Card */
.card-2d-featured {
  background: linear-gradient(145deg, #065f46 0%, #047857 50%, #0d9488 100%);
  border: 2px solid #fbbf24;
  border-radius: 1.5rem;
  color: #ffffff;
  box-shadow: 0 15px 30px -5px rgba(5, 150, 105, 0.25);
}

/* Subtle Modern 2D Dot Grid Pattern */
.bg-2d-dots {
  background-image: radial-gradient(#10b981 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  background-color: transparent;
  opacity: 0.15;
}

/* Lightbox Modal Transition */
#flyer-lightbox-modal {
  transition: opacity 0.2s ease-in-out;
}

/* Custom Scrollbar Modern */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #059669;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
}