/* VisionSuite Offline Design Compatibility Layer
 *
 * Purpose: keep Marketplace / Shop / Portal visually identical to the
 * pre-offline (Google Fonts + CDN) premium look while using local assets.
 * No redesign — typography, weight, smoothing, and modal chrome parity only.
 */

/* Critical faces — match Google Fonts weight set used before offline migration */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2"),
       url("../fonts/dm-sans-latin-600-normal.woff") format("woff");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-800-normal.woff2") format("woff2"),
       url("../fonts/dm-sans-latin-800-normal.woff") format("woff");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2"),
       url("../fonts/fraunces-latin-500-normal.woff") format("woff");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/fraunces-latin-800-normal.woff2") format("woff2"),
       url("../fonts/fraunces-latin-800-normal.woff") format("woff");
}

/* Prefer real faces over synthetic bold/italic (parity with CDN fonts) */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

body,
.mp-body,
.sf-body,
.jop-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure design tokens still resolve to local stacks (same as CDN name stacks) */
:root {
  --vs-font-sans: "DM Sans", "Inter", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --vs-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --mp-font: var(--vs-font-sans);
  --mp-display: var(--vs-font-display);
  --sf-font: var(--vs-font-sans);
  --sf-display: var(--vs-font-display);
}

/* Weight 650 (used in marketplace CSS) — bridge between 600 and 700 */
.mp-body,
.sf-body {
  font-optical-sizing: auto;
}

/* SweetAlert2 — preserve VisionSuite premium chrome (navy/teal radius/shadow) */
.swal2-popup {
  border-radius: 1.15rem !important;
  font-family: var(--vs-font-sans) !important;
  box-shadow: 0 24px 48px rgba(11, 36, 71, 0.22) !important;
}
.swal2-title {
  font-family: var(--vs-font-display) !important;
  color: #0b2447 !important;
  font-weight: 700 !important;
}
.swal2-styled.swal2-confirm {
  background: #0e9488 !important;
  border-radius: 0.75rem !important;
  font-weight: 800 !important;
  min-height: 2.75rem !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
  min-height: 2.75rem !important;
}
.swal2-actions {
  gap: 0.5rem !important;
}
.swal2-backdrop-show {
  background: rgba(15, 23, 42, 0.48) !important;
}

/* Product PDP Swal — keep Fraunces / DM Sans after offline font swap */
.vs-pp-swal,
.vs-pp-swal * {
  -webkit-font-smoothing: antialiased;
}
.vs-pp-swal__title {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Marketplace / shop buttons already define weights; reinforce ExtraBold availability */
.mp-btn,
.sf-btn,
.mp-logo,
.sf-brand__name {
  font-synthesis: none;
}

/* Avoid layout shift from late font swap on hero display type */
.mp-hero__title,
.mp-section__title,
.sf-hero__title,
.sf-brand__name {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-synthesis: none;
}

/* Marketplace Apple/Shopify card system — VisionSuite tokens */
.mp-body {
  --mp-card-bg: #ffffff;
  --mp-card-border: rgba(15, 23, 42, 0.06);
  --mp-card-border-hover: rgba(15, 23, 42, 0.08);
  --mp-card-border-on-dark: rgba(255, 255, 255, 0.1);
  --mp-card-radius: 1.25rem;
  --mp-card-ease: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --mp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(11, 36, 71, 0.06);
  --mp-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(11, 36, 71, 0.1);
}
.mp-body .mp-card__media,
.mp-body button.mp-card__media,
.mp-body button.mp-card__name {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  box-shadow: none;
}
.mp-body .mp-card,
.mp-body .mp-shop,
.mp-body .mp-trust__item,
.mp-body .mp-collection,
.mp-body .mp-promo,
.mp-body .mp-quote,
.mp-body .mp-filters {
  background-color: var(--mp-card-bg);
  border-color: var(--mp-card-border);
  border-radius: var(--mp-card-radius);
}
.mp-body .mp-hero__panel {
  border-color: var(--mp-card-border-on-dark);
  border-radius: var(--mp-card-radius);
}