/**
 * Shared usage tokens.
 */

/*
 * `borderSubtle` is decorative and must not provide a required boundary.
 * Use `focusRing` and `focusRingContrast` together for focus indicators.
 * The *Theme roles retain each theme's normal palette at Background boundaries.
 * They point straight to value tokens, never back to the remappable roles:
 * inherited custom-property aliases are already resolved on their owner.
 * The on-dark muted and interactive accent text use 100 stops for AA on the
 * Interactive surface (approximately a 600 stop); base maize is not AA there.
 * Paired control, status and on-brand roles stay fixed to their own surfaces.
 */

/* Color roles: default theme. */

:root,
[data-theme="default"] {
  color-scheme: light;

  /* Stable theme values let a nested neutral surface reset an outer palette. */
  --marsal-color-textPrimaryTheme: var(--marsal-color-pumaBlack-700);
  --marsal-color-textStrongTheme: var(--marsal-color-pumaBlack);
  --marsal-color-textMutedTheme: var(--marsal-color-pumaBlack-600);
  --marsal-color-textBrandTheme: var(--marsal-color-blue);
  --marsal-color-linkTheme: var(--marsal-color-arboretumBlue);
  --marsal-color-borderSubtleTheme: var(--marsal-color-pumaBlack-200);
  --marsal-color-borderDefaultTheme: var(--marsal-color-pumaBlack-500);
  --marsal-color-borderControlTheme: var(--marsal-color-pumaBlack-600);
  --marsal-color-borderInteractiveTheme: var(--marsal-color-arboretumBlue);
  --marsal-color-borderAccentTheme: var(--marsal-color-maize-500);
  --marsal-color-dividerAccentTheme: var(--marsal-color-maize);
  --marsal-color-focusRingTheme: var(--marsal-color-blue);
  --marsal-color-focusRingContrastTheme: var(--marsal-color-white);

  /* Fixed surface pairs remain independent of the surrounding theme. */
  --marsal-color-textMutedOnDark: var(--marsal-color-pumaBlack-100);
  --marsal-color-textAccentOnInteractive: var(--marsal-color-maize-100);
  --marsal-color-textMutedOnAccent: var(--marsal-color-blue-700);
  --marsal-color-linkOnAccent: var(--marsal-color-blue);
  --marsal-color-borderSubtleOnDark: var(--marsal-color-pumaBlack-500);
  --marsal-color-borderOnDark: var(--marsal-color-pumaBlack-100);
  --marsal-color-borderAccentOnDark: var(--marsal-color-maize);
  --marsal-color-borderSubtleOnAccent: var(--marsal-color-maize-500);
  --marsal-color-borderOnAccent: var(--marsal-color-blue);
  --marsal-color-focusRingOnDark: var(--marsal-color-white);
  --marsal-color-focusRingContrastOnDark: var(--marsal-color-blue);

  --marsal-color-surfaceCanvas: var(--marsal-color-white);
  --marsal-color-surfacePrimary: var(--marsal-color-white);
  --marsal-color-surfaceSubtle: var(--marsal-color-pumaBlack-050);
  --marsal-color-surfaceBrand: var(--marsal-color-blue);
  --marsal-color-surfaceInteractive: var(--marsal-color-arboretumBlue);
  --marsal-color-surfaceAccent: var(--marsal-color-maize);
  --marsal-color-surfaceScrim: color-mix(in srgb, var(--marsal-color-blue) 80%, transparent);
  --marsal-color-textPrimary: var(--marsal-color-pumaBlack-700);
  --marsal-color-textStrong: var(--marsal-color-pumaBlack);
  --marsal-color-textMuted: var(--marsal-color-pumaBlack-600);
  --marsal-color-textBrand: var(--marsal-color-blue);
  --marsal-color-textOnBrand: var(--marsal-color-white);
  --marsal-color-textAccentOnBrand: var(--marsal-color-maize);
  --marsal-color-textOnInteractive: var(--marsal-color-white);
  --marsal-color-textOnAccent: var(--marsal-color-blue);
  --marsal-color-link: var(--marsal-color-arboretumBlue);
  --marsal-color-linkOnBrand: var(--marsal-color-white);
  --marsal-color-borderSubtle: var(--marsal-color-pumaBlack-200);
  --marsal-color-borderDefault: var(--marsal-color-pumaBlack-500);
  --marsal-color-borderControl: var(--marsal-color-pumaBlack-600);
  --marsal-color-borderInteractive: var(--marsal-color-arboretumBlue);
  --marsal-color-borderAccent: var(--marsal-color-maize-500);
  --marsal-color-dividerAccent: var(--marsal-color-maize);
  --marsal-color-focusRing: var(--marsal-color-blue);
  --marsal-color-focusRingContrast: var(--marsal-color-white);
  --marsal-color-surfaceControl: var(--marsal-color-white);
  --marsal-color-textControl: var(--marsal-color-pumaBlack-700);
  --marsal-color-surfaceControlDisabled: var(--marsal-color-pumaBlack-100);
  --marsal-color-textControlDisabled: var(--marsal-color-pumaBlack-600);
  --marsal-color-borderControlDisabled: var(--marsal-color-pumaBlack-500);
  --marsal-color-surfaceStatusSuccess: var(--marsal-color-rackhamRoofGreen-100);
  --marsal-color-textStatusSuccess: var(--marsal-color-rackhamRoofGreen-700);
  --marsal-color-borderStatusSuccess: var(--marsal-color-rackhamRoofGreen-500);
  --marsal-color-surfaceStatusWarning: var(--marsal-color-maize-100);
  --marsal-color-textStatusWarning: var(--marsal-color-maize-700);
  --marsal-color-borderStatusWarning: var(--marsal-color-maize-500);
  --marsal-color-surfaceStatusError: var(--marsal-color-tappanRed-100);
  --marsal-color-textStatusError: var(--marsal-color-tappanRed-700);
  --marsal-color-borderStatusError: var(--marsal-color-tappanRed-500);
  --marsal-color-surfaceStatusInfo: var(--marsal-color-arboretumBlue-100);
  --marsal-color-textStatusInfo: var(--marsal-color-arboretumBlue-700);
  --marsal-color-borderStatusInfo: var(--marsal-color-arboretumBlue-500);
}

