@media (prefers-color-scheme: dark) {

  /* GLOBAL -------------------------------------------------------------------- */

  body {
    background: var(--body-background-dm);
    color: var(--body-font-color-dm);
  }

  a { color: var(--a-color-dm); }



  /* TYPOGRAPHY ---------------------------------------------------------------- */

  .label--testimonial { color: var(--testimonial-background-dm); }



  /* INTERACTIVE --------------------------------------------------------------- */

  .a--full-testimonial { color: var(--cloud-gray-lighter); }

  .a--gp-contact-info {
    color: var(--cloud-gray); /* c.$spanish-gray */
    /* font-weight: normal; */
  }

  .btn-cta-learn-more {
    background: var(--cta-green);
    background-image: linear-gradient(
      to bottom right, var(--cta-green-darker), #092a09
    );
    border-color: #d1d1d1;
    box-shadow: 0 0 0 3px var(--cta-green-darker);
    color: #d0cbcb;
  }

  .btn-cta-learn-more:hover {
    background: var(--cta-green-darker);
    border-color: #dbd7d7;
    box-shadow:
      0 0 0 3px var(--grass),
      3px 3px 9px 3px rgba(0, 0, 0, 0.3);
    color: #dbd7d7;
  }

  /* #TODO: fix this;
     give <a>s in the nav a class, e.g. .a-nav, and
     do not set/override F6's $anchor-color nor $anchor-color-hover
     i.e. use our own a {}, and a:hover {} instead */
  /* was nav.show-for-medium a:hover */
  nav.nav--desktop a:not(.current):hover {
    color: #ffa216; /* tad lighter than var(--a-color-hover) (= var(--mandarin)) */
    text-shadow: 2px 4px 6px black; /* #2d2d2d */
  }
  a.current:hover {
    color: var(--a-color-dm); /* must have along with a:not(.current):hover above */
    cursor: default;
  }

  .button--nav-burger,
  .button--nav-close {
    border-color: var(--cloud-gray-darker);
    color: var(--cloud-gray);
  }

  .current {
    background-color: #4c5969; /* #475361 */
    box-shadow: 2px 4px 6px #353535;
  }

  .span--tooltip { border-bottom-color: var(--cloud-gray); }



  /* LAYOUT -------------------------------------------------------------------- */

  .article--testimonial {
    background: var(--testimonial-background-dm);
    border-color: var(--testimonial-border-color-dm);
    box-shadow: 2px 2px 8px var(--testimonial-shadow-color-dm);
    color: var(--testimonial-color-dm);
  }

  .header--interior-pg-mobile {
    background-color: var(--body-background-dm);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.84);

    .a--gp-contact-info {
      color: var(--cloud-gray-lighter);
      /* font-weight: normal; */
    }
  }



  /* IMAGES -------------------------------------------------------------------- */

  .svg--gp-logo-desktop,
  .svg--gp-logo-index-pg,
  .svg--gp-logo--nav--mobile { filter: drop-shadow(2px 4px 6px black); }

  .g-svg--gp-logomark { fill: var(--gp-logomark-color-dm); }

  .path-svg--gp-logomark-fill-stroke-width {
    stroke: var(--gp-logomark-color-dm);
  }

  .g-svg--gp-logotype { fill: var(--gp-logotype-color-dm); }

  .g-svg--gp-tagline { fill: var(--gp-tagline-color-dm); }

  .path-svg--gp-tagline-ampresand {
    fill: var(--gp-ampresand-color-dm);
  }

  .rect-svg--nav-burger { fill: var(--cloud-gray-darker); }

  .svg--gp-logo-desktop {
    .g-svg--gp-logomark { fill: #5d80cc; }

    .path-svg--gp-logomark-fill-stroke-width { stroke: #5d80cc; }

    .g-svg--gp-logotype { fill: var(--dusty-gray); }

    .g-svg--gp-tagline { fill: #969494; }

    .path-svg--gp-tagline-ampresand { fill: #cf4b44; }
  }

  .svg--gp-logo--nav--mobile {
    .g-svg--gp-logomark { fill: #5d80cc; }

    .path-svg--gp-logomark-fill-stroke-width { stroke: #5d80cc; }
  }

  .signature-image-mf { background-image: url("/assets/signature-mf-dm-604aa635.png"); }

  .signature-image-jp { background-image: url("/assets/signature-jp-dm-19dcadbc.png"); }

  .signature-image-rk { background-image: url("/assets/signature-rk-dm-d7ce3bf6.png"); }
}