/* ── Theme tokens (ported from React app src/index.css) ── */
:root {
  --background: 0 0% 97%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 234 93% 17%;
  --primary-foreground: 0 0% 100%;
  --secondary: 357 86% 51%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 234 50% 96%;
  --accent-foreground: 234 93% 25%;
  --destructive: 357 86% 51%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 234 93% 17%;
  --radius: 0.75rem;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

/* ── Seller shell: Inter font + softer weights/shadows (ported) ── */
.seller-shell,
.seller-shell * {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.seller-shell h1,
.seller-shell h2,
.seller-shell h3 {
  font-weight: 600 !important;
}
.seller-shell .font-black,
.seller-shell .font-bold {
  font-weight: 600 !important;
}
.seller-shell .shadow-lg,
.seller-shell .shadow-xl {
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.06), 0 1px 3px 0 rgb(15 23 42 / 0.08) !important;
}
.seller-shell .rounded-3xl {
  border-radius: 1rem !important;
}

/* ── Utilities not in Tailwind core ── */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Route transition fade (replaces framer-motion) ── */
@keyframes yj-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.yj-fade {
  animation: yj-fade-in 0.18s ease-out;
}

/* iOS Safari: prevent input zoom on focus (font < 16px) */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Lucide icons default sizing (so data-lucide <i> behave like the React components) */
[data-lucide] {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 2;
  vertical-align: -0.125em;
}