/* ============================================================================
   Stage 2 (step 1 of n) — readable secondary text on the catalog and cart
   ----------------------------------------------------------------------------
   NOT LOADED YET. Link it from base.html after review; it is a separate file
   so it can be reverted by deleting one <link>, with no edit to style.css.

   Why: these nine classes all inherit --dim (#a3a3a3). Measured in the browser
   against their real backgrounds, every one of them lands at 2.4–2.5:1, where
   WCAG AA asks 4.5:1 for text this size. Nothing here is decorative — they are
   SKUs, quantities, release counts, converted prices and page subtitles that a
   buyer has to read.

   Two tones, chosen per element from its measured size and background:
     #595959  7.00:1 on #fff, 6.71:1 on #fafafa — for 10–11px and bold micro
              labels, where small glyphs need the extra weight of contrast
     #6b7280  4.83:1 on #fff, 4.63:1 on #fafafa — for 12–13px informational
              text, which stays visibly secondary to the ink body copy

   Out of scope on purpose: state colours (Sold Out red, Please Ask green,
   preorder amber), price emphasis, button colours, placeholders and icons.
   ========================================================================= */

/* 13px subtitle under a page title — cart, orders, contact, admin.
   measured: 13px/400 on #ffffff, was 2.52:1 → 4.83:1 */
.page-subtitle { color: var(--c-text-subtle); }

/* Converted price next to the yen figure, e.g. "(~$103.65)".
   measured: 11px/400 on #ffffff, was 2.52:1 → 4.83:1
   Kept at the lighter tone deliberately: the yen price must stay dominant. */
.price-converted { color: var(--c-text-subtle); }

/* "¥100 = $0.632" in the cart's currency bar.
   measured: 12px/500 on #ffffff, was 2.52:1 → 4.83:1 */
.currency-rate-display { color: var(--c-text-subtle); }

/* SKU chip on a cart line, e.g. "TK-0001".
   measured: 10px/500 on #fafafa, was 2.42:1 → 6.71:1 (small, and it gets
   copied into e-mails and spreadsheets, so legibility wins over subtlety) */
.product-code-tag { color: var(--c-text-muted); }

/* Minimum order quantity chip on a product card.
   10px/600; not rendered on the pages measured (only for MOQ > 1), so this
   follows the same rule as the other 10px chips. */
.moq-tag { color: var(--c-text-muted); }

/* "Category" / "Brand" headings in the catalog sidebar.
   measured: 10px/600 uppercase on #ffffff, was 2.52:1 → 7.00:1 */
.sidebar-section-label { color: var(--c-text-muted); }

/* The "(6)" count beside a preorder group heading.
   measured: 11px/600 on #ffffff, was 2.52:1 → 7.00:1 */
.preorder-subhead span { color: var(--c-text-muted); }

/* "Currency" label in the cart.
   measured: 11px/500 on #ffffff, was 2.52:1 → 7.00:1 */
.currency-label { color: var(--c-text-muted); }

/* "Clear" link on the search-results bar. A control, not a caption, so it
   takes the stronger tone and keeps its underline on hover.
   measured: 12px/400 on #fafafa, was 2.42:1 → 6.71:1 */
.search-result-bar a { color: var(--c-text-muted); }