@import "tailwindcss";

@theme {
  --color-emerald-mosque: #0d7a3e;
  --color-emerald-dark: #095c2e;
  --color-emerald-light: #10b860;
  --color-gold: #c8a853;
  --color-gold-light: #e6cb7a;
  --color-gold-dark: #a88b3a;
  --color-dark: #1a1a2e;
  --color-dark-soft: #2d2d44;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  overscroll-behavior-y: contain;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(13, 122, 62, 0.3); }
  50% { box-shadow: 0 0 20px rgba(13, 122, 62, 0.6); }
}
.pulse-glow { animation: pulse-glow 2s infinite; }

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.islamic-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L35 15L45 15L37 22L40 32L30 26L20 32L23 22L15 15L25 15Z' fill='none' stroke='%23c8a85320' stroke-width='0.5'/%3E%3C/svg%3E");
}