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





html, body {
  overscroll-behavior: none;
}

:root {
  --color-bg: 252 248 244;        /* ivory */
  --color-primary: 164 86 104;    /* deep rose */
  --color-secondary: 184 150 98;  /* champagne gold */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

body {
  font-family: 'Tajawal', system-ui, sans-serif;
  color: #2A2326;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Amiri', 'Tajawal', serif; }
.font-brand { font-family: 'Cormorant Garamond', 'Amiri', serif; letter-spacing: 0.18em; }

.bg-silk {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(240, 205, 208, 0.55), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(234, 216, 186, 0.45), transparent 60%),
    rgb(252 248 244);
}

.gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(184 150 98), transparent);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.8s cubic-bezier(.2,.7,.2,1) both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .3s; } .d4 { animation-delay: .42s; } .d5 { animation-delay: .55s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn .45s ease both; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, #f3e9e4 0px, #fbf4f0 120px, #f3e9e4 240px);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes slowzoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.slowzoom { animation: slowzoom 2.4s cubic-bezier(.2,.7,.2,1) both; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

.btn-primary {
  @apply inline-flex items-center justify-center gap-2 rounded-full bg-primary text-white font-bold px-6 h-12 transition-all duration-300 hover:shadow-[0_10px_30px_-10px_rgba(164,86,104,0.7)] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none;
}
.btn-ghost {
  @apply inline-flex items-center justify-center gap-2 rounded-full border border-[#2A2326]/15 bg-white/70 text-[#2A2326] font-bold px-6 h-12 transition-all duration-300 hover:border-primary hover:text-primary active:scale-[0.98] disabled:opacity-50;
}
.btn-dark {
  @apply inline-flex items-center justify-center gap-2 rounded-full bg-[#2A2326] text-white font-bold px-6 h-12 transition-all duration-300 hover:bg-black hover:-translate-y-0.5 active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none;
}
.input {
  @apply w-full h-12 rounded-2xl border border-[#2A2326]/10 bg-white px-4 text-[15px] outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10;
}
.label { @apply block text-sm font-bold text-[#2A2326]/80 mb-1.5; }
.card { @apply rounded-3xl bg-white border border-[#2A2326]/[0.06] shadow-[0_10px_40px_-24px_rgba(90,50,60,0.35)]; }