/* HI CHUYAN type: MiSans + DM Sans · scale / tracking / leading from brand sheet */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/dm-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/dm-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/dm-sans-700.woff2") format("woff2");
}

:root {
  --font: "MiSans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --font-en: "DM Sans", "MiSans", sans-serif;
  --font-mono: "DM Sans", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-caption: 11px;
  --fs-small: 13px;
  --fs-body: 16px;
  --fs-h3: 20px;
  --fs-h2: 32px;
  --fs-h1: 48px;
  --fs-hero: 72px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-display: 0.94;
  --lh-title: 1.12;
  --lh-sub: 1.2;
  --lh-body: 1.65;
  --lh-label: 1.4;

  --trk-display: -0.04em;
  --trk-title: -0.025em;
  --trk-body: 0.005em;
  --trk-label: 0.08em;

  --ink: #f5f4f0;
  --ink-muted: #888880;
  --ink-faint: #444440;
  --acid: #22d3ee;
  --acid-ink: #0a0a0a;
}

html {
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: var(--trk-body);
  line-height: var(--lh-body);
}
h1, h2 {
  font-weight: 700;
  letter-spacing: var(--trk-title);
  line-height: var(--lh-title);
}
h3, h4 {
  font-weight: 600;
  letter-spacing: var(--trk-title);
  line-height: var(--lh-sub);
}

.t-caption,
.t-label {
  font-family: var(--font-en);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--trk-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}
.t-small {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: var(--trk-body);
  line-height: var(--lh-label);
}
.t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--trk-label);
}