/* Candosa type scale — Roboto, display weights at 700 with tight negative tracking.
   Sizes use clamp() for fluid display headings; body sizes are fixed. */

:root {
  /* ---- Weights ---- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* ---- Display / Hero ---- */
  --fs-display:   clamp(49px, 6.6vw, 108px);  /* @kind font */
  --lh-display:   0.94;     /* @kind other */
  --ls-display:   -0.045em; /* @kind other */

  /* ---- H2 (section heads) ---- */
  --fs-h2:        clamp(40px, 5vw, 76px);  /* @kind font */
  --lh-h2:        1.0;      /* @kind other */
  --ls-h2:        -0.04em;  /* @kind other */

  /* ---- H3 ---- */
  --fs-h3:        24px;     /* @kind font */
  --lh-h3:        1.1;      /* @kind other */
  --ls-h3:        -0.025em; /* @kind other */

  /* ---- Lede (intro paragraphs) ---- */
  --fs-lede:      19px;     /* @kind font */
  --lh-lede:      1.5;      /* @kind other */
  --ls-lede:      -0.005em; /* @kind other */

  /* ---- Body ---- */
  --fs-body:      15px;     /* @kind font */
  --lh-body:      1.55;     /* @kind other */
  --ls-body:      0;        /* @kind other */

  /* ---- Eyebrow / kicker ---- */
  --fs-eyebrow:   12.5px;   /* @kind font */
  --lh-eyebrow:   1.2;      /* @kind other */
  --ls-eyebrow:   0.08em;   /* @kind other */
  --tt-eyebrow:   uppercase;/* @kind other */

  /* ---- Small / caption ---- */
  --fs-small:     13px;     /* @kind font */
  --lh-small:     1.45;     /* @kind other */
}

/* ---- Specimen helper classes (optional; tokens above are the source of truth) ---- */
.cd-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
.cd-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}
.cd-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--ink);
}
.cd-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--ls-lede);
  color: var(--ink-soft);
}
.cd-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.cd-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: var(--tt-eyebrow);
  color: var(--muted);
}