/* ============================================================
   SHOPTER.SHOPPING — SITE-WIDE ACCESSIBILITY
   ============================================================
   ONE shared file, linked from every page. Change it here and it
   changes everywhere — no more hand-copied per-page style blocks
   that drift out of sync.

   Two goals:
   1. LEGIBLE SIZE — nothing smaller than 13px anywhere. Tiny 9-11px
      labels were the worst offenders and are lifted the most.
   2. REAL CONTRAST — the old --muted (#5E6B60) measured 3.56:1
      against the near-black background, which FAILS the WCAG AA
      minimum of 4.5:1, and it was being used on the smallest text
      on the page. Replacements below clear AAA (7:1).
   ============================================================ */

/* ── 1. CONTRAST ── */
:root{
  /* Dark-theme defaults. Deliberately NOT !important — shopter-theme.js
     needs to override these when the user picks Light or Rose. Forcing
     them here made light mode unreadable (2.24:1) because these values
     are tuned for a dark background. */
  --muted:  #9DB09F;   /* 8.69:1 on dark — AAA */
  --muted2: #A4B8A6;   /* 9.49:1 on dark — AAA */
  --border2: rgba(255,255,255,0.12);
}

/* ── 2. BASE SIZE & RHYTHM ── */
body{
  font-size: 18px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

/* ── 3. GLOBAL FLOOR ──
   Catches any small text not covered by a specific rule below. */
body, p, div, span, li, td, th, label, a, button, input, select, textarea{
  font-size: inherit;
}

/* ── 4. THE SMALLEST TEXT — lifted the most ──
   Uppercase micro-labels, section headers, badges, meta lines.
   These were 9-11px, genuinely hard to read. */
.ssp-h, .desc-h, .section-h, .strip-h, .trending-h, .field-label,
.followers-section-h, .caption-label, .pick-label, .item-brand,
.rank-brand, .post-badge, .fire-badge, .follower-badge, .item-badge,
.tracked-target, .occasion-tag, .hero-eyebrow, .section-eyebrow,
.stat-card-label, .ltk-stat-label, .comment-time, .empty-note{
  font-size: 13px !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
}

/* ── 5. SECONDARY / SUPPORTING TEXT ── */
.hero-sub, .page-sub, .section-sub, .welcome-sub, .occasion-desc,
.item-cond, .item-condition, .listing-condition, .rank-meta,
.post-meta, .seller-meta, .follower-meta, .comment-text,
.tracked-price, .settings-row-desc, .muted-text, .meta,
.step-desc, .pillar-desc, .trust-label, .publish-note,
.safety-btn-desc, .report-sub, .wish-orig, .desc-text{
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* ── 6. PRIMARY BODY & ITEM TEXT ── */
.item-name, .listing-name, .card-title, .drop-name, .tier-name,
.rank-name, .post-caption, .comment-user, .follower-name,
.post-username, .seller-name, .closet-name, .tracked-name,
.msg-bubble, .quick-q, .ssp-link, .ssp-btn, .settings-row-label,
.about-text, .wish-name{
  font-size: 17px !important;
  line-height: 1.5 !important;
}

/* ── 7. PRICES — should never be small ── */
.item-price, .listing-price, .price-main, .price-resale, .rank-price,
.wish-price, .tag-price, .outfit-item-price, .tagged-item-price{
  font-size: 20px !important;
  font-weight: 700 !important;
}
.price-orig, .price-retail-val, .listing-retail, .price-save{
  font-size: 15px !important;
}

/* ── 8. BUTTONS & CONTROLS ──
   Also enforces a comfortable tap target height on mobile. */
button, .btn, .cta-btn, .submit-btn, .save-btn, .publish-btn,
.buy-now-btn, .buy-now-main, .sell-btn, .item-buy-btn, .cont-btn,
.plan-btn, .ltk-cta-btn, .send-btn, .track-btn{
  font-size: 17px !important;
  font-weight: 700 !important;
}
.chip, .filter-btn, .tab, .btab, .seg-btn, .cat-tab, .tf-btn,
.brand-chip, .trending-tag, .pref-chip, .quick-q, .action-btn,
.follow-btn-small, .follower-follow-btn{
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ── 9. FORM INPUTS ──
   16px minimum specifically stops iOS Safari from zooming the page
   in when someone taps into a field. */
input, select, textarea, .field-input, .field-in, .chat-input,
.search-input, .comment-input, .post-textarea, .track-input{
  font-size: 16px !important;
}

/* ── 10. HEADINGS ── */
.hero-h, .page-h, .section-title, .welcome-h, .sheet-h, .final-h{
  font-size: 30px !important;
  line-height: 1.25 !important;
}
.logo, .nav-title{ font-size: 22px !important; }

/* ── 11. NAVIGATION ── */
/* Weight and colour for these live in shopter-ui.css, which loads after
   this file. Setting font-weight here as well meant the two fought and
   the labels stayed at the lighter weight. */
.shopter-bnav-label, .bnav-label, .bnav-sell-label{
  font-size: 12px !important;
}
.nav-link, .nav-username, .nav-uname{ font-size: 15px !important; }
.shopter-settings-btn, .settings-btn{
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
}

/* ── 12. STATS ── */
.stat-card-num, .ltk-stat-num, .cstat-num{ font-size: 34px !important; }
.stat-card-change, .rank-change, .brand-pill-change{ font-size: 14px !important; }

/* ── 13. TOASTS & ALERTS — must be readable at a glance ── */
.toast{ font-size: 16px !important; font-weight: 600 !important; }
.error-box, .result-error{ font-size: 15px !important; line-height: 1.5 !important; }

/* ── 14. FOCUS VISIBILITY ──
   Keyboard users need to see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline: 3px solid #39FF64 !important;
  outline-offset: 2px !important;
}

/* ── 15. RESPECT SYSTEM PREFERENCES ──
   If someone has asked their device to reduce motion, honour it. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   LIGHT MODE — OPTICAL WEIGHT COMPENSATION
   ============================================================
   Identical font weights do NOT read as equally bold in both
   themes. Light text on a dark background blooms slightly and
   appears heavier; dark text on white appears thinner. This is
   a real optical effect, not a preference.

   Sites like Poshmark and The RealReal sit on white and use
   noticeably heavier type than a dark UI would need. These
   rules do the same: everything moves up one weight step in
   light mode, so it reads with the same authority it does on
   black.

   Requires shopter-theme.js, which sets data-theme on <html>.
   ============================================================ */
[data-theme="light"] body,
[data-theme="light"] p,
[data-theme="light"] div,
[data-theme="light"] span,
[data-theme="light"] a,
[data-theme="light"] li,
[data-theme="light"] td { font-weight: 500; }

/* Step every explicit weight up one notch */
/* :not() keeps the bottom-nav labels out — they're set heavier in
   shopter-ui.css, and this broad rule was pulling them back to 600. */
[data-theme="light"] [class*="label"]:not([class*="bnav"]),
[data-theme="light"] [class*="meta"],
[data-theme="light"] [class*="sub"],
[data-theme="light"] [class*="desc"],
[data-theme="light"] [class*="hint"],
[data-theme="light"] [class*="caption"] { font-weight: 600 !important; }

[data-theme="light"] [class*="name"],
[data-theme="light"] [class*="title"],
[data-theme="light"] [class*="brand"],
[data-theme="light"] [class*="price"],
[data-theme="light"] [class*="btn"],
[data-theme="light"] button,
[data-theme="light"] [class*="tab"],
[data-theme="light"] [class*="chip"],
[data-theme="light"] [class*="stat"],
[data-theme="light"] th { font-weight: 700 !important; }

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] [class*="hero-h"],
[data-theme="light"] [class*="section-h"],
[data-theme="light"] [class*="page-h"],
[data-theme="light"] .logo,
[data-theme="light"] .nav-title { font-weight: 800 !important; }

/* Secondary text on white needs to be darker as well as heavier —
   a mid grey that reads fine on black looks washed out on white. */
[data-theme="light"] { --muted: #3F4A41; --muted2: #3C4654; }

/* ============================================================
   READABLE TYPE  — added 23 August 2026
   ============================================================
   The body font was Cormorant Garamond, a display serif with very
   thin strokes. Thin strokes are the hardest thing to read at small
   sizes, and they wash out badly on a light background — which is
   why light mode felt worse than dark.

   Plus Jakarta Sans replaces it for everything you actually read. It has
   a tall x-height, open letterforms, and clearly distinct shapes for the
   pairs that catch people out: I l 1, and b d. It's also the body font
   used across the new page designs (Discover, Resale, Closet, Fill the
   Gap), so this brings the shared accessibility layer in line with them
   instead of fighting them.

   Cormorant is kept ONLY for the logo and the big page headings, where
   the strokes are large enough to hold up and the brand character is
   worth having.

   One file, one upload. Deleting this block restores the old look.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --font-read: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Everything that is read rather than admired */
body,
p, span, div, li, td, th, label, small, strong, em, a,
input, textarea, select, button,
.item-name, .item-brand, .item-price, .item-meta, .item-tag,
.card-name, .card-brand, .card-price, .card-meta,
.stat-num, .stat-lbl, .stat-label, .stat-item,
.thread-name, .thread-last, .bub,
.trust-text, .trust-val, .about-label, .about-val,
.section-count, .chip, .era-chip, .tab, .stab,
.shopter-bnav-label, .bnav-sell-label,
.review-name, .review-text, .seller-name, .seller-bio, .seller-location{
  font-family: var(--font-read) !important;
}

/* The brand keeps its serif where the letters are big enough to read */
.logo, h1, .hero-h, .page-h, .welcome-h, .result-h, .empty-h,
.preview-h, .drop-mark, .empty-mark, .bnav-sell-icon{
  font-family: 'Cormorant Garamond', serif !important;
}

/* ── SIZE AND SPACING ──
   Plus Jakarta Sans is a touch smaller than Cormorant at the same pixel size, so
   the base goes up rather than staying level. */
body{
  font-size: 17px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Thin text is the enemy. Running text is 500 so it reads at a
   glance on both themes; secondary text matches. */
p, li, td, .item-meta, .card-meta, .thread-last, .about-val,
.trust-text, .sample-meta, .review-text{
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}
.item-meta, .card-meta, .stat-lbl, .stat-label, .section-count,
.thread-when, .sample-meta, .bub-when, .chip, .era-chip{
  font-weight: 500 !important;
}

/* Prices need to be unmistakable */
.item-price, .card-price, .price, .buy-price-small, .sample-price{
  font-family: var(--font-read) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ── LIGHT THEME ──
   Secondary text at #4A554C on white is legible but soft. A little
   darker and a little heavier makes it comfortable rather than
   merely passing. */
[data-theme="light"] .item-meta,
[data-theme="light"] .card-meta,
[data-theme="light"] .stat-lbl,
[data-theme="light"] .thread-last,
[data-theme="light"] .about-val,
[data-theme="light"] .trust-text,
[data-theme="light"] p{
  color: #2E3630 !important;
  font-weight: 500 !important;
}

/* Buttons and labels: Syne is fine in caps but tight in sentences */
button, .btn, .chip, .era-chip, .tab, .stab, .follow-btn{
  font-family: var(--font-read) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}