@import "tailwindcss";

/* =================================================================
   JANNAATH MUSLIM MATRIMONIAL - CUSTOM STYLES & ISLAMIC DESIGN SYSTEM
   ================================================================= */

@layer base {
  :root {
    --color-emerald-deep: #022c22;
    --color-emerald-main: #064e3b;
    --color-emerald-accent: #047857;
    --color-gold-light: #fef3c7;
    --color-gold-main: #d97706;
    --color-gold-dark: #b45309;
  }

  body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    overflow-x: hidden;
  }
}

/* Islamic Geometric Subtle Background Pattern */
.islamic-pattern-bg {
  background-color: #f8fafc;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.islamic-pattern-light {
  background-image: radial-gradient(rgba(6, 78, 59, 0.08) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Luxury Gold Accent Shimmer Gradient */
.gold-gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-border-glow {
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.25);
  border-color: rgba(217, 119, 6, 0.4);
}

.gold-badge {
  background: linear-gradient(135deg, #fffbe3 0%, #fef3c7 100%);
  border: 1px solid #f59e0b;
  color: #92400e;
}

/* Wali Verified Badge Animation */
.wali-badge {
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  box-shadow: 0 2px 10px rgba(4, 120, 87, 0.3);
}

.wali-badge-glow {
  animation: pulse-glow 2.5s infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(4, 120, 87, 0);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #047857;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #064e3b;
}