/* =============================================================
   GLAZE — Typography system (design-faithful)
   Extracted from the 17 Product Detail / Home / etc. mockups.
   Loaded AFTER glaze.css / glaze_components_merged.css / glaze_tailwind.css
   so it is authoritative for all text across every Zen-Cart page.

   Design fonts:
     --font-body   : 'Inter', system-ui, -apple-system, sans-serif   (UI / body)
     --font-display: 'Playfair Display', Georgia, serif               (headings)
   Both are preloaded in html_header.php via Google Fonts.
   ============================================================= */

/* ---------- Design scale tokens (rem-free px so values are exact) ---------- */
:root {
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-26: 26px; --fs-28: 28px; --fs-30: 30px; --fs-32: 32px;
  --fs-34: 34px; --fs-36: 36px; --fs-38: 38px; --fs-44: 44px; --fs-48: 48px;
  --lh-tight: 1.25; --lh-snug: 1.375; --lh-normal: 1.5; --lh-relaxed: 1.625;
  --ls-tight: -0.025em; --ls-normal: 0; --ls-wide: 0.025em; --ls-wider: 0.05em;
}

/* ---------- Base document typography (matches design body) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0 0 1rem; }

/* ---------- Headings: Playfair Display, design weights/sizes ---------- */
h1, h2, h3, h4, h5, h6,
.font-display,
.page-title,
.page-title-wrap h1,
.page-title-section h1 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.2;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }
.page-title-wrap h1,
.page-title-section h1 { font-size: 36px; line-height: 1.15; }
/* listing page title (design .page-title-section h1 = 36px) */
.page-title { font-size: 32px; line-height: 1.2; }

/* =============================================================
   TAILWIND FONT UTILITIES (full set — fills the arbitrary-px
   utilities that glaze_tailwind.css did NOT compile, so any
   design class used in a ZC template now renders per spec)
   ============================================================= */

/* font-size scale */
.text-xs   { font-size: 12px; line-height: 1.5; }
.text-sm   { font-size: 14px; line-height: 1.5; }
.text-base { font-size: 16px; line-height: 1.5; }
.text-lg   { font-size: 18px; line-height: 1.5; }
.text-xl   { font-size: 20px; line-height: 1.4; }
.text-2xl  { font-size: 24px; line-height: 1.3; }
.text-3xl  { font-size: 30px; line-height: 1.25; }
.text-4xl  { font-size: 36px; line-height: 1.2; }
.text-5xl  { font-size: 48px; line-height: 1.1; }
.text-6xl  { font-size: 60px; line-height: 1.05; }
.text-7xl  { font-size: 72px; line-height: 1.05; }
.text-8xl  { font-size: 96px; line-height: 1; }
.text-9xl  { font-size: 128px; line-height: 1; }

/* arbitrary px (design-observed values) — line-height:1 mirrors Tailwind */
.text-\[10px\]   { font-size: 10px; line-height: 1; }
.text-\[11px\]   { font-size: 11px; line-height: 1; }
.text-\[12px\]   { font-size: 12px; line-height: 1; }
.text-\[12\.5px\]{ font-size: 12.5px; line-height: 1; }
.text-\[13px\]   { font-size: 13px; line-height: 1; }
.text-\[13\.5px\]{ font-size: 13.5px; line-height: 1; }
.text-\[14px\]   { font-size: 14px; line-height: 1; }
.text-\[15px\]   { font-size: 15px; line-height: 1; }
.text-\[16px\]   { font-size: 16px; line-height: 1; }
.text-\[17px\]   { font-size: 17px; line-height: 1; }
.text-\[20px\]   { font-size: 20px; line-height: 1; }
.text-\[24px\]   { font-size: 24px; line-height: 1; }
.text-\[26px\]   { font-size: 26px; line-height: 1; }
.text-\[28px\]   { font-size: 28px; line-height: 1; }
.text-\[30px\]   { font-size: 30px; line-height: 1; }
.text-\[32px\]   { font-size: 32px; line-height: 1; }
.text-\[34px\]   { font-size: 34px; line-height: 1; }
.text-\[36px\]   { font-size: 36px; line-height: 1; }
.text-\[38px\]   { font-size: 38px; line-height: 1; }
.text-\[44px\]   { font-size: 44px; line-height: 1; }
.text-\[48px\]   { font-size: 48px; line-height: 1; }
.text-\[2rem\]   { font-size: 2rem; line-height: 1; }

