@layer tenant {
  :root {
    --font-body: "GothamHTF", sans-serif;
    --font-header: "GothamHTF", sans-serif;
  }

  :where(.font-header) {
    font-weight: bold;
  }

  body {
    font-family: var(--font-body);
    font-weight: 300;
  }

  h1,
  h2,
  h3 {
    font-weight: bold;

    header & {
      color: hsl(var(--secondary));
    }
  }

  /* #app-nav { */
  /*   display: grid; */

  /*   grid-template-areas: */
  /*   "logo cart-icon" */
  /*   "links links"; */
  /*   grid-template-columns: 1fr 1fr; */
  /*   grid-template-rows: 1fr 1fr; */

  /*   @media (min-width: 48rem) { */
  /*     grid-template-areas: */
  /*     "logo links cart-icon"; */
  /*     grid-template-columns: repeat(3, auto); */
  /*     grid-template-rows: 1fr; */

  /*     justify-content: space-between; */
  /*   } */

  /*   .app-nav__links { */
  /*     grid-area: links; */
  /*     display: flex; */
  /*     flex-wrap: wrap; */
  /*     justify-content: space-between; */

  /*     >a, */
  /*     >div { */
  /*       flex: 1; */
  /*       display: flex; */
  /*       min-width: max-content; */

  /*       align-items: center; */
  /*       justify-content: center; */

  /*       &:first-child { */
  /*         justify-content: flex-start; */
  /*       } */

  /*       &:last-child { */
  /*         justify-content: flex-end; */
  /*       } */
  /*     } */
  /*   } */
  /* } */
}