:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; }
[data-cloak] { display: none !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.scrollbar-soft { scrollbar-width: thin; scrollbar-color: rgba(17,17,17,.18) transparent; }
.scrollbar-soft::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-soft::-webkit-scrollbar-thumb { background: rgba(17,17,17,.18); border-radius: 999px; }
.product-image { transition: opacity .22s ease, transform .35s ease; }
.product-image.is-changing { opacity: .35; transform: scale(.985); }
.line-clamp-2x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.swatch { background: var(--swatch, #d8cdbf); }
.modal-open { overflow: hidden; }
.dragging { opacity: .55; }
.admin-table th { white-space: nowrap; }
.admin-table td { vertical-align: middle; }
@media (max-width: 767px) { body[data-area="public"] { padding-bottom: 84px; } }

/* Horizontal discovery sliders: touch-friendly on mobile and button-scrollable on desktop. */
.scroll-smooth { scroll-behavior: smooth; }
@media (hover: hover) {
  [data-slider-prev], [data-slider-next] { user-select: none; }
}

/* --------------------------------------------------------------------------
   Theme system — global light/dark visual parity
   The toggle is shared by public and admin layouts. The user's explicit choice
   is persisted in localStorage by assets/js/core/theme-init.js.
   -------------------------------------------------------------------------- */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0f100f; color: #f5f5f2; }
html.dark ::selection { background: rgba(80,183,104,.42); color: #fff; }

html.dark .bg-canvas { background-color: #0f100f !important; }
html.dark .bg-paper { background-color: #171817 !important; }
html.dark .bg-paper\/90 { background-color: rgba(23,24,23,.90) !important; }
html.dark .bg-sand-100 { background-color: #202220 !important; }
html.dark .bg-sand-200 { background-color: #2a2c2a !important; }
html.dark .bg-sand-300 { background-color: #393c39 !important; }
html.dark .bg-white { background-color: #1b1d1b !important; }
html.dark .bg-white\/90 { background-color: rgba(27,29,27,.90) !important; }
html.dark .bg-white\/95 { background-color: rgba(27,29,27,.95) !important; }

html.dark .text-ink { color: #f5f5f2 !important; }
html.dark .text-ink-900 { color: #f5f5f2 !important; }
html.dark .text-ink-800 { color: #eceee9 !important; }
html.dark .text-ink-700 { color: #d9dcd6 !important; }
html.dark .text-ink-600 { color: #c3c6c0 !important; }
html.dark .text-ink-500 { color: #a4a8a1 !important; }
html.dark .text-ink-400 { color: #898e87 !important; }

html.dark .border-ink\/10 { border-color: rgba(255,255,255,.10) !important; }
html.dark .border-ink\/20 { border-color: rgba(255,255,255,.18) !important; }
html.dark .ring-ink\/10 { --tw-ring-color: rgba(255,255,255,.10) !important; }
html.dark .divide-ink\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,.10) !important; }

html.dark .bg-brand-50 { background-color: rgba(80,183,104,.10) !important; }
html.dark .bg-brand-100 { background-color: rgba(80,183,104,.18) !important; }
html.dark .text-brand-700 { color: #8edca5 !important; }
html.dark .bg-amber-50 { background-color: rgba(217,157,61,.11) !important; }
html.dark .bg-amber-100 { background-color: rgba(217,157,61,.16) !important; }
html.dark .bg-red-50 { background-color: rgba(215,92,92,.11) !important; }
html.dark .bg-red-100 { background-color: rgba(215,92,92,.16) !important; }

html.dark .hover\:bg-sand-100:hover { background-color: #252725 !important; }
html.dark .hover\:bg-white:hover { background-color: #232523 !important; }
html.dark .hover\:text-ink:hover { color: #ffffff !important; }
html.dark .focus\:bg-white:focus { background-color: #1b1d1b !important; }
html.dark input,
html.dark select,
html.dark textarea { color: #f5f5f2; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #898e87; }
html.dark option { background-color: #1b1d1b; color: #f5f5f2; }

html.dark .shadow-soft { box-shadow: 0 18px 60px rgba(0,0,0,.32) !important; }
html.dark .shadow-lift { box-shadow: 0 12px 30px rgba(0,0,0,.42) !important; }

[data-theme-toggle] i { transition: transform .22s ease, opacity .22s ease; }
[data-theme-toggle]:active i { transform: rotate(18deg) scale(.92); }