/* ==========================================================================
   ShopSmart Design Tokens
   --------------------------------------------------------------------------
   Extracted from docs/shopsmart-product-page.html (the product-detail mockup).
   Single source of truth for the new ShopSmart blue-only palette. Do not
   hardcode colors in components — reference these vars instead.
   ========================================================================== */
:root {
  /* Core ShopSmart blue palette — blues only */
  --blue-950: #061226;
  --blue-900: #0b1f3f;
  --blue-800: #102b5a;
  --blue-700: #1a3b7a;
  --blue-600: #2457c5;
  --blue-500: #3b78ff;
  --blue-400: #6a9bff;
  --blue-300: #9bbaff;
  --blue-200: #cfdcff;
  --blue-100: #e3ecff;
  --blue-50:  #eef4ff;
  --blue-25:  #f6f9ff;

  /* Accent = bright ShopSmart blue (used for sale/CTA) */
  --accent:      #3b78ff;
  --accent-dark: #2457c5;
  --accent-soft: #eef4ff;

  /* Neutrals */
  --ink:       #0c1424;
  --ink-soft:  #475069;
  --muted:     #8890a6;
  --line:      #e6e9f2;
  --line-soft: #f1f3fa;
  --bg:        #f6f7fb;
  --white:     #ffffff;

  /* Semantic — green is reserved ONLY for "Free Shipping" labels and
     the seller online-status dot. Do not use elsewhere. */
  --green:      #117a3d;
  --green-soft: #e8fbef;

  /* Radii */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;

  /* Shadow tiers */
  --shadow-sm: 0 2px 10px rgba(12, 20, 36, .06);
  --shadow:    0 10px 30px rgba(12, 20, 36, .08);
  --shadow-lg: 0 22px 60px rgba(12, 20, 36, .14);

  /* Typography */
  --display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* Touch / sizing ramps — see shopsmart-add-to-cart-spec.md §4.
     Three ramps for the three platform shells. Components reference
     these instead of hardcoding heights so the same atom can be
     composed into desktop, mobile, or kiosk layouts unchanged. */
  --touch-sm: 32px;   /* desktop secondary controls (qty −/+, close) */
  --touch-md: 44px;   /* desktop primary, mobile all — WCAG floor */
  --touch-lg: 64px;   /* kiosk all */

  --cta-height-desk:  44px;
  --cta-height-mob:   44px;
  --cta-height-kiosk: 64px;

  --tile-h-desk:  32px;
  --tile-h-mob:   36px;
  --tile-h-kiosk: 56px;

  --drawer-w-desk: 340px;   /* right-side cart drawer */
  --modal-w-kiosk: 380px;   /* centered kiosk confirmation modal */

  /* Animation budget — §6.5 */
  --motion-drawer: 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-toast:  200ms ease-out;
  --motion-modal:  250ms ease-out;
  --motion-flash:  200ms ease;

  /* ----------------------------------------------------------------------
     Phase 1 additions — semantic colors for the voucher / gift / coins /
     mall-badge work. Replace hex bleed in checkout.css, cart-drawer.css,
     marketplace.css. See docs/MARKETPLACE-TOKENS.md §7 for the audit.
     ---------------------------------------------------------------------- */

  /* Danger / error / destructive — replaces 9 distinct red shades */
  --danger:      #791f1f;   /* darkest red — strong text on light bg */
  --danger-mid:  #991b1b;   /* mid-red — buttons, error banners */
  --danger-soft: #fcebeb;   /* light tint — error backgrounds */
  --danger-line: #f3c5c5;   /* pale red — borders */

  /* Promo / warning amber — replaces 11 distinct amber shades */
  --warn:        #854f0b;   /* dark amber text */
  --warn-mid:    #b85c00;   /* mid-amber — icons, accents */
  --warn-soft:   #fff7e6;   /* light amber tint — promo hint bg */
  --warn-line:   #fac775;   /* amber border (countdown warn, voucher hint) */

  /* Sale / mall ribbon — distinct from --danger (intent: promo, not error) */
  --mall:        #e8334a;

  /* Success — parallel to --green; --green stays scoped to free-shipping
     and seller-online dot. --success-* covers "applied / qualified / saved". */
  --success:        #047857;   /* deeper green text — guest-nudge confirm */
  --success-mid:    #16a34a;   /* check icons */
  --success-bright: #22c55e;   /* bright check on dark bg (cart drawer) */
  --success-soft:   #ecfdf5;   /* very light tint */

  /* Skeleton-loader stripe (currently #eef2f7 → #f7fafc gradient) */
  --skeleton-from: var(--line);
  --skeleton-to:   var(--line-soft);

  /* Type-size scale — replaces bespoke font-size values */
  --text-xxs:  11px;
  --text-xs:   11.5px;
  --text-sm:   12.5px;
  --text-md:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  24px;

  /* Type-weight scale — five values mapped to semantic names */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-display:  800;
}

/* ==========================================================================
   Brand logo
   --------------------------------------------------------------------------
   Canonical ShopSmart logo: the horizontal "cart + ShopSmart" image used on
   the marketplace homepage. Lives in tokens.css so every buyer-facing page
   renders the same mark.

   Usage:
     <img src="/assets/shopsmart-logo-horizontal.jpg" alt="ShopSmart" class="ss-logo-img">

   .ss-logo / .ss-logo-dot are legacy classes kept for any third-party
   embeds that may still reference them; new pages should use .ss-logo-img.
   ========================================================================== */
.ss-logo-img {
  display: block;
  height: 28px;
  width: auto;
  border-radius: 4px;
}
.ss-logo {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ss-logo-dot { color: var(--accent); }