/* Color roles: dark theme. */

[data-theme="dark"] {
  color-scheme: dark;

  /* Stable theme values let a nested neutral surface reset an outer palette. */
  --marsal-color-textPrimaryTheme: var(--marsal-color-pumaBlack-100);
  --marsal-color-textStrongTheme: var(--marsal-color-white);
  --marsal-color-textMutedTheme: var(--marsal-color-pumaBlack-400);
  --marsal-color-textBrandTheme: var(--marsal-color-maize);
  --marsal-color-linkTheme: var(--marsal-color-arboretumBlue-300);
  --marsal-color-borderSubtleTheme: var(--marsal-color-pumaBlack-700);
  --marsal-color-borderDefaultTheme: var(--marsal-color-pumaBlack-500);
  --marsal-color-borderControlTheme: var(--marsal-color-pumaBlack-400);
  --marsal-color-borderInteractiveTheme: var(--marsal-color-arboretumBlue-300);
  --marsal-color-borderAccentTheme: var(--marsal-color-maize);
  --marsal-color-dividerAccentTheme: var(--marsal-color-maize);
  --marsal-color-focusRingTheme: var(--marsal-color-blue);
  --marsal-color-focusRingContrastTheme: var(--marsal-color-white);

  /* Fixed surface pairs remain independent of the surrounding theme. */
  --marsal-color-textMutedOnDark: var(--marsal-color-pumaBlack-100);
  --marsal-color-textAccentOnInteractive: var(--marsal-color-maize-100);
  --marsal-color-textMutedOnAccent: var(--marsal-color-blue-700);
  --marsal-color-linkOnAccent: var(--marsal-color-blue);
  --marsal-color-borderSubtleOnDark: var(--marsal-color-pumaBlack-500);
  --marsal-color-borderOnDark: var(--marsal-color-pumaBlack-100);
  --marsal-color-borderAccentOnDark: var(--marsal-color-maize);
  --marsal-color-borderSubtleOnAccent: var(--marsal-color-maize-500);
  --marsal-color-borderOnAccent: var(--marsal-color-blue);
  --marsal-color-focusRingOnDark: var(--marsal-color-white);
  --marsal-color-focusRingContrastOnDark: var(--marsal-color-blue);

  --marsal-color-surfaceCanvas: var(--marsal-color-pumaBlack-950);
  --marsal-color-surfacePrimary: var(--marsal-color-pumaBlack-900);
  --marsal-color-surfaceSubtle: var(--marsal-color-pumaBlack-800);
  --marsal-color-surfaceBrand: var(--marsal-color-blue);
  --marsal-color-surfaceInteractive: var(--marsal-color-arboretumBlue);
  --marsal-color-surfaceAccent: var(--marsal-color-maize);
  --marsal-color-surfaceScrim: color-mix(in srgb, var(--marsal-color-blue) 80%, transparent);
  --marsal-color-textPrimary: var(--marsal-color-pumaBlack-100);
  --marsal-color-textStrong: var(--marsal-color-white);
  --marsal-color-textMuted: var(--marsal-color-pumaBlack-400);
  --marsal-color-textBrand: var(--marsal-color-maize);
  --marsal-color-textOnBrand: var(--marsal-color-white);
  --marsal-color-textAccentOnBrand: var(--marsal-color-maize);
  --marsal-color-textOnInteractive: var(--marsal-color-white);
  --marsal-color-textOnAccent: var(--marsal-color-blue);
  --marsal-color-link: var(--marsal-color-arboretumBlue-300);
  --marsal-color-linkOnBrand: var(--marsal-color-white);
  --marsal-color-borderSubtle: var(--marsal-color-pumaBlack-700);
  --marsal-color-borderDefault: var(--marsal-color-pumaBlack-500);
  --marsal-color-borderControl: var(--marsal-color-pumaBlack-400);
  --marsal-color-borderInteractive: var(--marsal-color-arboretumBlue-300);
  --marsal-color-borderAccent: var(--marsal-color-maize);
  --marsal-color-dividerAccent: var(--marsal-color-maize);
  --marsal-color-focusRing: var(--marsal-color-blue);
  --marsal-color-focusRingContrast: var(--marsal-color-white);
  --marsal-color-surfaceControl: var(--marsal-color-pumaBlack-800);
  --marsal-color-textControl: var(--marsal-color-pumaBlack-100);
  --marsal-color-surfaceControlDisabled: var(--marsal-color-pumaBlack-900);
  --marsal-color-textControlDisabled: var(--marsal-color-pumaBlack-400);
  --marsal-color-borderControlDisabled: var(--marsal-color-pumaBlack-500);
  --marsal-color-surfaceStatusSuccess: var(--marsal-color-rackhamRoofGreen-900);
  --marsal-color-textStatusSuccess: var(--marsal-color-rackhamRoofGreen-200);
  --marsal-color-borderStatusSuccess: var(--marsal-color-rackhamRoofGreen-400);
  --marsal-color-surfaceStatusWarning: var(--marsal-color-maize-900);
  --marsal-color-textStatusWarning: var(--marsal-color-maize-100);
  --marsal-color-borderStatusWarning: var(--marsal-color-maize-400);
  --marsal-color-surfaceStatusError: var(--marsal-color-tappanRed-900);
  --marsal-color-textStatusError: var(--marsal-color-tappanRed-200);
  --marsal-color-borderStatusError: var(--marsal-color-tappanRed-400);
  --marsal-color-surfaceStatusInfo: var(--marsal-color-arboretumBlue-900);
  --marsal-color-textStatusInfo: var(--marsal-color-arboretumBlue-200);
  --marsal-color-borderStatusInfo: var(--marsal-color-arboretumBlue-400);
}

