/* ==========================================================================
   DEXIE theme - type system
   Loads after dexie.css, before dexie-motion.css.

   Archivo carries structure: wordmark, headings, navigation, labels, prices.
   Karla carries reading: product copy, descriptions, body text.

   Both self-hosted. No CDN, no external request, nothing to leak or break.
   ========================================================================== */

:root {
  --font-display: 'Archivo', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Karla', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* One scale, used everywhere. */
  --t-micro: 10.5px;   /* eyebrows, flags */
  --t-util:  12px;     /* utility chrome, nav */
  --t-small: 13.5px;   /* captions, footer links */
  --t-body:  15.5px;   /* reading */
  --t-lead:  17px;     /* intro copy */
}

/* ---------- reading ------------------------------------------------------ */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: .002em;
}

/* ---------- structure ---------------------------------------------------- */
h1, h2, h3, h4, h5,
.dx-wordmark,
.dx-slot__title,
.dx-sechead h3,
.dx-tradecta h3,
.dx-tile__name,
.btn, .dx-btn-cart, .dx-slot__btn,
#menu .nav-link, .navbar .nav-link,
.dx-utilitybar__link, .dx-iconlink,
.dx-sechead__link, .dx-slot__eyebrow, .dx-sechead__eyebrow,
.dx-brand, .dx-flag, .dx-saving, .dx-trade-tag,
.price-new, .price-old, .dx-contact__label,
footer h5, .dx-footer h5, .dx-pay span, .dx-credit {
  font-family: var(--font-display);
  font-feature-settings: 'ss01';
}

/* Display sizes: tight tracking, heavy, uppercase. Archivo holds up wide. */
.dx-wordmark      { font-weight: 800; letter-spacing: -.05em; }
.dx-slot__title   { font-weight: 800; letter-spacing: -.05em; line-height: .96; }
.dx-sechead h3,
.dx-tradecta h3   { font-weight: 800; letter-spacing: -.042em; }
h1, h2            { font-weight: 800; letter-spacing: -.045em; }
h3, h4            { font-weight: 700; letter-spacing: -.02em; }

/* Utility chrome stays small, tight and deliberate rather than soft grey. */
#menu .nav-link, .navbar .nav-link {
  font-size: var(--t-util); font-weight: 600; letter-spacing: .09em;
}
.dx-utilitybar__link { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; }
.dx-iconlink         { font-size: var(--t-util); font-weight: 600; letter-spacing: .03em; }
.dx-slot__eyebrow,
.dx-sechead__eyebrow { font-size: var(--t-micro); font-weight: 700; letter-spacing: .22em; }

/* ---------- product name: the thing being sold --------------------------- */
.product-thumb .caption h4 {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.004em;
}
.dx-brand {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .17em;
}

/* ---------- prices: numbers should line up ------------------------------- */
.price-new, .price-old, .dx-saving, #product .price-new {
  font-variant-numeric: tabular-nums lining-nums;
}
.price-new  { font-weight: 700; letter-spacing: -.032em; }
.price-old  { font-weight: 400; }
.dx-saving  { font-weight: 700; letter-spacing: .05em; font-size: 11px; }

/* ---------- product copy reads like copy --------------------------------- */
#product .description,
.dx-footer__blurb,
.dx-tradecta p,
.dx-slot__text {
  font-family: var(--font-body);
  line-height: 1.65;
}
#product #tab-description { max-width: 68ch; }

/* ---------- buttons ------------------------------------------------------ */
.btn, .dx-btn-cart, .dx-slot__btn {
  font-weight: 700;
  letter-spacing: .13em;
  font-size: 11.5px;
}

/* ---------- mobile: never below 16px in inputs (stops iOS zoom) ---------- */
@media (max-width: 767px) {
  .form-control, .form-select, input, select, textarea { font-size: 16px; }
  body { font-size: 15px; }
}