/* line-height */
.leading-none   { line-height: 1; }
.leading-tight  { line-height: 1.25; }
.leading-snug   { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed{ line-height: 1.625; }
.leading-loose  { line-height: 2; }
.leading-\[1\.05\]{ line-height: 1.05; }
.leading-\[1\.1\] { line-height: 1.1; }
.leading-\[1\.15\]{ line-height: 1.15; }
.leading-\[1\.6\] { line-height: 1.6; }
.leading-\[1\.65\]{ line-height: 1.65; }
.leading-\[1\.7\] { line-height: 1.7; }

/* letter-spacing */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-normal  { letter-spacing: 0; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tracking-\[0\.18em\]{ letter-spacing: 0.18em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[1px\]    { letter-spacing: 1px; }
.tracking-\[0\.5px\]  { letter-spacing: 0.5px; }
.tracking-\[2px\]    { letter-spacing: 2px; }

/* font-weight */
.font-thin      { font-weight: 100; }
.font-extralight{ font-weight: 200; }
.font-light     { font-weight: 300; }
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black     { font-weight: 900; }

/* font-family */
.font-sans   { font-family: var(--font-body); }
.font-serif  { font-family: var(--font-display); }
.font-display{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

/* =============================================================
   KEY ZC COMPONENT SIZES — mapped to design mockup values
   (so semantic Glaze classes match the original pixel sizes)
   ============================================================= */

/* Breadcrumb */
.breadcrumb, #navBreadCrumb, .breadcrumb a, .breadcrumb span,
#navBreadCrumb a, #navBreadCrumb li { font-size: 13px; color: var(--ink-2); }

/* Top nav links */
.nav-link, .main-nav a, .glaze-nav a { font-size: 14px; font-weight: 500; }

/* Buttons (design .btn = 13px/500; CTAs 14–15px/600) */
.btn, button.btn, .button, input.btn,
.btn-sm { font-size: 13px; font-weight: 500; }
.btn-primary, .btn-add-cart, .btn-buy-now, .btn-wishlist { font-size: 15px; font-weight: 600; }
.btn-lg { font-size: 16px; font-weight: 600; }

/* Product price */
.product-price, .price, .product-price-val { font-size: 28px; font-weight: 700; color: var(--ink); }
.product-card .price, .product-price--card { font-size: 16px; font-weight: 700; }

/* Sidebar (account / address book) */
.sidebar-link, .account-sidebar a, .sidebar-nav a { font-size: 13px; font-weight: 500; }
.sidebar-profile h3 { font-size: 16px; font-weight: 600; }
.sidebar-profile p { font-size: 12px; }

/* Section / card titles */
.section-title, .addr-section-title, .card-title, .panel-title { font-size: 22px; font-weight: 600; font-family: var(--font-display); }
.card-label, .addr-card-label, .default-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.badge, .pill, .cart-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; }

/* Form labels */
label, .form-label, .input-label { font-size: 13px; font-weight: 500; color: var(--ink); }
input, textarea, select, .form-control { font-family: var(--font-body); font-size: 14px; }

/* Alerts / notices */
.alert, .message, .alert-box { font-size: 14px; }

/* Footer */
.footer-col a, .footer-col p, .footer-brand p, .footer-bottom p { font-size: 13px; }
.footer-col h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

/* Mega-menu / dropdown */
.mega-col h5, .dropdown-menu a { font-size: 13px; }
.mega-col a { font-size: 13px; }
.mega-col .item-count, .dropdown-badge { font-size: 11px; }
.avatar { font-family: var(--font-display); font-size: 24px; font-weight: 600; }