CSS変数（正確にはCSSカスタムプロパティ）についてざっくりと。

サイト幅

:root	{
	--site-width: 1000px;
	--site-width-padding: 40px;
	--scroll-bar-width: 17px;
	--site-width-media-query: 1057px;
}

• コンテンツ領域 = 1000px
• ブラウザ端からコンテンツ領域までの余白が40px（左右20pxづつ）
• スクロールバーを常に表示しているのでその幅17px
• これらをひっくるめた幅が1057px

これらと、以下のメディアクエリ

• PCのブレークポイント769px
• 横スクロールなしで表示できる幅1057px

を組み合わせています。

変更例

コンテンツ領域を1200pxにしたい場合は、

:root	{
	--site-width: 1200px;
	--site-width-padding: 40px;
	--scroll-bar-width: 17px;
	--site-width-media-query: 1257px;
}

となります。

※common.cssとサイトごとの固有cssの2カ所に記述しています。

他は色やウェイト

color、font-weight程度しか使っていません。任意に追加してください。