/*
  FuelChief look, layer 1 (FC-1, the AG-2 way): the old site's colours and type (port capture: site.json styles and
  the CSS bundle) written as master's token names (css/tokens.css), loaded after master's tokens by
  Code/SiteStyles/FuelChiefLook.cs. Navy #2d3141, red #da2031 (darker #c4161c on hover), greys #fafafa, #e1dfdf,
  #eeeeee; body #212529 in Montserrat 20/30 px, headings Montserrat 800.
*/
:root {
  --c-white: #ffffff;
  --c-black: #222123;
  --c-ink: #212529;
  --c-grey-700: #5c5f6a;
  --c-grey-300: #c9c8c8;
  --c-grey-200: #e1dfdf;
  --c-grey-100: #fafafa;
  --c-brand: #2d3141;
  --c-brand-tint: #f3f3f5;
  --c-brand-soft: #e1dfdf;
  --c-accent: #da2031;
  --fc-navy: #2d3141;
  --fc-red: #da2031;
  --fc-red-dark: #c4161c;
  --fc-grey: #eeeeee;

  --color-heading: var(--fc-navy);
  --color-link: var(--fc-red);
  --color-link-hover: var(--fc-red-dark);
  --color-focus: var(--fc-navy);
  --color-eyebrow: var(--fc-navy);

  --font-body: "Montserrat", sans-serif;
  --font-display: "Montserrat", sans-serif;
  --fw-heading: 800;
  --fs-display: 4.0625rem;                           /* 65 px hero titles; 46 px below 576 px */
  --fs-h1: 4.0625rem;
  --fs-h2: 2.1875rem;                                /* 35 px; 32 px below 1200 px, 26 px below 768 px */
  --fs-h3: 1.375rem;                                 /* 22 px */
  --fs-h4: 1.125rem;                                 /* 18 px card titles */
  --fs-body-lg: 1.25rem;                             /* 20 px lead text */
  --fs-body: 1rem;                                   /* 16/20 px, weight 500 */
  --fs-body-sm: 0.875rem;                            /* 14/17.5 px card text */
  --fs-label: 1rem;                                  /* 16 px eyebrows, weight 800 */
  --fw-body: 500;
  --lh-display: 1.15;
  --lh-heading: 1.15;
  --lh-body: 1.25;
  --ls-label: -0.02em;

  /* The old site's spacing (capture raw/bundle.css "section, .panel"): bands 150 px top and bottom, 100 px at the sides,
     smaller at each Bootstrap step below; the content runs the full width between the sides (no column limit). */
  --section-space: 150px;
  --page-gutter: 100px;
  --container-max: none;
  --container-text: 60rem;

  --radius-card: 0;
  --radius-media: 0;
  /* Buttons as the old .btn.btn-secondary: 13 px capitals, 15 px padding, 3 px corners, 1 px grey border on a navy wash
     (light grey on white, darker on navy), words in the band's heading colour; red on hover. */
  --btn-font: var(--font-body);
  --btn-fs: 0.8125rem;
  --btn-fw: 700;
  --btn-radius: 3px;
  --btn-padding: 15px;
  --btn-1-bg: rgba(45, 49, 65, 0.25);
  --btn-1-fg: var(--color-heading);
  --btn-1-border: #7c868d;
  --btn-1-hover-bg: var(--fc-red);
  --btn-1-hover-fg: #eeeeee;
  --btn-2-bg: rgba(45, 49, 65, 0.25);
  --btn-2-fg: var(--color-heading);
  --btn-2-border: #7c868d;
  --btn-2-hover-bg: var(--fc-red);
  --btn-2-hover-fg: #eeeeee;
  --eyebrow-font: var(--font-body);
  --eyebrow-fs: 1rem;
  --eyebrow-fw: 800;
  --eyebrow-ls: -2%;
  --eyebrow-color: var(--color-eyebrow);
  --motion-fast: 0.3s;

  /* Section colours: Page white, Light pale grey, Muted the capability grey, Dark and Darkest the navy, Accent red. */
  --theme-light-bg: var(--c-grey-100);
  --theme-light-eyebrow: var(--fc-navy);
  --theme-muted-bg: var(--c-grey-100);
  --theme-muted-heading: var(--fc-navy);
  --theme-muted-eyebrow: var(--fc-navy);
  --theme-dark-bg: var(--fc-navy);
  --theme-dark-eyebrow: #eeeeee;
  --theme-deep-bg: var(--fc-navy);
  --theme-deep-text: #e1dfdf;
  --theme-deep-heading: #eeeeee;
  --theme-deep-eyebrow: #eeeeee;
  --theme-accent-bg: var(--fc-red);
  --theme-accent-text: var(--c-white);
  --theme-accent-heading: var(--c-white);
  --theme-accent-link: var(--c-white);
  --theme-accent-focus: var(--c-white);
  --theme-accent-eyebrow: var(--c-white);
  --gallery-viewer-over: var(--fc-navy);
}
@media (max-width: 1199.98px) { :root { --section-space: 100px; --page-gutter: 80px; --fs-h2: 2rem; --eyebrow-fs: 0.8125rem; } }
@media (max-width: 991.98px) { :root { --section-space: 75px; --page-gutter: 60px; } }
@media (max-width: 767.98px) { :root { --section-space: 50px; --page-gutter: 30px; --fs-h2: 1.625rem; } }
@media (max-width: 575.98px) { :root { --page-gutter: 15px; --fs-display: 2.875rem; --fs-h1: 2.875rem; } }
/* FC-FIX6 (FC-MFIX6 M-FIX2-2): the size tables' Table size Compact fills the column as the old (width 100%), with the
   old 16 x 20 px cells. */
:root { --text-table-compact-width: 100%; --text-table-compact-pad: 16px 20px; }