/* Shared content widths. */

:root {
  --marsal-length-contentWidth-veryNarrow: 31.25rem;
  --marsal-length-contentWidth-narrow: 48.125rem;
  --marsal-length-contentWidth-standard: 53.125rem;
  --marsal-length-contentWidth-wide: 63.75rem;
  /* Content width of the BehaviourSOE theme's navigation bar at its widest: 1200px minus two 15px gutters. */
  --marsal-length-contentWidth-veryWide: 1170px;

  /* Divider thickness, independent of the content widths above. */
  --marsal-length-dividerAccent: 4px;

  /*
   * Page lane: the distance from the page edge to the content of the
   * BehaviourSOE theme's navigation bar, so components line up with it.
   */
  /* The navigation bar's gutter and outer width; the width steps up at the theme's breakpoints below. */
  --marsal-length-navGutter: 15px;
  --marsal-length-navWidth: 100vw;
  /* Page edge to navigation content, measured by the element that pads: exact, because 100% resolves on that element. */
  --marsal-length-pageLane: max(var(--marsal-length-navGutter), calc((100% - var(--marsal-length-navWidth)) / 2 + var(--marsal-length-navGutter)));
  /* The same distance measured from the viewport, so a descendant can inherit it as a fixed length. */
  --marsal-length-pageEdge: max(var(--marsal-length-navGutter), calc((100vw - var(--marsal-length-navWidth)) / 2 + var(--marsal-length-navGutter)));
  /*
   * Page lane signals. --marsal-length-lane and --marsal-length-edge start as
   * the page-lane distance above; edgeStart and edgeEnd start at 0px. A Grid
   * pads itself by the lane and resets all four for its items; with Set column
   * count it passes the edge to the items that touch the page edge, as
   * edgeStart or edgeEnd. A Container pads by the lane plus those edges and
   * extends its background to the page edge. The components that paint a
   * background reset all four to 0px for their children; see
   * assets/css/components/background.css.
   */
  --marsal-length-lane: var(--marsal-length-pageLane);
  --marsal-length-edge: var(--marsal-length-pageEdge);
  --marsal-length-edgeStart: 0px;
  --marsal-length-edgeEnd: 0px;
}

