/* FitBuddy typography, Spotter direction.
   Chivo Black in italic caps for hero moments and every number.
   Figtree for everything a person reads in a sentence.
   Space Mono for units, timestamps and eyebrows, the only place the system
   sets uppercase besides display. */
:root {
  --font-display: 'Chivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

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

  /* Display, Chivo 900. Italic caps is the signature; keep the caps small. */
  --fs-display-2xl: 62px; --lh-display-2xl: 0.86; --ls-display-2xl: -0.050em;
  --fs-display-xl:  46px; --lh-display-xl:  0.90; --ls-display-xl:  -0.045em;
  --fs-display-lg:  34px; --lh-display-lg:  1.00; --ls-display-lg:  -0.030em;
  --fs-display-md:  26px; --lh-display-md:  1.00; --ls-display-md:  -0.035em;
  --fs-display-sm:  21px; --lh-display-sm:  1.06; --ls-display-sm:  -0.030em;

  /* Title, Chivo 700, sentence case. Screen and card headings. */
  --fs-title-lg: 19.5px; --lh-title-lg: 1.22; --ls-title-lg: -0.014em;
  --fs-title-md: 17.5px; --lh-title-md: 1.26; --ls-title-md: -0.012em;
  --fs-title-sm: 16px;   --lh-title-sm: 1.30; --ls-title-sm: -0.010em;

  /* Body, Figtree. 13.5px is the minimum in product UI. */
  --fs-body-lg: 17px;   --lh-body-lg: 1.55;
  --fs-body-md: 15.5px; --lh-body-md: 1.55;
  --fs-body-sm: 13.5px; --lh-body-sm: 1.50;

  /* Label, Figtree 700. Buttons, tabs, chips. */
  --fs-label-lg: 15px;   --lh-label-lg: 1.20; --ls-label-lg: 0em;
  --fs-label-md: 13px;   --lh-label-md: 1.20; --ls-label-md: 0em;
  --fs-label-sm: 11.5px; --lh-label-sm: 1.20; --ls-label-sm: 0.010em;

  /* Data, Chivo 900 tabular. Numbers do the shouting. */
  --fs-data-2xl: 62px; --fs-data-xl: 44px; --fs-data-lg: 30px;
  --fs-data-md: 18px;  --fs-data-sm: 13px;

  /* Overline, Space Mono uppercase. 10px is the hard floor, and only for
     tab-bar labels, units and captions. Nothing below 15px on marketing. */
  --fs-overline: 11px; --ls-overline: 0.12em; --lh-overline: 1.2;
  --fs-caption: 10px;  --ls-caption: 0.09em;
}

/* Composed type roles. Apply as classes when hand-writing HTML;
   components set the same properties inline. */
.fb-display-2xl,.fb-display-xl,.fb-display-lg,.fb-display-md,.fb-display-sm{
  font-family:var(--font-display);font-weight:var(--fw-black);
  font-style:italic;text-transform:uppercase;text-wrap:balance;margin:0;
}
/* Roman display, for the moments where italic would be too much shouting. */
.fb-display-roman{font-style:normal}
.fb-display-2xl{font-size:var(--fs-display-2xl);line-height:var(--lh-display-2xl);letter-spacing:var(--ls-display-2xl)}
.fb-display-xl{font-size:var(--fs-display-xl);line-height:var(--lh-display-xl);letter-spacing:var(--ls-display-xl)}
.fb-display-lg{font-size:var(--fs-display-lg);line-height:var(--lh-display-lg);letter-spacing:var(--ls-display-lg)}
.fb-display-md{font-size:var(--fs-display-md);line-height:var(--lh-display-md);letter-spacing:var(--ls-display-md)}
.fb-display-sm{font-size:var(--fs-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--ls-display-sm)}

.fb-title-lg,.fb-title-md,.fb-title-sm{font-family:var(--font-display);font-weight:var(--fw-bold);margin:0}
.fb-title-lg{font-size:var(--fs-title-lg);line-height:var(--lh-title-lg);letter-spacing:var(--ls-title-lg)}
.fb-title-md{font-size:var(--fs-title-md);line-height:var(--lh-title-md);letter-spacing:var(--ls-title-md)}
.fb-title-sm{font-size:var(--fs-title-sm);line-height:var(--lh-title-sm);letter-spacing:var(--ls-title-sm)}

.fb-body-lg,.fb-body-md,.fb-body-sm{font-family:var(--font-sans);font-weight:var(--fw-regular);margin:0;text-wrap:pretty}
.fb-body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg)}
.fb-body-md{font-size:var(--fs-body-md);line-height:var(--lh-body-md)}
.fb-body-sm{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}

.fb-label-lg,.fb-label-md,.fb-label-sm{font-family:var(--font-sans);font-weight:var(--fw-bold)}
.fb-label-lg{font-size:var(--fs-label-lg);line-height:var(--lh-label-lg);letter-spacing:var(--ls-label-lg)}
.fb-label-md{font-size:var(--fs-label-md);line-height:var(--lh-label-md);letter-spacing:var(--ls-label-md)}
.fb-label-sm{font-size:var(--fs-label-sm);line-height:var(--lh-label-sm);letter-spacing:var(--ls-label-sm)}

.fb-data-2xl,.fb-data-xl,.fb-data-lg,.fb-data-md,.fb-data-sm{
  font-family:var(--font-display);font-weight:var(--fw-black);
  font-variant-numeric:tabular-nums;line-height:0.84;
}
.fb-data-2xl{font-size:var(--fs-data-2xl);letter-spacing:-0.050em}
.fb-data-xl{font-size:var(--fs-data-xl);letter-spacing:-0.045em}
.fb-data-lg{font-size:var(--fs-data-lg);letter-spacing:-0.040em;line-height:0.90}
.fb-data-md{font-size:var(--fs-data-md);letter-spacing:-0.030em;line-height:1}
.fb-data-sm{font-size:var(--fs-data-sm);letter-spacing:-0.020em;line-height:1}

.fb-overline{
  font-family:var(--font-mono);font-weight:400;font-size:var(--fs-overline);
  line-height:var(--lh-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;
}
.fb-caption{
  font-family:var(--font-mono);font-weight:400;font-size:var(--fs-caption);
  line-height:1.4;letter-spacing:var(--ls-caption);text-transform:uppercase;
}