/* ============================================================
   SHOPTER.AI — 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 ── */
.shopter-bnav-label, .bnav-label, .bnav-sell-label{
  font-size: 12px !important;
  font-weight: 700 !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 */
[data-theme="light"] [class*="label"],
[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; }