/* ---------------------------------------------------------------
   Typography — Alibaba Sans, one family across all weights
   --------------------------------------------------------------- */

@font-face {
  font-family: "Alibaba Sans";
  src: url("../assets/fonts/AlibabaSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alibaba Sans";
  src: url("../assets/fonts/AlibabaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alibaba Sans";
  src: url("../assets/fonts/AlibabaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alibaba Sans";
  src: url("../assets/fonts/AlibabaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alibaba Sans";
  src: url("../assets/fonts/AlibabaSans-Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alibaba Sans";
  src: url("../assets/fonts/AlibabaSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family: "Alibaba Sans", "Helvetica Neue", Arial, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  /* Type scale — desktop. Brief calls for Bold H1 48-56, SemiBold(→Bold) H2 32-40,
     Medium H3 24-28, Regular body 16, Regular small 14. We extend with a
     display size for hero moments and a caption/eyebrow size. */
  --text-display: 800 56px/1.1 var(--font-family);
  --text-h1: 700 48px/1.15 var(--font-family);
  --text-h2: 700 36px/1.2 var(--font-family);
  --text-h3: 500 26px/1.25 var(--font-family);
  --text-h4: 500 20px/1.3 var(--font-family);
  --text-body-lg: 400 18px/1.6 var(--font-family);
  --text-body: 400 16px/1.6 var(--font-family);
  --text-small: 400 14px/1.5 var(--font-family);
  --text-caption: 700 13px/1.4 var(--font-family);
  --text-button: 700 16px/1 var(--font-family);

  --letter-spacing-normal: 0;
  --letter-spacing-caption: 0.06em;

  --line-height-heading: 1.2;
  --line-height-body: 1.6;
}

/* Mobile-first: brief prioritizes mobile, especially for older users.
   Scale headings down slightly on small screens, never body text. */
@media (max-width: 767px) {
  :root {
    --text-display: 800 40px/1.15 var(--font-family);
    --text-h1: 700 34px/1.2 var(--font-family);
    --text-h2: 700 26px/1.25 var(--font-family);
    --text-h3: 500 22px/1.3 var(--font-family);
  }
}