/* ============================================================
   GemstoneSafe — Typography (client "Final Developer Handoff")
   DM Serif Display = editorial hierarchy only (hero, page titles, section headings,
   card/category editorial headings). Inter = all marketplace + transactional UI.
   Single source of truth for type sizes: every stylesheet, Blade <style> block and
   Tailwind role size (tailwind.config.js) reads these tokens. Loaded by layouts.app
   AND the legacy layout.app / app3 / master, so every customer-facing page shares it.
   Desktop values are the default; mobile (<=767px) values override below.
   ============================================================ */
:root {
  --font-display: "DM Serif Display", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* §10 Final CSS tokens (verbatim, except hero/page/section titles: client-approved
     2026-10-01 midpoint between Option B and the Final Handoff) */
  --hero-title-size: 48px;
  --page-title-size: 33px;
  --section-title-size: 27px;
  --ui-heading-size: 17.82px;       /* Inter UI sub-headings (modals, drawers, order summary, form sections): Final Handoff size, NOT the editorial bump */
  --category-title-size: 12.75px;

  --body-size: 15px;
  --product-title-size: 13.5px;
  --product-meta-size: 13px;
  --product-price-size: 14.4px;

  --verification-badge-size: 8.5px;
  --button-size: 9.35px;
  --eyebrow-size: 11px;
  --filter-chip-size: 10px;
  --result-count-size: 9.45px;
  --process-number-size: 9px;

  /* §2 table rows that §10 has no token for */
  --hero-text-size: 15px;           /* hero supporting text */
  --nav-size: 12px;                 /* navigation */
  --utility-size: 11px;             /* utility (top) bar */
  --text-link-size: 10.5px;         /* standalone text links ("View all", "Clear") */
  --category-desc-size: 11.5px;     /* category description */
  --form-size: 14px;                /* input / select / textarea */
  --auction-support-size: calc(var(--product-meta-size) * 0.9); /* bid / timer: 90% of supporting size */
}

@media (max-width: 767px) {
  :root {
    --hero-title-size: 34px;
    --page-title-size: 26px;
    --section-title-size: 23px;
    --ui-heading-size: 16.83px;
    --category-title-size: 11.9px;

    --body-size: 14px;
    --product-title-size: 12.6px;
    --product-meta-size: 12px;
    --product-price-size: 13.5px;

    --verification-badge-size: 7.65px;
    --button-size: 8.5px;
    --filter-chip-size: 9.5px;
    --result-count-size: 9px;

    --hero-text-size: 14px;
    --text-link-size: 10px;
    --category-desc-size: 10.5px;
    --form-size: 16px;                /* stays 16px on mobile — avoids iOS focus zoom */
  }
}

/* DM Serif Display ships one weight — never synthesize bold/italic. */
html { font-synthesis: none; }

/* --- Element defaults (low specificity; page/role rules refine them) ------------------- */
html, body {
  font-family: var(--font-ui);
}
body {
  font-size: var(--body-size);
  font-weight: 400;
}
p { font-size: var(--body-size); }
small { font-size: var(--product-meta-size); }

/* h1/h2 are the editorial hierarchy (page title / section heading) → DM Serif Display.
   h3–h6 default to Inter: checkout/account/card UI headings are Inter per the handoff; editorial
   card/category headings opt into the display face via their own class (.category-title,
   font-serif, page CSS). */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
}
h1 { font-size: var(--page-title-size); line-height: 1.08; }
h2 { font-size: var(--section-title-size); line-height: 1.15; }
/* <h2> card titles inside account/RFQ cards are UI headings, not editorial section headings */
h2.rfq-card-title { font-size: var(--ui-heading-size); }
h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-size: var(--product-title-size);
  font-weight: 600;
  line-height: 1.3;
}

nav { font-family: var(--font-ui); }

button, input, select, textarea, table, label {
  font-family: var(--font-ui);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  font-size: var(--form-size);
  font-weight: 400;
}
label { font-size: var(--product-meta-size); }

/* §5 Buttons — every CTA (Buy Now, Make Offer, View Auction, Shop Gemstones, Create RFQ,
   filter actions, secondary CTAs) shares one size/weight. */
.button,
.btn {
  font-family: var(--font-ui);
  font-size: var(--button-size);
  font-weight: 600;
  line-height: 1;
}

/* Bootstrap / legacy badges */
.badge {
  font-family: var(--font-ui);
  font-size: var(--verification-badge-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.035em;
}

/* --- §4 Heading roles -------------------------------------------------------------------- */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--hero-title-size);
  font-weight: 400;
  line-height: 1.05;
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: 400;
  line-height: 1.08;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--section-title-size);
  font-weight: 400;
  line-height: 1.15;
}
.category-title {
  font-family: var(--font-display);
  font-size: var(--category-title-size);
  font-weight: 400;
  line-height: 1.2;
}

/* --- §3 Product card typography (locked: Inter only) ----------------------------------- */
.product-title {
  font-family: var(--font-ui);
  font-size: var(--product-title-size);
  font-weight: 600;
  line-height: 1.3;
}
.product-meta {
  font-family: var(--font-ui);
  font-size: var(--product-meta-size);
  font-weight: 400;
  line-height: 1.38;
}
.product-price {
  font-family: var(--font-ui);
  font-size: var(--product-price-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.product-badge {
  font-family: var(--font-ui);
  font-size: var(--verification-badge-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.035em;
}

/* --- §6 Numerical typography ------------------------------------------------------------ */
.price,
.money,
.gemstone-price,
.bid,
.bid-value,
.current-bid,
.auction-timer,
.order-total,
.invoice-value,
.dimension,
.carat,
.result-count {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- §7 Eyebrows, labels, metadata ------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-meta,
.caption,
.supporting-text {
  font-family: var(--font-ui);
  font-weight: 400;
}

/* Remaining §2 roles as opt-in helpers */
.text-link       { font-family: var(--font-ui); font-size: var(--text-link-size); font-weight: 600; }
.filter-chip     { font-family: var(--font-ui); font-size: var(--filter-chip-size); font-weight: 500; }
.result-count    { font-size: var(--result-count-size); font-weight: 500; }
.process-number  { font-family: var(--font-ui); font-size: var(--process-number-size); font-weight: 600; }
.category-desc   { font-family: var(--font-ui); font-size: var(--category-desc-size); font-weight: 400; }
.utility-text    { font-family: var(--font-ui); font-size: var(--utility-size); font-weight: 500; }
.nav-text        { font-family: var(--font-ui); font-size: var(--nav-size); font-weight: 500; }
.auction-support { font-size: var(--auction-support-size); }

/* Opt-in display helpers kept from the Option B pass. */
.display-heading, .editorial-heading {
  font-family: var(--font-display);
  font-weight: 400;
}

/* DM Serif Display ships 400 only — Tailwind's font-serif never pairs with a heavier weight. */
.font-serif { font-weight: 400; }