@tailwind base;
@tailwind components;
@tailwind utilities;

:root { color-scheme: light; }
.dark { color-scheme: dark; }

@layer base {
  html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
  body { @apply bg-[#f6f4ef] text-slate-800 antialiased dark:bg-slate-950 dark:text-slate-100 font-sans; }
  html[lang='bn'] body { @apply font-bn; }
}

@layer components {
  .container-x { @apply mx-auto w-full max-w-[1480px] px-4 sm:px-6 2xl:px-8; }
  .card { @apply rounded-md border border-slate-200/70 bg-white shadow-soft dark:border-slate-800 dark:bg-slate-900; }
  .btn { @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-semibold transition active:scale-[.97] disabled:cursor-not-allowed disabled:opacity-50; }
  .btn-primary { @apply btn bg-brand-600 text-white shadow-sm hover:bg-brand-700; }
  .btn-accent { @apply btn bg-ink-700 text-white shadow-sm hover:bg-ink-800; }
  .btn-ghost { @apply btn border border-slate-200 bg-white text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800; }
  .btn-danger { @apply btn bg-red-500 text-white hover:bg-red-600; }
  .input { @apply w-full rounded-md border border-slate-200 bg-white px-3.5 py-2.5 text-sm outline-none transition placeholder:text-slate-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 dark:border-slate-700 dark:bg-slate-900; }
  .label { @apply mb-1 block text-xs font-semibold text-slate-500 dark:text-slate-400; }
  .chip { @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold; }
  .h-section { @apply text-lg font-bold tracking-tight sm:text-xl; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pt-safe { padding-top: env(safe-area-inset-top); }

/* rich text (editor + public pages / product descriptions) */
.rich { line-height: 1.7; word-wrap: break-word; }
.rich > * + * { margin-top: .75em; }
.rich h2 { font-size: 1.35rem; font-weight: 800; line-height: 1.3; margin-top: 1.2em; }
.rich h3 { font-size: 1.12rem; font-weight: 700; margin-top: 1em; }
.rich h4 { font-weight: 700; }
.rich ul { list-style: disc; padding-left: 1.4rem; }
.rich ol { list-style: decimal; padding-left: 1.4rem; }
.rich li + li { margin-top: .25em; }
.rich a { color: #1b7a7e; text-decoration: underline; }
.rich blockquote { border-left: 4px solid #f58a1f; padding: .25rem 1rem; color: #64748b; background: rgba(245,138,31,.06); }
.rich img { max-width: 100%; height: auto; border-radius: .375rem; }
.rich hr { border: 0; border-top: 1px solid #cbd5e1; margin: 1.2em 0; }
.rich table { border-collapse: collapse; width: 100%; }
.rich th, .rich td { border: 1px solid #cbd5e1; padding: .4rem .6rem; text-align: left; }
.rich pre { background: #0f172a; color: #e2e8f0; padding: .75rem 1rem; border-radius: .375rem; overflow-x: auto; }
.rich p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: #94a3b8; float: left; height: 0; pointer-events: none; }
.rich:focus { outline: none; }