/* Inter for expressive headlines, Roboto for functional detail, Roboto Mono for
   timestamps / identifiers / event names. Sentence case for content;
   spaced uppercase reserved for short labels. */
:root{
  --font-display:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ui:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fw-regular:400; /* @kind font */ --fw-medium:500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold:700; /* @kind font */ --fw-black:900; /* @kind font */

  /* Scale (px). Loud -> quiet. */
  --fs-hero:clamp(56px,9vw,160px); /* @kind font */   /* one word or number, campaign scale */
  --fs-display-1:64px; /* @kind font */
  --fs-display-2:48px; /* @kind font */
  --fs-title-1:36px; /* @kind font */
  --fs-title-2:28px; /* @kind font */
  --fs-title-3:22px; /* @kind font */
  --fs-title-4:18px; /* @kind font */
  --fs-body-lg:17px; /* @kind font */
  --fs-body:15px; /* @kind font */
  --fs-body-sm:13px; /* @kind font */
  --fs-caption:12px; /* @kind font */
  --fs-label:11px; /* @kind font */

  --lh-tight:0.94; /* @kind font */ --lh-snug:1.08; /* @kind font */ --lh-heading:1.18; /* @kind font */ --lh-body:1.5; /* @kind font */ --lh-loose:1.65; /* @kind font */
  --ls-hero:-0.045em; /* @kind font */ --ls-display:-0.03em; /* @kind font */ --ls-heading:-0.018em; /* @kind font */
  --ls-body:0em; /* @kind font */ --ls-label:0.16em; /* @kind font */ --ls-label-wide:0.24em; /* @kind font */

  /* Composed roles */
  --type-hero:var(--fw-black) var(--fs-hero)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-display-1:var(--fw-bold) var(--fs-display-1)/var(--lh-snug) var(--font-display); /* @kind font */
  --type-display-2:var(--fw-bold) var(--fs-display-2)/var(--lh-snug) var(--font-display); /* @kind font */
  --type-title-1:var(--fw-bold) var(--fs-title-1)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-title-2:var(--fw-bold) var(--fs-title-2)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-title-3:var(--fw-semibold) var(--fs-title-3)/1.3 var(--font-display); /* @kind font */
  --type-title-4:var(--fw-semibold) var(--fs-title-4)/1.35 var(--font-display); /* @kind font */
  --type-body-lg:var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-ui); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); /* @kind font */
  --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-ui); /* @kind font */
  --type-caption:var(--fw-regular) var(--fs-caption)/1.4 var(--font-ui); /* @kind font */
  --type-label:var(--fw-medium) var(--fs-label)/1.2 var(--font-ui); /* @kind font */
  --type-mono:var(--fw-regular) var(--fs-body-sm)/1.5 var(--font-mono); /* @kind font */
  --type-metric:var(--fw-bold) var(--fs-title-1)/1 var(--font-display); /* @kind font */
}
/* Numbers must stay comparable. */
.ot-tabular,table,.ot-metric{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ot-label{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.ot-mono{font:var(--type-mono)}