@media (min-width: 1024px) {
  :root {
    --marsal-length-navWidth: 1100px;
  }
}

@media (min-width: 1200px) {
  :root {
    --marsal-length-navWidth: 1200px;
  }
}

/* Shared spacing roles: viewport-owned page gutter and scale-responsive section gap. */

:root,
[data-space-scale="viewport"] {
  --marsal-space-pageGutter: var(--marsal-space-xs);
  --marsal-space-sectionGap: var(--marsal-space-l-3xl);
}

[data-space-scale="container"] {
  --marsal-space-sectionGap: var(--marsal-space-l-3xl);
}

/* Coordinated typography roles. */

:root {
  /* Display. */
  --marsal-fontFamily-display-verySmall: var(--marsal-fontFamily-ramaGothic), "Arial Narrow", Arial, sans-serif;
  --marsal-fontSize-display-verySmall: var(--marsal-fontSize-3);
  --marsal-fontWeight-display-verySmall: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-display-verySmall: var(--marsal-lineHeight-veryShort);
  --marsal-letterSpacing-display-verySmall: calc(var(--marsal-letterSpacingRatio-tight) * 1em);
  --marsal-fontFamily-display-small: var(--marsal-fontFamily-ramaGothic), "Arial Narrow", Arial, sans-serif;
  --marsal-fontSize-display-small: var(--marsal-fontSize-4);
  --marsal-fontWeight-display-small: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-display-small: var(--marsal-lineHeight-veryShort);
  --marsal-letterSpacing-display-small: calc(var(--marsal-letterSpacingRatio-tight) * 1em);
  --marsal-fontFamily-display-standard: var(--marsal-fontFamily-ramaGothic), "Arial Narrow", Arial, sans-serif;
  --marsal-fontSize-display-standard: var(--marsal-fontSize-5);
  --marsal-fontWeight-display-standard: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-display-standard: var(--marsal-lineHeight-veryShort);
  --marsal-letterSpacing-display-standard: calc(var(--marsal-letterSpacingRatio-tight) * 1em);
  --marsal-fontFamily-display-large: var(--marsal-fontFamily-ramaGothic), "Arial Narrow", Arial, sans-serif;
  --marsal-fontSize-display-large: var(--marsal-fontSize-6);
  --marsal-fontWeight-display-large: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-display-large: var(--marsal-lineHeight-veryShort);
  --marsal-letterSpacing-display-large: calc(var(--marsal-letterSpacingRatio-tight) * 1em);
  --marsal-fontFamily-display-veryLarge: var(--marsal-fontFamily-ramaGothic), "Arial Narrow", Arial, sans-serif;
  --marsal-fontSize-display-veryLarge: var(--marsal-fontSize-7);
  --marsal-fontWeight-display-veryLarge: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-display-veryLarge: var(--marsal-lineHeight-veryShort);
  --marsal-letterSpacing-display-veryLarge: calc(var(--marsal-letterSpacingRatio-tight) * 1em);

  /* Heading. */
  --marsal-fontFamily-heading-verySmall: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-heading-verySmall: var(--marsal-fontSize-1);
  --marsal-fontWeight-heading-verySmall: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-heading-verySmall: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-heading-verySmall: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-heading-small: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-heading-small: var(--marsal-fontSize-2);
  --marsal-fontWeight-heading-small: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-heading-small: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-heading-small: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-heading-standard: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-heading-standard: var(--marsal-fontSize-3);
  --marsal-fontWeight-heading-standard: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-heading-standard: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-heading-standard: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-heading-large: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-heading-large: var(--marsal-fontSize-4);
  --marsal-fontWeight-heading-large: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-heading-large: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-heading-large: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-heading-veryLarge: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-heading-veryLarge: var(--marsal-fontSize-5);
  --marsal-fontWeight-heading-veryLarge: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-heading-veryLarge: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-heading-veryLarge: calc(var(--marsal-letterSpacingRatio-standard) * 1em);

  /* Title. */
  --marsal-fontFamily-title-verySmall: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-title-verySmall: var(--marsal-fontSize-0);
  --marsal-fontWeight-title-verySmall: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-title-verySmall: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-title-verySmall: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-title-small: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-title-small: var(--marsal-fontSize-1);
  --marsal-fontWeight-title-small: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-title-small: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-title-small: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-title-standard: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-title-standard: var(--marsal-fontSize-2);
  --marsal-fontWeight-title-standard: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-title-standard: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-title-standard: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-title-large: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-title-large: var(--marsal-fontSize-3);
  --marsal-fontWeight-title-large: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-title-large: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-title-large: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-title-veryLarge: var(--marsal-fontFamily-ibmPlexSerif), Georgia, serif;
  --marsal-fontSize-title-veryLarge: var(--marsal-fontSize-4);
  --marsal-fontWeight-title-veryLarge: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-title-veryLarge: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-title-veryLarge: calc(var(--marsal-letterSpacingRatio-standard) * 1em);

  /* Body. */
  --marsal-fontFamily-body-verySmall: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-body-verySmall: var(--marsal-fontSize--2);
  --marsal-fontWeight-body-verySmall: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-body-verySmall: var(--marsal-lineHeight-standard);
  --marsal-letterSpacing-body-verySmall: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-body-small: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-body-small: var(--marsal-fontSize--1);
  --marsal-fontWeight-body-small: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-body-small: var(--marsal-lineHeight-standard);
  --marsal-letterSpacing-body-small: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-body-standard: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-body-standard: var(--marsal-fontSize-0);
  --marsal-fontWeight-body-standard: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-body-standard: var(--marsal-lineHeight-standard);
  --marsal-letterSpacing-body-standard: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-body-large: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-body-large: var(--marsal-fontSize-1);
  --marsal-fontWeight-body-large: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-body-large: var(--marsal-lineHeight-standard);
  --marsal-letterSpacing-body-large: calc(var(--marsal-letterSpacingRatio-standard) * 1em);
  --marsal-fontFamily-body-veryLarge: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-body-veryLarge: var(--marsal-fontSize-2);
  --marsal-fontWeight-body-veryLarge: var(--marsal-fontWeight-regular);
  --marsal-lineHeight-body-veryLarge: var(--marsal-lineHeight-standard);
  --marsal-letterSpacing-body-veryLarge: calc(var(--marsal-letterSpacingRatio-standard) * 1em);

  /* Label. */
  --marsal-fontFamily-label-verySmall: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-label-verySmall: var(--marsal-fontSize--2);
  --marsal-fontWeight-label-verySmall: var(--marsal-fontWeight-semiBold);
  --marsal-lineHeight-label-verySmall: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-label-verySmall: calc(var(--marsal-letterSpacingRatio-loose) * 1em);
  --marsal-fontFamily-label-small: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-label-small: var(--marsal-fontSize--1);
  --marsal-fontWeight-label-small: var(--marsal-fontWeight-semiBold);
  --marsal-lineHeight-label-small: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-label-small: calc(var(--marsal-letterSpacingRatio-loose) * 1em);
  --marsal-fontFamily-label-standard: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-label-standard: var(--marsal-fontSize-0);
  --marsal-fontWeight-label-standard: var(--marsal-fontWeight-semiBold);
  --marsal-lineHeight-label-standard: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-label-standard: calc(var(--marsal-letterSpacingRatio-loose) * 1em);
  --marsal-fontFamily-label-large: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-label-large: var(--marsal-fontSize-1);
  --marsal-fontWeight-label-large: var(--marsal-fontWeight-semiBold);
  --marsal-lineHeight-label-large: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-label-large: calc(var(--marsal-letterSpacingRatio-loose) * 1em);
  --marsal-fontFamily-label-veryLarge: var(--marsal-fontFamily-ibmPlexSans), Arial, sans-serif;
  --marsal-fontSize-label-veryLarge: var(--marsal-fontSize-2);
  --marsal-fontWeight-label-veryLarge: var(--marsal-fontWeight-semiBold);
  --marsal-lineHeight-label-veryLarge: var(--marsal-lineHeight-short);
  --marsal-letterSpacing-label-veryLarge: calc(var(--marsal-letterSpacingRatio-loose) * 1em);

  /* Emphasis weights: bolder words inside any role. The same in every theme. */
  --marsal-fontWeight-emphasis: var(--marsal-fontWeight-semiBold);
  --marsal-fontWeight-emphasisStrong: var(--marsal-fontWeight-bold);
}

