:root {
  // font families
  --font-main: 'Avenir Next', 'Avenir', sans-serif;
  --font-serif: 'p22-mackinac-pro', serif;

  --font-size-caption: .8rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.4rem;
  --font-size-h2: 1.8rem;
  --font-size-h1: 2.4rem;


  // colors

  // color palette
  --color-deepBrick: rgb(114, 3, 40);
  --color-neufPink: rgb(205, 150, 171);
  --color-betongGray: rgb(229, 226, 215);
  --color-goldenOrange: rgb(255, 105, 21);
  --color-goldenBeige: rgb(248, 188, 144);
  --color-chateauBlue: rgb(10, 15, 109);
  --color-white: #fff;
  --color-black: rgb(22, 21, 22);

  // additional colors adjusted for web
  --color-betongGray-darkened: rgb(220, 216, 204);

  // colors in use
  --color-text: var(--color-chateauBlue);
  --color-background: var(--color-betongGray);
  --color-background-secondary: var(--color-betongGray-darkened);
  --color-cta-background: var(--color-goldenOrange);
  --color-cta-text: var(--color-black);
  --color-placeholder: var(--color-neufPink);

  // spacing
  --spacing-sitepadding: 2rem;
  --spacing-gap-column: 2rem;
  --spacing-gap-row: 1.5rem;
  --spacing-section-bottom: 3rem;

  // animations
  --transition-easing: .3s ease;

  --border: 1px solid var(--color-neufPink);
}