:root {
  --bg: #14100e;
  --bg-soft: #1f1916;
  --card: #241d19;
  --ink: #f4ede5;
  --muted: #a89a8f;
  --pin: #ff2d55;
  --border: #3a2f28;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* dark atmospheric background texture */
.bg-pattern {
  background-color: #14100e;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 45, 85, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(255, 45, 85, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(120, 80, 200, 0.06) 0%, transparent 50%);
}

/* Masonry via CSS columns */
.masonry {
  column-count: 2;
  column-gap: 1rem;
}
@media (min-width: 640px) { .masonry { column-count: 3; } }
@media (min-width: 1024px) { .masonry { column-count: 4; } }
@media (min-width: 1280px) { .masonry { column-count: 5; } }

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

/* ---- DARK THEME OVERRIDES ---- */
/* Override the light hardcoded Tailwind arbitrary colors with dark equivalents */

/* backgrounds */
.bg-\[\#faf7f2\]\/80 { background-color: rgba(20, 16, 14, 0.8) !important; }
.bg-white { background-color: #241d19 !important; }
.bg-white\/90 { background-color: rgba(36, 29, 25, 0.9) !important; }
.bg-white\/70 { background-color: rgba(36, 29, 25, 0.7) !important; }
.bg-white\/50 { background-color: rgba(36, 29, 25, 0.5) !important; }
.bg-\[\#f0e9e2\] { background-color: #2c2420 !important; }
.hover\:bg-\[\#e5dbd1\]:hover { background-color: #3a2f28 !important; }
.bg-\[\#efe7df\] { background-color: #1c1613 !important; }
.bg-\[\#fff0f2\] { background-color: #2a1418 !important; }
.hover\:bg-\[\#fff7f3\]:hover { background-color: #2a1a17 !important; }

/* text colors */
.text-\[\#2b2320\] { color: #f4ede5 !important; }
.text-\[\#6b5f57\] { color: #cbbdb2 !important; }
.text-\[\#8a7d75\] { color: #a89a8f !important; }
.text-\[\#b3a89f\] { color: #8a7d72 !important; }

/* borders */
.border-\[\#e8ddd3\] { border-color: #3a2f28 !important; }
.border-\[\#f0e9e2\] { border-color: #3a2f28 !important; }
.border-\[\#d9cbbe\] { border-color: #4a3d34 !important; }
.border-white\/60 { border-color: rgba(255,255,255,0.08) !important; }

/* brighten the Pinterest-red accent for dark backgrounds */
.bg-\[\#e60023\] { background-color: #ff2d55 !important; }
.hover\:bg-\[\#c9001e\]:hover { background-color: #e0244a !important; }
.text-\[\#e60023\] { color: #ff5c7a !important; }
.hover\:text-\[\#e60023\]:hover { color: #ff5c7a !important; }
.hover\:bg-\[\#e60023\]:hover { background-color: #ff2d55 !important; }
.border-\[\#e60023\] { border-color: #ff2d55 !important; }
.focus\:border-\[\#e60023\]:focus { border-color: #ff2d55 !important; }
.hover\:border-\[\#e60023\]:hover { border-color: #ff2d55 !important; }
.shadow-\[\#e60023\]\/20 { --tw-shadow-color: rgba(255,45,85,0.25) !important; }

/* animations */
@keyframes toastPop {
  0% { transform: translate(-50%, 20px); opacity: 0; }
  15% { transform: translate(-50%, 0); opacity: 1; }
  85% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 10px); opacity: 0; }
}
.toast-pop { animation: toastPop 2.6s ease forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lb-fade { animation: fadeIn 0.2s ease; }

@keyframes modalPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-pop { animation: modalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes lbImg {
  from { transform: scale(0.96); opacity: 0.6; }
  to { transform: scale(1); opacity: 1; }
}
.lb-img { animation: lbImg 0.3s ease; }

/* dark scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1c1613; }
::-webkit-scrollbar-thumb { background: #4a3d34; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #ff2d55; }