/* ── 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;
}

/* ── Animations ported from React app src/index.css ── */
@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes kenburnsA {
  0%   { transform: scale(1)    translate(0%, 0%); }
  50%  { transform: scale(1.12) translate(-2%, -2%); }
  100% { transform: scale(1.18) translate(-4%, 2%); }
}
@keyframes kenburnsB {
  0%   { transform: scale(1.18) translate(3%, -3%); }
  50%  { transform: scale(1.1)  translate(0%, 0%); }
  100% { transform: scale(1)    translate(-3%, 3%); }
}
@keyframes kenburnsC {
  0%   { transform: scale(1.05) translate(-3%, 3%); }
  100% { transform: scale(1.22) translate(3%, -3%); }
}
@keyframes kenburnsD {
  0%   { transform: scale(1.2)  translate(2%, 2%) rotate(0.3deg); }
  100% { transform: scale(1)    translate(-2%, -2%) rotate(-0.3deg); }
}
@keyframes shineSweep {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(250%); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,25,35,0.55), 0 4px 14px rgba(238,25,35,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(238,25,35,0), 0 6px 20px rgba(238,25,35,0.6); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes yjAiWiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  10%      { transform: rotate(-7deg) translateY(-3px); }
  25%      { transform: rotate(6deg) translateY(0); }
  40%      { transform: rotate(-4deg) translateY(-2px); }
  55%      { transform: rotate(4deg) translateY(0); }
  70%      { transform: rotate(-2deg) translateY(-1px); }
  85%      { transform: rotate(2deg) translateY(0); }
}
.yj-ai-wiggle {
  transform-origin: 50% 85%;
  animation: yjAiWiggle 2.8s ease-in-out infinite;
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}