/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Cinzel:wght@400;600;700&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* Default: theme-sage */
  --bg-color: #fafaf9;
  --fg-color: #292524;
  
  --sage-50: #f4f7f4;
  --sage-100: #e3ebe3;
  --sage-200: #c6d6c6;
  --sage-300: #9cb89c;
  --sage-400: #749674;
  --sage-500: #557855;
  --sage-600: #415e41;
  --sage-700: #354a35;
  --sage-800: #2c3e2c;
  --sage-900: #253325;
  
  --gold-400: #d4af37;
  --gold-500: #aa8c2c;
  --gold-600: #917522;
  
  --pattern-opacity: 0.05;
}

[data-theme="theme-navy"] {
  --bg-color: #f8fafc;
  --fg-color: #0f172a;
  
  --sage-50: #f1f5f9;
  --sage-100: #e2e8f0;
  --sage-200: #cbd5e1;
  --sage-300: #94a3b8;
  --sage-400: #64748b;
  --sage-500: #475569;
  --sage-600: #334155;
  --sage-700: #1e293b;
  --sage-800: #0f172a;
  --sage-900: #020617;
  
  --gold-400: #94a3b8;
  --gold-500: #64748b;
  --gold-600: #475569;
  
  --pattern-opacity: 0.03;
}

[data-theme="theme-blush"] {
  --bg-color: #fff1f2;
  --fg-color: #4c0519;
  
  --sage-50: #ffe4e6;
  --sage-100: #fecdd3;
  --sage-200: #fda4af;
  --sage-300: #fb7185;
  --sage-400: #f43f5e;
  --sage-500: #e11d48;
  --sage-600: #be123c;
  --sage-700: #9f1239;
  --sage-800: #881337;
  --sage-900: #4c0519;
  
  --gold-400: #e8b4b8;
  --gold-500: #c98a8e;
  --gold-600: #a76d71;
  
  --pattern-opacity: 0.06;
}

[data-theme="theme-monochrome"] {
  --bg-color: #ffffff; 
  --fg-color: #000000;
  
  --sage-50: #f4f4f5;
  --sage-100: #e4e4e7;
  --sage-200: #d4d4d8;
  --sage-300: #a1a1aa;
  --sage-400: #71717a;
  --sage-500: #52525b;
  --sage-600: #3f3f46;
  --sage-700: #27272a;
  --sage-800: #18181b;
  --sage-900: #09090b;
  
  --gold-400: #52525b;
  --gold-500: #27272a;
  --gold-600: #18181b;
  
  --pattern-opacity: 0.02;
}

body {
  background-color: var(--bg-color);
  color: var(--fg-color);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

.font-script {
  font-family: 'Great Vibes', cursive;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: var(--sage-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sage-400);
}

/* Animations */
@keyframes floatUp {
  0% {
    transform: translateY(105vh) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-10vh) rotate(360deg);
    opacity: 0;
  }
}

.animate-float {
  animation: floatUp linear infinite;
}

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

.shimmer-gold {
  background: linear-gradient(90deg, #d4af37 0%, #fff2b2 50%, #d4af37 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Islamic arabesque pattern */
.bg-islamic-pattern {
  background-image: radial-gradient(#c9a84c 0.75px, transparent 0.75px), radial-gradient(#c9a84c 0.75px, #042416 0.75px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}