:root{
  --fw-regular:400; /* @kind other */--fw-medium:500; /* @kind other */--fw-semibold:600; /* @kind other */--fw-bold:700; /* @kind other */--fw-extrabold:800; /* @kind other */

  /* Desktop scale — size / line-height / tracking */
  --display-size:76px;      --display-lh:1.02; /* @kind other */  --display-ls:-0.035em; /* @kind other */  --display-weight:var(--fw-extrabold); /* @kind other */
  --h1-size:56px;           --h1-lh:1.05; /* @kind other */       --h1-ls:-0.03em; /* @kind other */        --h1-weight:var(--fw-bold); /* @kind other */
  --h2-size:40px;           --h2-lh:1.1; /* @kind other */        --h2-ls:-0.025em; /* @kind other */       --h2-weight:var(--fw-bold); /* @kind other */
  --h3-size:28px;           --h3-lh:1.2; /* @kind other */        --h3-ls:-0.018em; /* @kind other */       --h3-weight:var(--fw-semibold); /* @kind other */
  --h4-size:20px;           --h4-lh:1.3; /* @kind other */        --h4-ls:-0.012em; /* @kind other */       --h4-weight:var(--fw-semibold); /* @kind other */
  --body-lg-size:19px;      --body-lg-lh:1.6; /* @kind other */   --body-lg-ls:-0.005em; /* @kind other */
  --body-size:16px;         --body-lh:1.65; /* @kind other */     --body-ls:0em; /* @kind other */
  --small-size:14px;        --small-lh:1.55; /* @kind other */    --small-ls:0em; /* @kind other */
  --caption-size:12px;      --caption-lh:1.45; /* @kind other */  --caption-ls:0.01em; /* @kind other */
  --eyebrow-size:12px;      --eyebrow-lh:1.2; /* @kind other */   --eyebrow-ls:0.14em; /* @kind other */    --eyebrow-weight:var(--fw-bold); /* @kind other */
  --button-size:15px;       --button-lh:1; /* @kind other */      --button-ls:-0.005em; /* @kind other */   --button-weight:var(--fw-semibold); /* @kind other */

  /* Mobile scale (applies ≤767px) */
  --display-size-m:40px;    --display-lh-m:1.06; /* @kind other */
  --h1-size-m:34px;         --h1-lh-m:1.1; /* @kind other */
  --h2-size-m:27px;         --h2-lh-m:1.15; /* @kind other */
  --h3-size-m:21px;
  --h4-size-m:18px;
  --body-lg-size-m:17px;
  --body-size-m:16px;
}

@media (max-width:767px){
  :root{
    --display-size:var(--display-size-m);--display-lh:var(--display-lh-m); /* @kind other */
    --h1-size:var(--h1-size-m);--h1-lh:var(--h1-lh-m); /* @kind other */
    --h2-size:var(--h2-size-m);--h2-lh:var(--h2-lh-m); /* @kind other */
    --h3-size:var(--h3-size-m);
    --h4-size:var(--h4-size-m);
    --body-lg-size:var(--body-lg-size-m);
  }
}

/* Utility classes — optional, tokens are the contract */
.db-display{font:var(--display-weight) var(--display-size)/var(--display-lh) var(--font-display);letter-spacing:var(--display-ls)}
.db-h1{font:var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-display);letter-spacing:var(--h1-ls)}
.db-h2{font:var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display);letter-spacing:var(--h2-ls)}
.db-h3{font:var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display);letter-spacing:var(--h3-ls)}
.db-h4{font:var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display);letter-spacing:var(--h4-ls)}
.db-body-lg{font:var(--fw-regular) var(--body-lg-size)/var(--body-lg-lh) var(--font-body);letter-spacing:var(--body-lg-ls)}
.db-body{font:var(--fw-regular) var(--body-size)/var(--body-lh) var(--font-body)}
.db-small{font:var(--fw-regular) var(--small-size)/var(--small-lh) var(--font-body)}
.db-caption{font:var(--fw-medium) var(--caption-size)/var(--caption-lh) var(--font-body);letter-spacing:var(--caption-ls)}
.db-eyebrow{font:var(--eyebrow-weight) var(--eyebrow-size)/var(--eyebrow-lh) var(--font-body);letter-spacing:var(--eyebrow-ls);text-transform:uppercase}