/*
 * The website's sizes, shared by the homepage (home.css) and the privacy page (privacy.css), so the same
 * kind of text is the same size on every page. Change a size here rather than in a page's stylesheet.
 * The large headlines keep their own clamp() sizes: each scales with the window on its own.
 */
:root {
  /* Top bar: the same on every page. (Inside the extension, site.css hides the bar and sets the height to 0.) */
  --nav-height: 72px;
  --nav-logo: 40px;
  --nav-title-size: 21px;
  --nav-title-weight: 650;
  --nav-link-size: 15px;
  --nav-gap: 30px;

  /* Text, smallest to largest. */
  --size-micro: 10px; /* tiny labels inside the illustrations */
  --size-caption: 12px; /* footers, timestamps, hints */
  --size-label: 13px; /* chips and kickers inside the illustrations */
  --size-small: 14px; /* secondary text, small buttons */
  --size-ui: 15px; /* lists, form labels, fine print */
  --size-body: 17px; /* body text and buttons */
  --size-lead: 19px; /* intro paragraphs, large buttons */
  --size-title: 24px; /* card and tile titles */
}