/* Elevation shadows generated with https://www.joshwcomeau.com/shadow-palette/. */

:root {
  --marsal-color-shadow: hsl(210deg 100% 5%);
  --marsal-shadow-elevation-low:
    0.3px 0.5px 0.7px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    0.4px 0.8px 1px -1.2px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    1px 2px 2.5px -2.5px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent);
  --marsal-shadow-elevation-medium:
    0.3px 0.5px 0.7px color-mix(in srgb, var(--marsal-color-shadow) 36%, transparent),
    0.8px 1.6px 2px -0.8px color-mix(in srgb, var(--marsal-color-shadow) 36%, transparent),
    2.1px 4.1px 5.2px -1.7px color-mix(in srgb, var(--marsal-color-shadow) 36%, transparent),
    5px 10px 12.6px -2.5px color-mix(in srgb, var(--marsal-color-shadow) 36%, transparent);
  --marsal-shadow-elevation-high:
    0.3px 0.5px 0.7px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    1.5px 2.9px 3.7px -0.4px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    2.7px 5.4px 6.8px -0.7px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    4.5px 8.9px 11.2px -1.1px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    7.1px 14.3px 18px -1.4px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    11.2px 22.3px 28.1px -1.8px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    17px 33.9px 42.7px -2.1px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent),
    25px 50px 62.9px -2.5px color-mix(in srgb, var(--marsal-color-shadow) 34%, transparent);
  /*
   * The legacy navigation shadow, cast across the top of a component from the
   * inside. BehaviourSOE paints it over the homepage hero from the navbar's
   * 1024px breakpoint as a 78px gradient, 70% black at the top edge to clear at
   * the bottom, in `assets/css/base/base.css` under `.pge-ful-wdt … :after`.
   * One inset layer gives the same profile: offset minus spread puts the shadow
   * edge 20px inside the top, the 70px blur fades it over the same distance as
   * the gradient, and the spread keeps the other three edges clear. Narrower
   * viewports get the mobile navigation, which casts no shadow.
   */
  --marsal-shadow-header: none;
}

@media (min-width: 1024px) {
  :root {
    --marsal-shadow-header: inset 0 140px 70px -120px var(--marsal-color-shadow);
  }
}