/* src/app/globals.css */
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme {
  --color-theme: #E53935;
  --color-theme-dark: #E53935;
  --font-sans: var(--font-iran), var(--font-geist-sans), system-ui;
}

@layer base {
  body {
    @apply bg-white text-gray-900 dark:bg-black dark:text-gray-100;
  }
}
@custom-variant dark (&:where(.dark, .dark *));
@layer utilities {
  .bg-theme { background-color: var(--color-theme); }
  .text-theme { color: var(--color-theme); }
  .border-theme { border-color: var(--color-theme); }
  .bg-glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
  }
  .dark .bg-glass {
    background: rgba(17, 17, 17, 0.8);
  }
  @layer utilities {
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #E53935;
      border-radius: 10px;
      transition: all 0.3s ease;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #c62828;
    }

    /* دارک مود */
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #1a1a1a;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #E53935;
    }
  }

}

/* src/app/globals.css - اضافه کن */

/* ===== اسکرول بار سفارشی ===== */

/* ===== مخفی کردن اسکرول بار ===== */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
/* src/app/globals.css */

/* ===== غیرفعال: content-visibility باعث کلیپ شدن مودال‌های fixed میشه ===== */
/* برای فعال‌سازی کامنت‌ها رو بردار */
/* body > *:not(header):not(footer):not(nav):not(.no-lazy) {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
main > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
section, article, .container > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
header, footer, nav {
  content-visibility: visible !important;
}
.no-lazy {
  content-visibility: visible !important;
} */