/* BEX type — one family, two optical cuts, two weights, letter-spacing always normal. */
:root{
  --font-display:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-text:"Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  /* Optical size axis — this is what separates the Display cut from the Text cut */
  --opsz-display:"opsz" 32; /* @kind other */
  --opsz-text:"opsz" 14; /* @kind other */

  --weight-regular:400; /* @kind other */
  --weight-medium:500; /* @kind other */

  --size-hero:40px;        /* 2.50rem */
  --size-promo:22px;       /* 1.38rem */
  --size-product-name:17px;/* 1.06rem */
  --size-category-label:16px;
  --size-ui:14px;          /* 0.88rem — almost everything */

  --leading-hero:48px;     /* 1.20 */
  --leading-promo:20px;    /* 0.91 */
  --leading-product-name:20px; /* 1.18 */
  --leading-ui:16.8px;     /* 1.20 — nav items, button labels */
  --leading-body:20px;     /* 1.43 — body copy, sub-links */

  --tracking-normal:normal; /* @kind other */

  /* Role shorthands: font: <weight> <size>/<leading> <family> */
  --type-hero:var(--weight-medium) var(--size-hero)/var(--leading-hero) var(--font-display);
  --type-promo:var(--weight-regular) var(--size-promo)/var(--leading-promo) var(--font-text);
  --type-product-name:var(--weight-medium) var(--size-product-name)/var(--leading-product-name) var(--font-text);
  --type-category-label:var(--weight-medium) var(--size-category-label)/1.2 var(--font-text);
  --type-nav:var(--weight-medium) var(--size-ui)/var(--leading-ui) var(--font-text);
  --type-button:var(--weight-medium) var(--size-ui)/var(--leading-ui) var(--font-text);
  --type-body:var(--weight-regular) var(--size-ui)/var(--leading-body) var(--font-text);
  --type-sublink:var(--weight-regular) var(--size-ui)/var(--leading-body) var(--font-text);

  /* Mobile hero step-down (<768px) */
  --size-hero-mobile:28px;
  --leading-hero-mobile:34px;
}