/* ============================================================
   Storefront Theme System
   Controlled from Admin Panel > Site Settings
   ============================================================ */

/* ---------- Base page ---------- */

.theme-body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

.theme-surface {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ---------- Header ---------- */

.theme-header {
  background-color: var(--color-header-bg) !important;
  color: var(--color-header-text) !important;
  border-color: var(--color-border) !important;
}

.theme-header a,
.theme-header button,
.theme-header svg {
  color: inherit;
}

.theme-header input,
.theme-header select,
.theme-header textarea {
  color: var(--color-text) !important;
}

/* ---------- Footer ---------- */

.theme-footer {
  background-color: var(--color-footer-bg) !important;
  color: var(--color-footer-text) !important;
}

.theme-footer-modern {
  border-top: 1px solid color-mix(in srgb, var(--color-footer-text, #334155) 14%, transparent) !important;
}

.theme-footer a,
.theme-footer button,
.theme-footer p,
.theme-footer span,
.theme-footer h1,
.theme-footer h2,
.theme-footer h3,
.theme-footer h4,
.theme-footer h5,
.theme-footer h6,
.theme-footer li,
.theme-footer svg {
  color: inherit;
}

.theme-footer-title {
  color: var(--color-footer-text) !important;
}

.theme-footer-muted {
  color: color-mix(in srgb, var(--color-footer-text, #334155) 72%, transparent) !important;
}

.theme-footer-link {
  color: color-mix(in srgb, var(--color-footer-text, #334155) 78%, transparent) !important;
  text-decoration-color: transparent !important;
}

.theme-footer-link:hover,
.theme-footer-link:focus-visible {
  color: var(--color-link, var(--color-primary, #4f46e5)) !important;
  text-decoration-color: currentColor !important;
}

.theme-footer-divider {
  border-color: color-mix(in srgb, var(--color-footer-text, #334155) 16%, transparent) !important;
}

.theme-footer-focus-offset {
  --tw-ring-offset-color: var(--color-footer-bg, #eef2ff) !important;
}

.theme-footer-social-link {
  background-color: color-mix(in srgb, var(--color-footer-text, #334155) 11%, transparent) !important;
  color: var(--color-footer-text, #334155) !important;
  border: 1px solid color-mix(in srgb, var(--color-footer-text, #334155) 14%, transparent) !important;
}

.theme-footer-social-link:hover,
.theme-footer-social-link:focus-visible {
  background-color: var(--color-primary, #4f46e5) !important;
  border-color: var(--color-primary, #4f46e5) !important;
  color: var(--color-button-text, #ffffff) !important;
  transform: translateY(-1px);
}

.theme-footer-social-facebook:hover,
.theme-footer-social-facebook:focus-visible {
  background-color: color-mix(in srgb, var(--color-primary, #4f46e5) 74%, #1877f2 26%) !important;
  border-color: color-mix(in srgb, var(--color-primary, #4f46e5) 74%, #1877f2 26%) !important;
}

.theme-footer-social-twitter:hover,
.theme-footer-social-twitter:focus-visible {
  background-color: color-mix(in srgb, var(--color-primary, #4f46e5) 74%, #0f172a 26%) !important;
  border-color: color-mix(in srgb, var(--color-primary, #4f46e5) 74%, #0f172a 26%) !important;
}

.theme-footer-social-instagram:hover,
.theme-footer-social-instagram:focus-visible {
  background-color: color-mix(in srgb, var(--color-primary, #4f46e5) 72%, #e1306c 28%) !important;
  border-color: color-mix(in srgb, var(--color-primary, #4f46e5) 72%, #e1306c 28%) !important;
}

.theme-footer-logo {
  filter: none;
}

/* ---------- Buttons ---------- */

.theme-button-primary,
.btn-primary,
button.bg-primary,
a.bg-primary,
input[type="submit"].bg-primary {
  background-color: var(--color-button-bg) !important;
  color: var(--color-button-text) !important;
  border-color: var(--color-button-bg) !important;
}

.theme-button-primary:hover,
.btn-primary:hover,
button.bg-primary:hover,
a.bg-primary:hover,
input[type="submit"].bg-primary:hover {
  background-color: var(--color-button-hover) !important;
  color: var(--color-button-text) !important;
  border-color: var(--color-button-hover) !important;
}

/* ---------- Primary accents ---------- */

.theme-primary-soft {
  background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface) 88%) !important;
  color: var(--color-primary) !important;
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border) 76%) !important;
}

.theme-primary-bg {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

.theme-primary-border {
  border-color: var(--color-primary) !important;
}

.theme-icon-button {
  background-color: color-mix(in srgb, var(--color-surface) 86%, var(--color-muted-text) 14%) !important;
  color: var(--color-muted-text) !important;
}

.theme-icon-button:hover {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.theme-header .theme-icon-button {
  background-color: color-mix(in srgb, var(--color-header-text) 10%, transparent) !important;
  color: var(--color-header-text) !important;
}

.theme-header .theme-icon-button:hover {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.theme-search-input {
  background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-muted-text) 12%) !important;
  color: var(--color-text) !important;
  border-color: transparent !important;
}

.theme-search-input:focus {
  background-color: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
}

.theme-dropdown-item {
  color: var(--color-text) !important;
}

.theme-dropdown-item:hover {
  background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface) 92%) !important;
  color: var(--color-primary) !important;
}

.theme-dropdown-item-danger {
  color: var(--color-error) !important;
}

.theme-dropdown-item-danger:hover {
  background-color: color-mix(in srgb, var(--color-error) 10%, var(--color-surface) 90%) !important;
  color: var(--color-error) !important;
}

.theme-menu-primary-link {
  color: var(--color-primary) !important;
}

.theme-menu-primary-link:hover {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary-hover) !important;
}

.theme-overlay-backdrop {
  background-color: color-mix(in srgb, var(--color-text) 36%, transparent) !important;
}

/* ---------- Links ---------- */

.theme-link,
a.text-primary {
  color: var(--color-link) !important;
}

a:hover {
  color: var(--color-primary-hover);
}

/* ---------- Cards, dropdowns, panels ---------- */

.theme-card,
.hs-dropdown-menu,
.cart-drawer-panel {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ---------- Forms ---------- */

input,
textarea,
select {
  border-color: var(--color-border);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

/* ---------- Borders ---------- */

.theme-border,
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: var(--color-border) !important;
}

/* ---------- Text helpers ---------- */

.theme-text {
  color: var(--color-text) !important;
}

.theme-muted-text,
.text-gray-400,
.text-gray-500,
.text-gray-600 {
  color: var(--color-muted-text) !important;
}

/* ---------- Status colors ---------- */

.theme-success {
  color: var(--color-success) !important;
}

.theme-success-bg {
  background-color: color-mix(in srgb, var(--color-success) 12%, #ffffff 88%) !important;
  color: var(--color-success) !important;
}

.theme-error,
.text-red-600 {
  color: var(--color-error) !important;
}

.theme-error-bg,
.bg-red-50 {
  background-color: color-mix(in srgb, var(--color-error) 12%, #ffffff 88%) !important;
  color: var(--color-error) !important;
}

.theme-warning {
  color: var(--color-warning) !important;
}

.theme-warning-bg {
  background-color: color-mix(in srgb, var(--color-warning) 14%, #ffffff 86%) !important;
  color: var(--color-warning) !important;
}

/* ---------- Cart badge ---------- */

.theme-cart-badge-active,
.js-cart-count.bg-primary {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.theme-cart-badge-empty,
.js-cart-count.bg-gray-400 {
  background-color: var(--color-muted-text) !important;
  color: #ffffff !important;
}

/* ---------- Focus rings ---------- */

:where(a, button, [role="button"], summary):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
  border-color: var(--color-primary) !important;
}

/* ---------- Selection ---------- */

::selection {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* ==========================================================================
   FINAL TRANSITIONAL TAILWIND COLOR BRIDGE
   --------------------------------------------------------------------------
   Temporary compatibility layer for older storefront templates that still use
   Tailwind color utility classes. This bridge maps common legacy color classes
   to admin-controlled theme CSS variables while templates are gradually moved
   to semantic classes like theme-card, theme-text, theme-border, etc.

   Scope note:
   - Color-only rules.
   - No spacing, sizing, layout, display, position, typography scale, or behavior.
   - Keep this after the semantic theme classes so it can bridge old utilities.
   ========================================================================== */

/* Background color utilities */
.bg-white,
.hover\:bg-white:hover {
  background-color: var(--color-surface, #ffffff) !important;
}

.bg-gray-50,
.bg-slate-50,
.hover\:bg-gray-50:hover,
.hover\:bg-slate-50:hover {
  background-color: color-mix(in srgb, var(--color-bg, #f9fafb) 92%, var(--color-surface, #ffffff)) !important;
}

.bg-gray-100,
.bg-slate-100,
.hover\:bg-gray-100:hover,
.hover\:bg-slate-100:hover {
  background-color: color-mix(in srgb, var(--color-border, #e5e7eb) 35%, var(--color-surface, #ffffff)) !important;
}

.bg-gray-200,
.bg-slate-200,
.hover\:bg-gray-200:hover,
.hover\:bg-slate-200:hover {
  background-color: color-mix(in srgb, var(--color-border, #e5e7eb) 65%, var(--color-surface, #ffffff)) !important;
}

.bg-primary,
.bg-indigo-600,
.bg-indigo-700,
.hover\:bg-primary:hover,
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--color-button-bg, var(--color-primary, #4f46e5)) !important;
}

.hover\:bg-primary-hover:hover,
.hover\:bg-indigo-800:hover {
  background-color: var(--color-button-hover, var(--color-primary-hover, #4338ca)) !important;
}

.bg-red-50,
.bg-rose-50 {
  background-color: color-mix(in srgb, var(--color-error, #dc2626) 10%, var(--color-surface, #ffffff)) !important;
}

.bg-red-100,
.bg-rose-100 {
  background-color: color-mix(in srgb, var(--color-error, #dc2626) 16%, var(--color-surface, #ffffff)) !important;
}

.bg-green-50,
.bg-emerald-50 {
  background-color: color-mix(in srgb, var(--color-success, #16a34a) 10%, var(--color-surface, #ffffff)) !important;
}

.bg-green-100,
.bg-emerald-100 {
  background-color: color-mix(in srgb, var(--color-success, #16a34a) 16%, var(--color-surface, #ffffff)) !important;
}

.bg-yellow-50,
.bg-amber-50,
.bg-orange-50 {
  background-color: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, var(--color-surface, #ffffff)) !important;
}

.bg-yellow-100,
.bg-amber-100,
.bg-orange-100 {
  background-color: color-mix(in srgb, var(--color-warning, #f59e0b) 20%, var(--color-surface, #ffffff)) !important;
}

/* Text color utilities */
.text-white,
.hover\:text-white:hover {
  color: var(--color-button-text, #ffffff) !important;
}

.text-gray-900,
.text-gray-800,
.text-slate-900,
.text-slate-800,
.hover\:text-gray-900:hover,
.hover\:text-slate-900:hover {
  color: var(--color-text, #111827) !important;
}

.text-gray-700,
.text-gray-600,
.text-slate-700,
.text-slate-600,
.hover\:text-gray-700:hover,
.hover\:text-gray-600:hover,
.hover\:text-slate-700:hover,
.hover\:text-slate-600:hover {
  color: color-mix(in srgb, var(--color-text, #111827) 78%, var(--color-muted-text, #6b7280)) !important;
}

.text-gray-500,
.text-gray-400,
.text-slate-500,
.text-slate-400,
.hover\:text-gray-500:hover,
.hover\:text-gray-400:hover,
.hover\:text-slate-500:hover,
.hover\:text-slate-400:hover {
  color: var(--color-muted-text, #6b7280) !important;
}

.text-primary,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.hover\:text-primary:hover,
.hover\:text-indigo-500:hover,
.hover\:text-indigo-600:hover,
.hover\:text-indigo-700:hover {
  color: var(--color-link, var(--color-primary, #4f46e5)) !important;
}

.text-red-500,
.text-red-600,
.text-red-700,
.text-rose-500,
.text-rose-600,
.text-rose-700,
.hover\:text-red-500:hover,
.hover\:text-red-600:hover,
.hover\:text-red-700:hover {
  color: var(--color-error, #dc2626) !important;
}

.text-green-500,
.text-green-600,
.text-green-700,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700 {
  color: var(--color-success, #16a34a) !important;
}

.text-yellow-600,
.text-yellow-700,
.text-amber-600,
.text-amber-700,
.text-orange-600,
.text-orange-700 {
  color: var(--color-warning, #f59e0b) !important;
}

/* Border, divide, ring, and focus utilities */
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-slate-100,
.border-slate-200,
.border-slate-300,
.hover\:border-gray-200:hover,
.hover\:border-gray-300:hover,
.hover\:border-slate-200:hover,
.hover\:border-slate-300:hover {
  border-color: var(--color-border, #e5e7eb) !important;
}

.border-primary,
.border-indigo-500,
.border-indigo-600,
.hover\:border-primary:hover,
.hover\:border-indigo-500:hover,
.hover\:border-indigo-600:hover {
  border-color: var(--color-primary, #4f46e5) !important;
}

.border-red-200,
.border-red-300,
.border-rose-200,
.border-rose-300 {
  border-color: color-mix(in srgb, var(--color-error, #dc2626) 35%, var(--color-border, #e5e7eb)) !important;
}

.border-green-200,
.border-green-300,
.border-emerald-200,
.border-emerald-300 {
  border-color: color-mix(in srgb, var(--color-success, #16a34a) 35%, var(--color-border, #e5e7eb)) !important;
}

.border-yellow-200,
.border-yellow-300,
.border-amber-200,
.border-amber-300,
.border-orange-200,
.border-orange-300 {
  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 40%, var(--color-border, #e5e7eb)) !important;
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.divide-gray-300 > :not([hidden]) ~ :not([hidden]),
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.divide-slate-300 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border, #e5e7eb) !important;
}

.ring-gray-200,
.ring-gray-300,
.ring-slate-200,
.ring-slate-300 {
  --tw-ring-color: var(--color-border, #e5e7eb) !important;
}

.ring-primary,
.ring-indigo-500,
.focus\:ring-primary:focus,
.focus\:ring-indigo-500:focus,
.focus\:border-primary:focus,
.focus\:border-indigo-500:focus {
  --tw-ring-color: color-mix(in srgb, var(--color-primary, #4f46e5) 42%, transparent) !important;
  border-color: var(--color-primary, #4f46e5) !important;
}

/* Placeholder utilities */
.placeholder-gray-400::placeholder,
.placeholder-gray-500::placeholder,
.placeholder-slate-400::placeholder,
.placeholder-slate-500::placeholder {
  color: var(--color-muted-text, #6b7280) !important;
  opacity: 0.85;
}

/* Disabled color states */
.disabled\:bg-gray-100:disabled,
.disabled\:bg-gray-200:disabled,
button:disabled.bg-gray-100,
button:disabled.bg-gray-200 {
  background-color: color-mix(in srgb, var(--color-border, #e5e7eb) 45%, var(--color-surface, #ffffff)) !important;
}

.disabled\:text-gray-400:disabled,
.disabled\:text-gray-500:disabled,
button:disabled.text-gray-400,
button:disabled.text-gray-500 {
  color: color-mix(in srgb, var(--color-muted-text, #6b7280) 70%, var(--color-border, #e5e7eb)) !important;
}

/* SVG icon helpers that inherit old text utility colors */
svg.text-gray-400,
svg.text-gray-500,
svg.text-slate-400,
svg.text-slate-500 {
  color: var(--color-muted-text, #6b7280) !important;
}

svg.text-primary,
svg.text-indigo-500,
svg.text-indigo-600 {
  color: var(--color-primary, #4f46e5) !important;
}