:root {

  /*
  The USWDS TOKENS section creates CSS variables that mimic the tokens defined in the USWDS. Unless the USWDS 
  changes the token values, these values don't change. Many/most of these values aren't assigned directly as a 
  property value in a rule. Instead, they are used to establish the values that are available to be assigned to
  the theme-level variables in the THEME SETTINGS section. 
  Wherever possible, we are not duplicating all of the nested levels of token definitions that exist in USWDS.
  Sometimes you have to go through two or three layers of variable definitions to get to the actual value. 
  E.g., measure:standard:1 = $system-measure-smaller = 44ex. We're matching the names of the lowest-level tokens 
  where the actual value is defined. In this case, $system-measure-smaller, as opposed to creating our own 
  version of the unnested measure token name, which would be something like measure-1 or measure-standard-1. 
  We only create our own variable names where one is needed and not defined in USWDS. E.g., there is a "none"
  value possible for measure but there is no $system-measure-none token. So we create a --system-measure-none
  variable with value "none".
  
  As a group, the theme settings establish the customized look and feel for GAO reports. But because the theme 
  settings use USWDS token variables, their values will always align with what is allowed by the USWDS. The theme
  variables are usually the ones that get assigned to properties in rules. Then if we want to change the look of 
  something, we change which token variable is assigned to the corresponding theme variable. E.g., If we want 
  bigger H1 headings, we change the --theme-h1-font-size to use a bigger "type scale" token. Because the <h1> rule
  uses --theme-h1-font-size to set the font size, the rule doesn't need to change.
  
  Theme-level settings don't exist for everything. In those cases, we can assign a token variable directly in 
  the rule, OR create a custom theme setting if the setting may be reused in multiple rules. E.g., there is no 
  theme setting for heading color. We want to establish a base color for all headings. We may also want to make 
  sure we use that same color in some other places, like maybe a matching border or the text in a special type of
  box. In that case, we can define a theme variable for --theme-headings-color and then assign that variable to 
  color: in h1,h2,h3,h4,h5,h6,subhead classes, etc. and also to the border or text in the special box. That would
  ensure that the colors always match. Contrast that with using the token color variable directly. Then the color:
  is something like --theme-color-primary and you would assign that to the heading selectors and to the special box
  selector. In that case, if you wanted to change that color, you'd have to change the token assigned in both places
  and make sure they match. Unlike if you used the --theme-headings-color in both places, then you just change the 
  token variable assigned to --theme-headings-color. One change and you don't need to worry about checking all the
  rules where that color is used.
  */
  
  
  /*********     Variables for USWDS TOKENS     *********/

  /* ----------------------------------------
  Measure (max-width) tokens
  ----------------------------------------*/
  /* For line length. USWDS has 6 measure tokens to control the reading length of lines in a block of text. e.g., 
  max-width: measure(3); 
  Limiting the line length is vital for readability.*/

  --system-measure-smaller: 44ex; /* 1 */
  --system-measure-small: 60ex; /* 2 */
  --system-measure-base: 64ex; /* 3 */
  --system-measure-large: 68ex; /* 4 */
  --system-measure-larger: 72ex; /* 5 */
  --system-measure-largest: 88ex; /* 6 */
  --system-measure-none: none;


  /* ----------------------------------------
  Spacing (unit) tokens
  ----------------------------------------*/
  /* DO NOT use these tokens for the margins or padding on elements in the body content, like p, li, ul, etc.
    These are hard-coded values. The space inside the body needs to adjust according to the base font size
    selected by the user. E.g., the paragraph font size is 1rem and the space above and below a paragraph is set 
    to 1.25em. If they use the browser default font size, that will be 20px. But if they set their browser to use 
    a base size of "very large" the rem changes to 24px and 1.25em becomes 30px. That is the intended result for 
    accessibility. More examples: left indentation of lists and indented <p>s should scale with the item font size;
    the space between a number and text in numbered lists should scale with the font size.
    Note that this "rule" doesn't apply to the spacing in containers, such as padding in cells or colored boxes, or 
    page margins. That kind of spacing is where you use these system-spacing values to maintain consistency 
    regardless of font size. */
  
  /*  DR ?? fix system spacing vs content spacing */
  
  --system-spacing-base: 8px;

  /* smaller */
  --system-spacing-1px: 1px;
  --system-spacing-2px: 2px;

  /* smaller negative */
  --system-spacing-neg-1px: calc(var(--system-spacing-1px) * -1);
  --system-spacing-neg-2px: calc(var(--system-spacing-2px) * -1);

  /*small */
  --system-spacing-05: calc(var(--system-spacing-base) * 0.5); /* 4px */
  --system-spacing-1: var(--system-spacing-base); /* 8px */
  --system-spacing-105: calc(var(--system-spacing-base) * 1.5); /* 12px */
  --system-spacing-2: calc(var(--system-spacing-base) * 2); /* 16px */
  --system-spacing-205: calc(var(--system-spacing-base) * 2.5); /* 20px */
  --system-spacing-3: calc(var(--system-spacing-base) * 3); /* 24px */

  /* small negative */
  --system-spacing-neg-05: calc(var(--system-spacing-base) * -0.5); /* -4px  */
  --system-spacing-neg-1: calc(var(--system-spacing-base) * -1); /* -8px */
  --system-spacing-neg-105: calc(var(--system-spacing-base) * -1.5); /* -12px */
  --system-spacing-neg-2: calc(var(--system-spacing-base) * -2); /* -16px */
  --system-spacing-neg-205: calc(var(--system-spacing-base) * -2.5); /* -20px */
  --system-spacing-neg-3: calc(var(--system-spacing-base) * -3); /* -24px */

  /* medium */
  --system-spacing-4: calc(var(--system-spacing-base) * 4); /* 32px */
  --system-spacing-5: calc(var(--system-spacing-base) * 5); /* 40px */
  --system-spacing-6: calc(var(--system-spacing-base) * 6); /* 48px */
  --system-spacing-7: calc(var(--system-spacing-base) * 7); /* 56px */
  --system-spacing-8: calc(var(--system-spacing-base) * 8); /* 64px */
  --system-spacing-9: calc(var(--system-spacing-base) * 9); /* 72px */
  --system-spacing-10: calc(var(--system-spacing-base) * 10); /* 80px */
  --system-spacing-15: calc(var(--system-spacing-base) * 15); /* 120px */

  /*medium negative */
  --system-spacing-neg-4: calc(var(--system-spacing-base) * -4); /* -32px */
  --system-spacing-neg-5: calc(var(--system-spacing-base) * -5); /* -40px */
  --system-spacing-neg-6: calc(var(--system-spacing-base) * -6); /* -48px */
  --system-spacing-neg-7: calc(var(--system-spacing-base) * -7); /* -56px */
  --system-spacing-neg-8: calc(var(--system-spacing-base) * -8); /* -64px */
  --system-spacing-neg-9: calc(var(--system-spacing-base) * -9); /* -72px */
  --system-spacing-neg-10: calc(var(--system-spacing-base) * -10); /* -80px */
  --system-spacing-neg-15: calc(var(--system-spacing-base) * -15); /* -120px */

  /* large */ 
  --system-spacing-card: calc(var(--system-spacing-base) * 20); /* 160px */
  --system-spacing-card-lg: calc(var(--system-spacing-base) * 30); /* 240px */
  --system-spacing-mobile: calc(var(--system-spacing-base) * 40); /* 320px, default layout size  */

  /* larger */
  --system-spacing-mobile-lg: calc(var(--system-spacing-base) * 60); /* 480px, 30em media breakpoint */
  --system-spacing-tablet: calc(var(--system-spacing-base) * 80); /* 640px, 40em media breakpoint */
  --system-spacing-tablet-lg: calc(var(--system-spacing-base) * 110); /* 880px, 55em media breakpoint */

  /* largest */
  --system-spacing-desktop: calc(var(--system-spacing-base) * 128); /* 1024px, 64em media breakpoint */
  --system-spacing-desktop-lg: calc(var(--system-spacing-base) * 150); /* 1200px, 75em media breakpoint */
  --system-spacing-widescreen: calc(var(--system-spacing-base) * 175); /* 1400px, 87.5em media breakpoint */

  /* special */
  --system-spacing-0: 0;
  --system-spacing-auto: auto;
  --system-spacing-none: none;


  /* ----------------------------------------
  Letter spacing tokens
  ----------------------------------------*/
  /* Available but not used in USWDS except in H6 mixin.
    GAO uses letter spacing extensively and in instances where that use is questionable. They also
    don't use these tokens or values. */
  
  --ls-auto: initial;
  --ls-neg-3: -0.03em;
  --ls-neg-2: -0.02em;
  --ls-neg-1: -0.01em;
  --ls-1: 0.025em;
  --ls-2: 0.1em;
  --ls-3: 0.15em;


  /* ----------------------------------------
  Touch target variables
  ----------------------------------------*/

  --size-touch-target: var(--system-spacing-6); /* from USWDS; 48px to meet WCAG minimum of 44px */

  /* custom for GAO */
  /* 8px minimum space between adjacent touch targets, whether vertical, horizontal, or both */
  --size-touch-target-spacing: var(--system-spacing-1);

  /* ----------------------------------------
  Typeface tokens
  ----------------------------------------*/

  --font-stack-serif: "Merriweather", "Times New Roman", "Times", "Noto Sans Symbols 2", serif;
  /* Default is Merriweather Web + georgia stack = "Merriweather Web", "Georgia", "Cambria", "Times New Roman", "Times", serif;
    Merriweather, which is the same as what they call "Merriweather Web,"" is currently downloaded to user as a woff in main.css. */

  --font-stack-sans: "Lato", "Roboto", "Noto Sans Symbols 2", sans-serif;
  /* Default is Source Sans Pro Web + helvetica stack = "Source Sans Pro Web", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    GAO has chosen not to use Source Sans Pro.
    Added @import for Google font Lato in main.css, to avoid needing to define/download to user as a woff, ttf, etc. that we don't have. */

  --font-stack-monospace: "Roboto Mono", "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
  /* Added @import for Google font Roboto Mono in main.css, to avoid needing to define/download to user as a woff, ttf, etc. */

  /* These are USWDS default font stacks that we don't use. 
  --font-stack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-stack-georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
  --font-stack-helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  */


  /*---------------------------------------------
  Type scale
    -----------------------------------------------*/
  /* This section includes a combination of tokens and theme settings related to calculating
  and outputting font size and line height properties for different font families.
  
  The rem values that the browser ultimately uses to determine the pixel size for the font of any element
  is not defined directly in the rule for that element. USWDS uses a complicated calculation system to 
  determine "normalized" rem values for the specific font family assigned to the element. They claim that 
  normalized values help to make the visual display of the fonts supported by the USWDS consistent across 
  font families. This is a nice idea in theory. In practice, it makes virtually no visible difference in
  the two main font families that we are using.
  
  The base font size for NB is 100%, which is equivalent to 16px as the default in most browsers, but it
  can be set by users to be anything they want. Which is why we use 100%, meaning, for accessibility, let 
  the user decide what 100% means to them. They could set it to 32px or 200% or whatever, and any of our
  properties set to use rems or any other relative unit based on font size (em, ex, ch) will scale 
  according to the user's base unit.
  
  Here are the normalization values for the two fonts we're using: Merriweather and Lato, plus Source Sans
  Pro, which is the USWDS default and what we previously used. These values are used to calculate the rem 
  values for these font families.
  
    Supported typeface    Normalization multiplier
    Merriweather          0.98
    Source Sans Pro       1.06
    Lato                  Not supported, so we need to figure out multiplier, which is 0.9945, which is no
      visible difference. This is unnecessary complication and design overkill for no benefit to users.
  
  In the USWDS, the calculation for scale is : 
    $this-scale: tokens.$system-base-cap-height * math.div(general.strip-unit($scale), $cap-height) * 1px;
      with
    $system-base-cap-height: 362px;

  GAO has set the Lato cap height to 364 and uses a 100% (16px) base scale. 
    362 * (16/364) = 15.912 px
  There is less than a 0.1 pixel difference between letting the default Lato size be 100% vs. "normalizing" it.
  This is not necessary. To get the normalization multiplier, divice the normalized base scale by the base scale.
    15.912 / 16 = 0.9945
  
  Example: Say you have a big heading, scale 14, which is 40px:
  362 * (40/364) = 39.78. Again, 0.22 pixel difference. This is not visible on the page. It makes no visible 
  difference to "normalize" the Lato font. Merriweather is not quite as bad in terms of not making a visible 
  difference.

  The USWDS does all the scale and normalization calculations using nested layers of files during their build 
  process. NB doesn't have that luxury. We must establish values and do the calculations entirely in 
  css. We only need to do relevant font size calculations for the Merriweather and Lato fonts. Although we are 
  making Roboto Mono available for monospaced type, usage of monospace in reports is extremely rare, possibly
  nonexistent, and would never be in headings. So we aren't going to normalize the size and line height values 
  for that font family (although the multiplier is 0.95 if that's ever needed).

  The calculation is this:
    ((theme-type-scale / theme-root-font-size) * normalization multiplier) * 1rem
  
  The type scale value for the $theme font size assigned to the element, such as theme-type-scale-sm = 5. Type
      scale 5 = 16, which is really a pixel value but is unitless in our calculations.
    Divided by the theme-root-font-size, 16
      gives us the default scale proportion.
    Multiplied by the normalization multiplier for the $theme font family assigned to the element, such as 
      "--font-stack-serif", which is Merriweather, 0.98.
    Gives us an integer value that we want output as rem, so:
      Multiplied by 1rem
    To get the output value.
    YOU MUST MAKE SURE that the rem unit in HTML is set to 100% and is thus using 16px as the base rem unit. 
    If it is set to a pixel size, which you should never do, none of the calculations will produce the correct 
    result.

  This is the most direct calculation: get the scaled font size first, then normalize it for the family.

    E.g., in a rule with:
      font-family: var(--theme-heading-font-family);
      font-size: var(--theme-type-scale-sm-head);
    In USWDS settings: 
      --theme-font-role-heading: serif = --font-stack-serif = Merriweather
      --theme-type-scale-sm-body: 5 = 16
    Thus font size output to the brower is:
      16 / 16 = 1 (unitless)
      1 * 0.98 = 0.98 (unitless)
      0.98 * 1rem = 0.98rem

  You could also do the calculation this way for the same result, but it's not as direct:
    ((theme-type-scale * normalization multiplier) / theme-root-font-size) * 1rem
  This normalizes the scale setting first then divides it by the root to get the normalized font size.

  We don't have a build process that's going to go find all the layers of values and do these calculations for us.
  Instead, we need to do them in the theme variable definitions for the two main fonts we use. */

  /* Base font size
      Used ONLY in calculations in --theme-type-scale variables. The html/body font size is set to 100% but 
      we can't use that percentage to calculate rem values, so we use the default pixel size used by most 
      browsers for 100%. We want this as an integer we can use in calculations, so we don't want this to be in 
      any  particular unit, like px or rem. */
  --theme-root-font-size: 16; 

  /* Normalization multipliers
      For our two fonts, used ONLY in calculations in --theme-type-scale variables */
  --font-normalize-serif: 0.98;
  --font-normalize-sans: 0.9945;

  /* Type scale values
      Used ONLY in calculations in --theme-type-scale variables. In the USWDS, these are pixel values with 
      the px unit in them, as in 10px. But because we have to do the calculations ourselves, we want these to 
      be unitless values like the ones above. That way, we can set the calculated output unit to be whatever 
      we want, such as rem for font size, or leave it unitless such as for line height. */
  --system-type-scale-micro: 10;
  --system-type-scale-1: 12;
  --system-type-scale-2: 13;
  --system-type-scale-3: 14;
  --system-type-scale-4: 15;
  --system-type-scale-5: 16;
  --system-type-scale-6: 17;
  --system-type-scale-7: 18;
  --system-type-scale-8: 20;
  --system-type-scale-9: 22;
  --system-type-scale-10: 24;
  --system-type-scale-11: 28;
  --system-type-scale-12: 32;
  --system-type-scale-13: 36;
  --system-type-scale-14: 40;
  --system-type-scale-15: 48;
  --system-type-scale-16: 56;
  --system-type-scale-17: 64;
  --system-type-scale-18: 80;
  --system-type-scale-19: 120;
  --system-type-scale-20: 140;

  /* We can't have only one set of variables because we don't have a css build process that figures out which family is 
  being used and then does the calculation based on that family. We have to do the calculations ourselves,
  separately for each family, and make sure that our rules use the correct variables. */

  /* These are the variables to use for font sizes in rules where font-family: var(--theme-font-role-body); */
  --theme-type-scale-3xs-body: calc(((var(--system-type-scale-2) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 13, end note marker, footer text */
  --theme-type-scale-2xs-body: calc(((var(--system-type-scale-3) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 14, --theme-small-font-size used for "Share report" in report functions bar; text in toc toggle bar on mobile; fig and table source, notes, legends */
  --theme-type-scale-xs-body: calc(((var(--system-type-scale-4) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 15, for figure and table captions, secondary sidenav items, "share report  */
  --theme-type-scale-sm-body: calc(((var(--system-type-scale-5) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 16, --theme-body-font-size used for default body text size and logo text in footer */
  --theme-type-scale-md-body: calc(((var(--system-type-scale-6) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 17 */
  --theme-type-scale-lg-body: calc(((var(--system-type-scale-9) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 22 */
  --theme-type-scale-xl-body: calc(((var(--system-type-scale-12) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 32 */
  --theme-type-scale-2xl-body: calc(((var(--system-type-scale-14) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 40 */
  --theme-type-scale-3xl-body: calc(((var(--system-type-scale-15) * var(--font-normalize-sans)) / var(--theme-root-font-size)) * 1rem); /* 48 */

  /* These are the variables to use for font sizes in rules where font-family: var(--theme-font-role-heading);  */
  --theme-type-scale-3xs-head: calc(((var(--system-type-scale-2) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 13 */
  --theme-type-scale-2xs-head: calc(((var(--system-type-scale-3) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 14 */
  --theme-type-scale-xs-head: calc(((var(--system-type-scale-5) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem);/* 16, default is 4 (15) */
  --theme-type-scale-sm-head: calc(((var(--system-type-scale-7) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 18, default is 5 (16)*/
  --theme-type-scale-md-head: calc(((var(--system-type-scale-8) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 20, default is 6 (17) */
  --theme-type-scale-lg-head: calc(((var(--system-type-scale-10) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 24, default is 9 (22) */
  --theme-type-scale-xl-head: calc(((var(--system-type-scale-12) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 32 */
  --theme-type-scale-2xl-head: calc(((var(--system-type-scale-14) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 40 */
  --theme-type-scale-3xl-head: calc(((var(--system-type-scale-15) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 48 */

  /* ----------------------------------------
  Line height
  ---------------------------------------- */
    /* Numbers are unitless and mean the line height is calculated as a multiple of the element's font size.
      The USWDS chose these particular multipliers. */
  --lh-1: 1;
  --lh-2: 1.15;
  --lh-2r: 1.28;
  --lh-3: 1.35;
  --lh-4: 1.5;
  --lh-5: 1.62;
  --lh-6: 1.75;

  /* Like font sizes, the line height values output to the browser need to be "normalized" for each font.

  USWDS example:
    For size token 10 (24px) and line-height token 3 (1.35 / 32.4px) we see the following normalized ouput:
      Supported typeface   Normalization   Final size (px)   Final line height   Final line height (px)
      Merriweather         0.98            23.42             1.38                32.4
      Source Sans Pro      1.06            25.55             1.27                32.4

  In this example: 
    target line height = token 10 (24) * lh-3 (1.35) = 32.4 px
    actual line height = token 10 (24) * 1.35 = line height 32.4 * 0.98 merriweather normalizer = 31.752 px
      OR alternative calculation:
        token 10 (24) * 0.98 Merriweather normalizer = 23.52 * 1.35 lh = 31.752 px

  The formula for line height is:
    (((token 10 * lh-3) / (token 10 * lh-3 * normalizer)) * lh-3)

    Divide target by actual to get proportion of lh-3 value to normalized lh-3 value = 32.4/31.752 = 1.020408163265306
    Multiple default lh-3 by that proportion = 1.35 * 1.020408163265306 = 1.377551020408163 = 1.378
    To check the result, multiple the normalized lh-3 by the normalized font size:
      1.378 * 23.52 = 32.41056

  The USWDS/GAO has one variable for body line height and one for heading line height.

    --theme-line-height-sm-body: 6;
    --theme-heading-line-height: 2;

  We can't use these except as direction for which lh values to use in our calcualtions. Where the USWDS 
  has layers of calculations that can use the font family tokens and calculate accordingly, in CSS 
  calculations, we can't "find" the value of another property in the same rule and use that in calculations. 
  And the line height calculation is based on the value of the font-size property in the specific rule.

  E.g., say the rule looks like this:
    font-family: var(--theme-font-role-heading);
    font-size: var(--theme-type-scale-lg-head);
    line-height: [normalized equivalent of lh-2];

  When we calculate the line height, we have no way of knowing what the font-size value is in this specific
  rule. We can't "read" it from the rule. We could have any combination of scale and lh, such as sm/lh-6, 
  lg/lh-2, etc. And the value for the line height would be different for each combination. We have two 
  options: 1) use the token value directly, ignoring the normalization of line height because it makes 
  no visible difference in the layout, or 2) figure out the size/lh combinations that we're actually going 
  to use in our rules, then create individual line-height variables only for those combinations. E.g., in 
  our rules, H2 is lg scale with lh-2, so we define a custom theme setting variable that calculates that 
  specific line height, and we use that variable in the rule instead of the lh-2 token.

  Continuing the above example:
    A heading is in Merriweather, lg is scale token 10 (24), and lh-2 token is 1.15. Thus:
      Target line height = 24 * 1.15 = 27.6
      Actual line height = 24 * 1.15 * 0.98 = 27.048
        27.6 / 27.048  = 1.020408163265306
        1.020408163265306 * 1.15 = 1.173469387755102
    To check the result, the normalized font size * normalized lh should equal the target line height.
      23.52 [normalized font size: 24 * 0.98] * 1.173469387755102 = 27.6

  Is it worth doing all this work and individual calculations for a difference of 0.552px in the output?
  I don't think so, but it's what USWDS and GAO want. Maybe it makes a bigger difference for a 
  different family and size. Let's compare another one for body text. Our rule would look like this:
    font-family: var(--theme-font-role-body);
    font-size: var(--theme-type-scale-sm-body);
    line-height: [custom variable for normalized lh-6];
    Text scale 5 = 16
    lh-6 = 1.75
      Target line height = 16px * 1.75 = 28px
      Actual line height = 16 * 1.75 * 0.9945 = 27.846
  A difference of 0.154px. So that's another tiny difference that wouldn't be noticeable.
  
  The generic formula is:
    calc(((scale-n * lh-#) / (scale-n * lh-# * normalizer)) * lh-#);
  */

  /* -----------------------
  Normalized line heights for sans (family for the body font role) 
  -------------------------*/

  /* For GAO, the default body font is sans sm with lh 6. That is line height 1.75. The current GAO site uses 1.6875rem, 
      which is 27 pixels. Changing this to 16px with 1.75 = 28px target. */

  /* end note markers and default footer text */
  --theme-lh-1-3xs-body: calc(((var(--system-type-scale-2) * var(--lh-1)) / (var(--system-type-scale-2) * var(--lh-1) * var(--font-normalize-sans))) * var(--lh-1));

  /* footer text links on large desktop and larger */
  --theme-lh-6-3xs-body: calc(((var(--system-type-scale-2) * var(--lh-6)) / (var(--system-type-scale-2) * var(--lh-6) * var(--font-normalize-sans))) * var(--lh-6));

  /* side nav subitems */
  --theme-lh-3-xs-body: calc(((var(--system-type-scale-4) * var(--lh-3)) / (var(--system-type-scale-4) * var(--lh-3) * var(--font-normalize-sans))) * var(--lh-3));
  
  /* used for "Share report" in report functions bar */
  --theme-lh-2-2xs-body: calc(((var(--system-type-scale-3) * var(--lh-2)) / (var(--system-type-scale-3) * var(--lh-2) * var(--font-normalize-sans))) * var(--lh-2));

  /* --theme-small-font-size-line-height used for text in toc toggle bar on mobile; fig and table source, notes, legends */
  --theme-lh-4-2xs-body: calc(((var(--system-type-scale-3) * var(--lh-4)) / (var(--system-type-scale-3) * var(--lh-4) * var(--font-normalize-sans))) * var(--lh-4));
  
  /*  side nav, default for table td and th and their child elements */
  --theme-lh-3-sm-body: calc(((var(--system-type-scale-5) * var(--lh-3)) / (var(--system-type-scale-5) * var(--lh-3) * var(--font-normalize-sans))) * var(--lh-3));
  
  /* fig/table captions, section toc blocks, rpt-info text in header */
  --theme-lh-4-sm-body: calc(((var(--system-type-scale-5) * var(--lh-4)) / (var(--system-type-scale-5) * var(--lh-4) * var(--font-normalize-sans))) * var(--lh-4));
  
  /* --theme-body-line-height used on body element */
  --theme-lh-6-sm-body: calc(((var(--system-type-scale-5) * var(--lh-6)) / (var(--system-type-scale-5) * var(--lh-6) * var(--font-normalize-sans))) * var(--lh-6));

  /*For old reports:
      The body is 17px with no line height set, which is system-type-scale-6, lh-none.
      However, list items have a line height of 25.5, which is 1.5, which is --lh-4 and too big.
      The side nav main item is 17px with 22.1 px line height, which is system-type-scale-6, lh 1.3 which doesn't exist. Closest is lh-3 for 1.35.
      The side nav subitem is 15px with 19.5 line height, which is --system-type-scale-4, lh 1.3, which doesn't exist. Closest is lh-3 for 1.35. */

  /* -----------------------
  Normalized line heights for serif (family for the heading font role)
  -------------------------*/
  /* These are the ones in use in the USWDS theme settings below under Headings.
      Line height 2 (1.15) is too small for scales at 10 and below, but lh3 (1.35) is too big. Between the two, lh3 is better because reports often
      have multiline headings at level 3 (lg). */
   
   /* default is lh2, not used */
  --theme-lh3-3xs-head: calc(((var(--system-type-scale-2) * var(--lh-3)) / (var(--system-type-scale-2) * var(--lh-3) * var(--font-normalize-serif))) * var(--lh-3));

  /* default is lh2, footer contact heading */
  --theme-lh3-2xs-head: calc(((var(--system-type-scale-3) * var(--lh-3)) / (var(--system-type-scale-3) * var(--lh-3) * var(--font-normalize-serif))) * var(--lh-3));

  /* default is 4, lh2; --theme-h6-line-height used for H6 */
  --theme-lh3-xs-head: calc(((var(--system-type-scale-5) * var(--lh-3)) / (var(--system-type-scale-5) * var(--lh-3) * var(--font-normalize-serif))) * var(--lh-3));

  /* default is 5, lh2; --theme-h5-line-height used for H5; used directly in report-to text in header */
  --theme-lh2-sm-head: calc(((var(--system-type-scale-7) * var(--lh-3)) / (var(--system-type-scale-7) * var(--lh-3) * var(--font-normalize-serif))) * var(--lh-3));

  /* default is 6, lh2; --theme-h4-line-height for H4; used directly in report-to text in header on desktop */
  --theme-lh3-md-head: calc(((var(--system-type-scale-8) * var(--lh-3)) / (var(--system-type-scale-8) * var(--lh-3) * var(--font-normalize-serif))) * var(--lh-3));

  /* default is 9, lh2; --theme-h3-line-height for H3 and rpt-subtitle text in header;  */
  --theme-lh3-lg-head: calc(((var(--system-type-scale-10) * var(--lh-3)) / (var(--system-type-scale-10) * var(--lh-3) * var(--font-normalize-serif))) * var(--lh-3));

  /* default is lh2; --theme-h2-line-height for H2; not used directly  */
  --theme-lh2-xl-head: calc(((var(--system-type-scale-12) * var(--lh-2r)) / (var(--system-type-scale-12) * var(--lh-2r) * var(--font-normalize-serif))) * var(--lh-2r));

--theme-lh2-2xl-head: calc(((var(--system-type-scale-14) * var(--lh-2)) / (var(--system-type-scale-14) * var(--lh-2) * var(--font-normalize-serif))) * var(--lh-2)); 

--theme-lh2-3xl-head: calc(((var(--system-type-scale-15) * var(--lh-2)) / (var(--system-type-scale-15) * var(--lh-2) * var(--font-normalize-serif))) * var(--lh-2));

  /*********     THEME SETTINGS     *********/

  /* Theme setting variables related to type size and line height are in the previous section, grouped with their
      related tokens.
  
  /* The variables in this section mimic many of the theme settings in USWDS settings configuration, 
      https://designsystem.digital.gov/documentation/settings/ */
  
  /* Settings defined elsewhere:

    --theme-global-border-box-sizing: true, sets the box-sizing property of all site elements to border-box. 
        Implemented via a * selector in main.css in the normalize section.

    --theme-respect-user-font-size: true, set the html font size to 100% and use ems for media queries. Implemented 
        via selectors and media queries in main.css. */

  /* Settings from GAO that we don't use:

    // default hero
    $theme-hero-image: "/themes/custom/gao_uswds/dist/gao-img/hero.jpg", We don't have a hero image
  
    // fonts
    $theme-font-type-serif: "merriweather", We don't use this variable. We use the --font-stack-serif variable directly.
    $theme-navigation-font-family: "sans",  This is a custom variable that doesn't exist in USWDS. We have side navigation
      but I don't think we need a special variable for it when we can assign the --font-stack-sans variable directly.
    $theme-font-role-ui: "sans",  Used for buttons, sidenav, and identfier (which GAO doesn't use), according to USWDS component definitions.
    $theme-font-role-alt: "sans",  We don't use this.

  All the remaining custom GAO settings are incorporated into this stylesheet in the appropriate places. */


  /* ----------------------------------------
  Theme palette colors
  ---------------------------------------- */

  /* Base colors, theme-color-base-family: "gray-cool"; */
  --theme-color-base-lightest: #f0f0f0; /* gray-5 */
  --theme-color-base-lighter: #e6e6e6; /* gray-cool-10 */
  --theme-color-base-light: #c6cace; /* GAO gray-cool-20, default is gray-cool-30 #adadad */
  --theme-color-base: #757575; /* gray-cool-50 */
  --theme-color-base-dark: #5c5c5c; /* gray-cool-60 */
  --theme-color-base-darker: #454545; /* gray-cool-70 */
  --theme-color-base-darkest: #1b1b1b; /* gray-90 */
  --theme-color-base-ink: #1b1b1b; /* gray-90 */
  
  /* Primary colors, theme-color-primary-family: "blue"; */
  --theme-color-primary-lightest: #e1f3f8; /* GAO blue-cool-5v , default is undefined */
  --theme-color-primary-lighter: #d9e8f6; /* "blue-10 */
  --theme-color-primary-light: #a1d3ff; /* GAO blue-20v, default is blue-30 #73b3e7 */
  --theme-color-primary: #005ea2; /* blue-60v, rgb(0, 94, 162) */
  --theme-color-primary-vivid: #1a4480; /* GAO blue-warm-70v, default is blue-warm-60v #0050d8*/
  --theme-color-primary-dark: #162e51; /* GAO blue-warm-80v, default is blue-warm-70v #1a4480 */
  --theme-color-primary-darker: #13171f; /* GAO blue-warm-90, default is blue-warm-80v #162e51 */
  /*--theme-color-primary-darkest: false;*/

  /* Secondary colors, theme-color-secondary-family: "red"; */
  /*--theme-color-secondary-lightest: false;*/
  --theme-color-secondary-lighter: #f8e1de; /* GAO red-10, default is red-cool-10 #f3e1e4 */
  --theme-color-secondary-light: #f7bbb1; /* GAO red-20, default is red-30 #f2938c */
  --theme-color-secondary: #e41d3d; /* GAO red-cool-50v, default is red-50 #d83933 */
  --theme-color-secondary-vivid: #e41d3d; /* red-cool-50v */
  --theme-color-secondary-dark: #b50909; /* red-60v */
  --theme-color-secondary-darker: #8b0a03; /* red-70v */
  /*--theme-color-secondary-darkest: false;*/
  
  /* Accent warm colors, theme-color-accent-warm-family: GAO "gold-vivid" which doesn't exist (it's just "gold"), default is "orange"; */
  /*--theme-color-accent-warm-lightest: false; */
  --theme-color-accent-warm-lighter: #fef0c8; /* GAO gold-5v, default is orange-10 #f2e4d4 */
  --theme-color-accent-warm-light: #ffbc78; /* GAO uses gold-10v #ffe396, but I don't know where we would use it. We need the default 
      orange-20v #ffbc78 for the focus color in the footer. */
  --theme-color-accent-warm: #ffbe2e; /* GAO wants gold-20v, default is orange-30v #fa9441. */
  --theme-color-accent-warm-dark: #e66f0e; /* Changed to orange 40v for use as focus color. Default is orange-50v #c05600 */
  --theme-color-accent-warm-darker: #775540; /* orange-60 */
  /* --theme-color-accent-warm-darkest: false; */
  
  /* Accent cool colors, theme-color-accent-cool-family: GAO "green-cool", default is blue-cool"; */
  /* --theme-color-accent-cool-lightest: false; */
  --theme-color-accent-cool-lighter: #86b98e; /*GAO green-cool-30, default is blue-cool-5v #e1f3f8 */
  --theme-color-accent-cool-light: #5e9f69; /* GAO green-cool-40, default is blue-cool-20v #97d4ea */
  --theme-color-accent-cool: #008817; /* GAO green-cool-50v, default is cyan-30v #00bde3 */
  --theme-color-accent-cool-dark: #28a0cb; /* blue-cool-40v */
  --theme-color-accent-cool-darker: #07648d; /* blue-cool-60v */
  /* --theme-color-accent-cool-darkest: false; */


  /* ----------------------------------------
  State palette colors
  ---------------------------------------- */

  /* Error colors, --theme-color-error-family: "red-warm"; */
  --theme-color-error-lighter: #f4e3db; /* red-warm-10 */
  --theme-color-error-light: #f39268; /* red-warm-30v */
  --theme-color-error: #d54309; /* red-warm-50v */
  --theme-color-error-dark: #9c3d10; /* red-60v */
  --theme-color-error-darker: #6f3331; /* red-70 */
  /*  
  // Warning colors
  --theme-color-warning-family: "gold";
  --theme-color-warning-lighter: "yellow-5";
  --theme-color-warning-light: "yellow-10v";
  --theme-color-warning: "gold-20v";
  --theme-color-warning-dark: "gold-30v";
  --theme-color-warning-darker: "gold-50v";
  
  // Success colors
  --theme-color-success-family: "green-cool";
  --theme-color-success-lighter: "green-cool-5";
  --theme-color-success-light: "green-cool-20v";
  --theme-color-success: "green-cool-40v";
  --theme-color-success-dark: "green-cool-50v";
  --theme-color-success-darker: "green-cool-60v";
  
  /* Info colors, theme-color-info-family: "cyan"; */
  --theme-color-info-lighter: #e7f6f8; /* cyan-5 */
  --theme-color-info-light: #99deea; /* cyan-20 */
  --theme-color-info: #00bde3; /* cyan-30v */
  --theme-color-info-dark: #009ec1; /* cyan-40v */
  --theme-color-info-darker: #2e6276; /* blue-cool-60 */
  
  /* Disabled colors
  --theme-color-disabled-family: "gray";
  --theme-color-disabled-light: "gray-10";
  --theme-color-disabled: "gray-20";
  --theme-color-disabled-dark: "gray-30";
  
  // Emergency colors
  --theme-color-emergency: "red-warm-60v";
  --theme-color-emergency-dark: "red-warm-80";
  */


  /*  ------------------------------------------------------
  General colors, focus indicators, and default borders
  ----------------------------------------------------------*/
  
  --theme-body-background-color: white;
  --theme-text-color: var(--theme-color-base-ink);
  --theme-text-reverse-color: white;
  --theme-heading-color: var(--theme-color-primary-vivid); /* #1a4480, gao-rpt custom */
  --theme-link-color: var(--theme-color-primary); /* #005ea2; should not be used for any noninteractive elements */
  --theme-link-visited-color: #54278f; /* violet-70v */
  --theme-link-hover-color: var(--theme-color-primary-dark); /* #162e51 */
  --theme-link-active-color: var(--theme-color-primary-darker); /* #13171f */
  --theme-link-reverse-color: var(--theme-color-base-lighter); /* #e6e6e6 */
  --theme-link-reverse-hover-color: var(--theme-color-base-lightest); /* #f0f0f0 */
  --theme-link-reverse-active-color: white;
  /* No reason to change default focus settings, and they don’t need to be variables. The values can be set once
  in a wildcard rule that any element::focus (gets focus) uses these properties.*/
  --theme-focus-color: var(--theme-color-accent-warm-dark);
  --theme-focus-color-footer: var(--theme-color-accent-warm-light); /* added this variable because there is no orange, 
      gold, or yellow USWDS color that will pass AA checks for contrast on both the gray footer background and page white 
      background. Which means we need a different color in the footer specifically for contrast with that light gray background. */
  --theme-focus-offset: 0;
  --theme-focus-style: solid;
  --theme-focus-width: var(--system-spacing-05); /* 0.5 units */
  --theme-border-color: #8d9297; /* gray-cool 40, the lightest USWDS color that will pass graphics AA check on white background  */
  --theme-border-width: 1px;
  --theme-border-style: solid;
  --theme-highlight-color: var(--theme-color-base-lightest); /* for any background highlight, such as on hover in the sidenav */


  /* ----------------------------------------
  Spacing
  ---------------------------------------- */
  --theme-border-radius-sm: var(--system-spacing-2px); /* 2px */
  --theme-border-radius-md: var(--system-spacing-05); /* 0.5, 4px */
  --theme-border-radius-lg:var(--system-spacing-1); /* 1, 8px */
  --theme-column-gap-sm: var(--system-spacing-2px); /* 2px */
  --theme-column-gap-md: var(--system-spacing-2); /* 2 */
  --theme-column-gap-lg: var(--system-spacing-3); /* 3 */
  --theme-column-gap-mobile: var(--system-spacing-2); /* 2 */
  --theme-column-gap-desktop: var(--system-spacing-4); /* 4 */
  --theme-grid-container-max-width: var(--system-spacing-widescreen); /* default is "desktop" */
  --theme-site-margins-breakpoint: var(--system-spacing-tablet); /* default is "desktop, but we have margins get bigger at tablet" */
  --theme-site-margins-width: var(--system-spacing-4); /* 4, 32px for tablet and bigger  */
  --theme-site-margins-mobile-width: var(--system-spacing-1); /* 1, 8px; was 2, 16px */


  /* ----------------------------------------
  Font Roles
  ---------------------------------------- */
  --theme-font-role-heading: var(--font-stack-serif);
  --theme-font-role-body: var(--font-stack-sans);
  --theme-font-role-code: var(--font-stack-monospace);
  --theme-font-role-ui: var(--font-stack-sans);


  /* ----------------------------------------
  Font Weights
  ---------------------------------------- */
  --theme-font-weight-thin: false;
  --theme-font-weight-light: 300;
  --theme-font-weight-normal: 400;
  --theme-font-weight-medium: false;
  --theme-font-weight-semibold: false;
  --theme-font-weight-bold: 700;
  --theme-font-weight-heavy: false;

  /* ----------------------------------------
  Body settings
  ---------------------------------------- */
  /* The equivalent of setting the <body> element 
  We aren't using theme-body-font-family because there's no equivalent theme-heading-font-family setting,
  and we don't need so many levels of nested variables. We declare the font families for body and heading roles
  and can use those role variables for font-family properties in rules. 
  Body font family is set by --theme-font-role-body, earlier in this file. */
  --theme-body-font-size: var(--theme-type-scale-sm-body);
  --theme-body-line-height: var(--theme-lh-6-sm-body); /* Default is 5, GAO uses 6 */
  --theme-small-font-size: var(--theme-type-scale-2xs-body); /* We use for "share" paragraph in header, normal text in footer, table and figure notes, source, and legend. */
  --theme-small-font-size-line-height: var(--theme-lh-4-2xs-body); /* no line height is specified so used smaller than 1.75 body text  */
  --theme-display-font-size: var(--theme-type-scale-3xl-body); /* not used: "For largest text on a site" */
  --theme-display-font-size-line-height: var(--theme-lh2-3xl-body); /* no line height specified, assuming normal body lh */

  /* ----------------------------------------
  Headings settings
  ---------------------------------------- */
  /* Heading font family is set by -- theme-font-role-heading, under Font Roles. */
  
  /* --theme-heading-line-height: 2; We can't have the same line height on all headings because it must be 
      normalized based on the font size and family.  */
  --theme-h1-font-size: var(--theme-type-scale-2xl-head);
  --theme-h1-line-height: var(--theme-lh2-2xl-head);
  --theme-h2-font-size: var(--theme-type-scale-xl-head); /* We use USWDS default xl 12, 32px. GAO uses 10, which is not 
      defined in the named type scales. It's also too small for reports. */
  --theme-h2-line-height: var(--theme-lh2-xl-head);
  --theme-h3-font-size: var(--theme-type-scale-lg-head); /* We use 10, 24px. USWDS default is lg 9, which is too small. 
      GAO uses 6, which is much too small. */
  --theme-h3-line-height: var(--theme-lh3-lg-head);
  --theme-h4-font-size: var(--theme-type-scale-md-head); /* We use md 8. USWDS default sm 5, which is too small. */
  --theme-h4-line-height: var(--theme-lh3-md-head);
  --theme-h5-font-size: var(--theme-type-scale-sm-head); /* We use sm 7. USWDS default is xs 4, which is too small. */
  --theme-h5-line-height: var(--theme-lh2-sm-head);
  --theme-h6-font-size: var(--theme-type-scale-xs-head); /* We use xs 5. USWDS default is 3xs 2, which is too small. */
  --theme-h6-line-height: var(--theme-lh3-xs-head);

  /* Custom type size for the gigantic "Restricted" watermark in Watchdog and Prerelease report versions  */
  --theme-type-scale-watermark: calc(((var(--system-type-scale-17) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* 48 */
  --theme-lh1-watermark: calc(((var(--system-type-scale-17) * var(--lh-1)) / (var(--system-type-scale-17) * var(--lh-1) * var(--font-normalize-serif))) * var(--lh-1));

  /* ----------------------------------------
  Text and prose
  ---------------------------------------- */
  --theme-text-measure-narrow: var(--system-measure-smaller);
  --theme-text-measure: var(--system-measure-larger); /* Default was --system-measure-large but we use this to limit the
      size of the report-title container in the header that needs to wrap next to the logo at 1200px layout and above.
      Limiting the size of the container means we don't have to redefine the max width line lengths for all the elements
      inside the container because the container will limit them if they're too large for a particular layout size. */
  --theme-text-measure-wide: var(--system-measure-largest);
  --theme-heading-margin-top: var(--content-spacing-2);
  --theme-paragraph-margin-top: var(--content-spacing-105);

/* ----------------------------------------
  Typography Spacing (custom)
  ----------------------------------------*/
  /* These are the relative spacing variables to use for the margins or padding on elements in the body content, 
    like p, li, ul, etc.
    The space inside the body needs to adjust according to the base font size selected by the user. E.g., the 
    paragraph font size is 1rem and the space above and below a paragraph is set to 1.25em. If they use the browser
    default font size, that will be 20px. But if they set their browser to use a base size of "very large" the rem 
    changes to 24px and 1.25em becomes 30px. That is the intended result for accessibility. More examples: left 
    indentation of lists and indented <p>s should scale with the item font size; the space between a number and text 
    in numbered lists should scale with the font size.
    Do not use these for spacing in containers, such as padding in cells or colored boxes, or page/block margins. 
    That kind of spacing is where you use the hard-coded system-spacing values to maintain consistency regardless of
    font size.
    IMPORTANT: Vertical spacing between content elements is set by the top margin on each element. Thus, the space
    after element 1 and before the element 2 is determined by the top margin of element 2.
  */

  --content-spacing-base: 1em; /* 16px where font-size is 1rem and base rem is 16px */
  --content-spacing-025: calc(var(--content-spacing-base) * 0.25);
  --content-spacing-05: calc(var(--content-spacing-base) * 0.5);
  --content-spacing-1: var(--content-spacing-base);
  --content-spacing-105: calc(var(--content-spacing-base) * 1.5);
  --content-spacing-2: calc(var(--content-spacing-base) * 2);
  --content-spacing-205: calc(var(--content-spacing-base) * 2.5);
  --content-spacing-3: calc(var(--content-spacing-base) * 3);
  --theme-list-indent: var(--content-spacing-205);
  --theme-list-indent-table: var(--content-spacing-105);


  /* ----------------------------------------
  Lead text
  ---------------------------------------- */

  --theme-lead-font-family: var(--theme-font-role-heading); /* used for report title H1 */
  --theme-lead-font-size: calc(((var(--system-type-scale-9) * var(--font-normalize-serif)) / var(--theme-root-font-size)) * 1rem); /* default is 9; used for report title H1 in header on mobile and large mobile */
  --theme-lead-line-height: calc(((var(--system-type-scale-9) * var(--lh-3)) / (var(--system-type-scale-9) * var(--lh-3) * var(--font-normalize-serif))) * var(--lh-3)); /* default line height is 6, but that's way too big; used for report title H1 in header on mobile and large mobile */
  --theme-lead-measure: var(--theme-text-measure); /* Default max width of the report title block in header */


  /* ----------------------------------------
  "General settings" for theme
  ---------------------------------------- */
  /* 
  Default of 16px (hard-coded) is too small for mobile and tablet given minimum touch target sizes where you don't want a tiny icon inside a large touch 
  area. Assign to height in css for svg and let width auto adjust.*/

  --theme-icon-image-size: 2em; /* ~28px */
  --theme-icon-image-size-desktop: 1.5em; /* ~21px */


  /* ------------------------------------------------
  Theme Component settings for individual components
  --------------------------------------------------- */


  /* Accordion */
  --theme-accordion-border-width: 0.5;
  --theme-accordion-border-color: "base-lightest";
  --theme-accordion-font-family: "body";


  /*  Button */
  --theme-button-font-family: var(--theme-font-role-ui);
  --theme-button-border-radius: var(--theme-border-radius-md); /* 4px */
  --theme-button-small-width: var(--system-spacing-6); /* 48px */
  --theme-button-stroke-width: 2px;

/* Footer */
  --theme-footer-font-family: var(--theme-font-role-body);
  --theme-footer-background-color: var(--theme-color-base-dark);
/*  This is the inside container for the content, not the outer container that stretches the background color to the page edge. */
  --theme-footer-max-width: var(--theme-grid-container-max-width);

}