/* أنماط مخصصة متناغمة مع هوية سَكينة وأَثَر */
:root {
  --color-olive-dark: #193228;
  --color-olive-primary: #2D4B3E;
  --color-gold: #C5A059;
  --color-sand-bg: #F8F6F0;
}

body {
  font-family: 'Tajawal', sans-serif;
  background-color: var(--color-sand-bg);
  -webkit-tap-highlight-color: transparent;
}

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

/* خلفية متدرجة تمنح الدفء والسكينة */
.bg-radial-glow {
  background: radial-gradient(circle at 50% 20%, rgba(197, 160, 89, 0.12) 0%, rgba(45, 75, 62, 0.05) 50%, transparent 80%);
}

/* رقاقات السياق التفاعلية */
.ctx-chip {
  background-color: rgba(255, 255, 255, 0.1);
  color: #E2DDD2;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ctx-chip.active {
  background-color: #D4AF37;
  color: #172D24;
  border-color: #D4AF37;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* شريط التبويبات السفلي */
.nav-btn.active {
  color: #2D4B3E;
}
.nav-btn.active .nav-icon {
  stroke-width: 2.5;
  color: #2D4B3E;
  filter: drop-shadow(0 2px 4px rgba(45, 75, 62, 0.25));
}

/* إخفاء شريط التمرير الأفقي مع بقاء التمرير */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* تأثير التموج عند لمس المسبحة */
.touch-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.35) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 80%);
  transform: scale(0);
  animation: rippleAnimation 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleAnimation {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* حركة التكبير الناعمة للمودال */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-scale-up {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* وضع السكينة الليلي (Dim mode) */
body.night-dim-active {
  background-color: #0F1C16 !important;
  color: #DDE5E0 !important;
}
body.night-dim-active header {
  background-color: rgba(15, 28, 22, 0.95) !important;
  border-color: #1F362C !important;
}
body.night-dim-active .bg-white\/80 {
  background-color: rgba(22, 40, 32, 0.85) !important;
  border-color: #254436 !important;
}
body.night-dim-active p, 
body.night-dim-active h1, 
body.night-dim-active h3, 
body.night-dim-active h4 {
  color: #E2EAE5 !important;
}
body.night-dim-active nav {
  background-color: rgba(15, 28, 22, 0.95) !important;
  border-color: #1F362C !important;
}

/* تحسين حجم الأزرار وملمس الضغط */
button:active {
  transform: scale(0.97);
}