/* Back Market design system — 2026 brand guidelines: Ivar Soft headlines,
   BM Duplet text, Mindaro #E2F77E accent, Night #121016 ink, and the Lilac
   ramp (#F9F7FC / #D9D1E5 / #CDB4F2 default / #605473 / #2A2433) as the
   supporting colors. */

/* Ivar Soft — the primary (display) face, shipped from the brand kit.
   Titles and headlines only; body/UI stays on Duplet. */
@font-face { font-family: "IvarSoft"; src: local("Ivar Soft"), url("./assets/fonts/IvarSoft-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IvarSoft"; src: local("Ivar Soft Medium"), url("./assets/fonts/IvarSoft-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IvarSoft"; src: local("Ivar Soft SemiBold"), url("./assets/fonts/IvarSoft-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IvarSoft"; src: local("Ivar Soft Bold"), url("./assets/fonts/IvarSoft-Bold.woff2") format("woff2"); font-weight: 700 1000; font-display: swap; }

/* BM Duplet — the secondary (text/UI) face. Weight 500 falls to 400/600,
   900+ to Extrabold. */
@font-face { font-family: "BMDupletTXT"; src: local("BM Duplet TXT"), url("./assets/fonts/BMDupletTXT-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BMDupletTXT"; src: local("BM Duplet TXT Semibold"), url("./assets/fonts/BMDupletTXT-Semibold.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "BMDupletTXT"; src: local("BM Duplet TXT Bold"), url("./assets/fonts/BMDupletTXT-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "BMDupletTXT"; src: local("BM Duplet TXT Extrabold"), url("./assets/fonts/BMDupletTXT-Extrabold.woff2") format("woff2"); font-weight: 800 1000; font-display: swap; }

/* New Cezanne ProN — the campaign-canvas Japanese face. Licensed: loaded from
   the user's LOCAL install only (never shipped), like Spotify's Tazugane. When
   missing, the canvas falls through to the system gothic and the Studio shows
   a banner. */
@font-face { font-family: "New Cezanne CB"; src: local("NewCezanneProN-M"), local("FOT-NewCezanne ProN M"); font-weight: 400; font-display: swap; }
@font-face { font-family: "New Cezanne CB"; src: local("NewCezanneProN-DB"), local("FOT-NewCezanne ProN DB"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "New Cezanne CB"; src: local("NewCezanneProN-B"), local("FOT-NewCezanne ProN B"); font-weight: 700; font-display: swap; }
@font-face { font-family: "New Cezanne CB"; src: local("NewCezanneProN-EB"), local("FOT-NewCezanne ProN EB"); font-weight: 800 1000; font-display: swap; }

:root[data-app-style="backmarket"] {
  --brand-color: #E2F77E;
  --neutral-0: #ffffff;
  --neutral-50: #f9f7fc;
  --neutral-100: #efebf5;
  --neutral-200: #d9d1e5;
  --neutral-400: #605473;
  --neutral-600: #453b54;
  --neutral-800: #2a2433;
  --neutral-1000: #121016;
  --font-sans: "BMDupletTXT", "Inter", "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-display: "IvarSoft", "BMDupletTXT", "Space Grotesk", "Inter", "M PLUS 1p", serif;
}

/* Top-bar wordmark: Duplet Bold, -4% tracking, 25% over the core 28px;
   the symbol beside it runs 20% smaller. */
:root[data-app-style="backmarket"] .brand-block strong {
  font-family: "BMDupletTXT", var(--font-sans);
  font-weight: 700;
  font-size: 35px;
  letter-spacing: -0.04em;
}
:root[data-app-style="backmarket"] .rs-logo { width: 34px; } /* 42px − 20% */

/* Mindaro is a fill/highlight color, not a text color — keep selected-state
   text in Night for contrast (the accent border + bubble carry the brand). */
:root[data-app-style="backmarket"] .copy-step.is-active .copy-step-btn { color: var(--fg-primary); }
:root[data-app-style="backmarket"] .copy-step.is-active .copy-step-n { color: #121016; }
:root[data-app-style="backmarket"] .home-tool-title { color: #121016; }

/* Selected segment (Studio segmented controls) fills with Lilac. */
:root[data-app-style="backmarket"] .studio-seg-btn.is-active { background: #CDB4F2; color: #121016; }

/* Selection accents run Lilac (tabs underline + dropdown selected/hover). */
:root[data-app-style="backmarket"] .studio-tab-ind { background: #CDB4F2; }
:root[data-app-style="backmarket"] .dd-option.is-selected { color: #CDB4F2; }
:root[data-app-style="backmarket"] .dd-option:hover { background: rgba(205, 180, 242, 0.22); }

/* Preset column: color names in Night; ratio in Night, verdict green/red. */
:root[data-app-style="backmarket"] .studio-brandcolor-row .studio-preset-col b { color: #121016; }
:root[data-app-style="backmarket"] .studio-contrast-value { color: #121016; }
:root[data-app-style="backmarket"] .studio-contrast-verdict.is-pass { color: #16A34A; }
:root[data-app-style="backmarket"] .studio-contrast-verdict.is-fail { color: #DC2626; }

/* Sidebar buttons: BM uses 8px corners, not the Spotify pill (toggle
   switches keep their track shape). */
.studio-btn-white,
.studio-btn-dark,
.studio-mini-btn { border-radius: 8px; }

/* Template editor overlays mirror the canvas stacking: image above the other
   elements, logo topmost. */
.tpl-overlay-image { z-index: 4; }
.tpl-overlay-logo { z-index: 5; }

/* Studio canvas: the per-canvas separators read mid-grey on BM's light stage;
   the Formats tab's format titles use a dark grey. */
:root[data-app-style="backmarket"] .studio-sep { background: #999999; }
:root[data-app-style="backmarket"] .studio-format-info b { color: #5a5a5a; }

/* Copy Crafter lightbox (step 3): the copy renders in New Cezanne, 3× the
   inherited size, centered. */
:root[data-app-style="backmarket"] .copy-lb-copy {
  font-family: "New Cezanne CB", "BMDupletTXT", sans-serif;
  font-size: 3em;
  line-height: 1.35;
  text-align: center;
}