/* ──────────────────────────────────────────────────────────────────────
   Sokchad.com — global UI polish layer.
   Subtle, non-destructive enhancements: smoother shadows, refined hover
   states, slightly tighter typography, improved scrollbars.
   Layered AFTER the React app's stylesheet so it can elegantly override
   without requiring any structural changes.
   ────────────────────────────────────────────────────────────────────── */

/* ── Smoother global font rendering ────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-feature-settings: "kern" 1, "liga" 1; }

/* ── Refined scrollbars (dark theme) ───────────────────────────────── */
html.theme-dark *::-webkit-scrollbar { width: 10px; height: 10px; }
html.theme-dark *::-webkit-scrollbar-track { background: transparent; }
html.theme-dark *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
html.theme-dark *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: padding-box; }

/* ── Smoother card / button hover lift ─────────────────────────────── */
a[href^="/product/"] {
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}
a[href^="/product/"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55), 0 6px 14px -8px rgba(99,102,241,0.25);
}

/* Buttons — make primary buttons feel a touch more premium without
   touching their colors (the React theme decides those). */
button, .btn, a[role="button"] {
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}
button:hover:not(:disabled), .btn:hover:not(:disabled), a[role="button"]:hover {
  filter: brightness(1.05);
}
button:active:not(:disabled), .btn:active:not(:disabled), a[role="button"]:active {
  transform: translateY(1px);
}

/* ── Image polish — gentle rounding fallback for raw <img> in cards ── */
.group.rounded-xl img,
a[href^="/product/"] img,
a[href^="/article/"] img,
a[href^="/blog/"] img {
  transition: transform .35s ease, filter .35s ease;
}
.group.rounded-xl:hover img,
a[href^="/product/"]:hover img,
a[href^="/article/"]:hover img,
a[href^="/blog/"]:hover img {
  transform: scale(1.03);
}

/* ── Focus rings: keyboard-friendly without harsh outlines ─────────── */
:focus-visible {
  outline: 2px solid rgba(99,102,241,.6);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Subtle gradient sheen behind hero / page titles ───────────────── */
h1, .page-title {
  letter-spacing: -0.012em;
}

/* ── Selection color matches brand ─────────────────────────────────── */
::selection { background: rgba(99,102,241,.35); color: #fff; }

/* ── Soften every shadow that's already declared inline (a no-op when
       nothing matches; a small refinement when it does) ──────────────── */
[style*="box-shadow"] { transition: box-shadow .25s ease; }

/* ── Smooth out the mobile bottom-nav / floating bubbles when present  */
.fixed.bottom-6.right-6, #sokchad-tg-btn {
  transition: transform .2s ease, box-shadow .25s ease;
}
.fixed.bottom-6.right-6:hover, #sokchad-tg-btn:hover {
  transform: translateY(-2px);
}

/* ── Softer dividers everywhere ────────────────────────────────────── */
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
html.theme-light hr { background: linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent); }

/* ── Tiny improvement: smooth anchor scrolling ─────────────────────── */
html { scroll-behavior: smooth; }

/* ── Reduced motion: respect user preference ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}