/* =====================================================
   Typography mixins
   ===================================================== */

:root {
  /* Title: Typically used on titles of containers and modules */
  --typeset-title: {
    font-size: responsive 2rem 4rem;
    font-range: 30rem 60rem;
    font-weight: 700;
    font-variant: common-ligatures lining-nums;
    letter-spacing: -0.03125em;
    line-height: 0.95;

    @media print {
      font-size: 3rem;
    }
  }

  --typeset-summary-title: {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant: common-ligatures lining-nums;
    letter-spacing: -0.03125em;
    line-height: 0.95;
  }

  /* Prose: Typically used for running text */
  --typeset-prose: {
    font-family: serif;
    font-variant: common-ligatures oldstyle-nums;
    line-height: 1.5;
    letter-spacing: -0.0125em;
    hyphens: auto;
    hanging-punctuation: first;

    .fonts-loaded & {
      font-family: map(fonts, family-serif);
    }
  }

  /* Prose: */
  --typescale-prose: {
    font-size: responsive 0.9375rem 1.25rem;
    font-range: 30rem 60rem;

    @media print {
      font-size: 0.9375rem;
    }
  }

  /* Heading: Typically used for headings within areas of prose content */
  --typeset-heading: {
    font-family: sans-serif;
    font-variant: common-ligatures lining-nums;
    line-height: 1.25;
    letter-spacing: -0.025em;

    .fonts-loaded & {
      font-family: map(fonts, family-sans);
    }
  }

  /* Lede: Typically used for introductory text */
  --typeset-lede: {
    font-size: responsive 1.125rem 1.5rem;
    font-range: 30rem 60rem;
    font-family: sans-serif;
    font-weight: 400;
    font-variant: common-ligatures oldstyle-nums;
    line-height: 1.25;
    letter-spacing: -0.025em;

    @media print {
      font-size: 1.125rem;
    }

    .fonts-loaded & {
      font-family: map(fonts, family-sans);
    }
  }

  /* Caption: Typically used for supporting text */
  --typeset-caption: {
    font-size: responsive 0.875rem 1rem;
    font-range: 30rem 60rem;
    font-family: sans-serif;
    font-weight: 400;
    font-variant: common-ligatures lining-nums;
    line-height: 1.25;

    @media print {
      font-size: 0.875rem;
    }

    .fonts-loaded & {
      font-family: map(fonts, family-sans);
    }
  }

  /* Label: Typically used on UI labels and controls */
  --typeset-label: {
    font-size: 0.8125rem;
    line-height: calc(16 / 13);
  }

  /* Label: Typically used on UI labels and controls */
  --typeset-ui: {
    font-family: sans-serif;
    font-size: 1rem;
    line-height: calc(20 / 16);

    .fonts-loaded & {
      font-family: map(fonts, family-sans);
    }
  }
}
