:root {
  // font families
  --font-main: 'AvenirNextMedium', 'Avenir Next', 'Avenir', sans-serif;
  --font-main-medium: 'AvenirNextMedium', 'Avenir Next', 'Avenir', sans-serif;
  --font-main-demi: 'AvenirNextDemi', 'Avenir Next', 'Avenir', sans-serif;
  --font-main-bold: 'AvenirNextBold', 'Avenir Next', 'Avenir', sans-serif;
  --font-main-italic: 'AvenirNextRegularItalic', 'Avenir Next', 'Avenir', sans-serif;
  --font-main-medium-italic: 'AvenirNextMediumItalic', 'Avenir Next', 'Avenir', sans-serif;
  --font-main-demi-italic: 'AvenirNextDemiItalic', 'Avenir Next', 'Avenir', sans-serif;
  --font-main-bold-italic: 'AvenirNextBoldItalic', '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-chateauBlue-05: rgba(10, 15, 109, .5);
  --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);
  --color-menu-text: var(--color-deepBrick);
  --color-menu-background: var(--color-goldenBeige);

  // spacing
  --spacing-sitepadding-block: 2rem;
  --spacing-sitepadding-inline: 2rem;
  --spacing-gap-column: var(--spacing-sitepadding-block);
  --spacing-gap-row: calc(var(--spacing-gap-column)*-.25);
  --spacing-xs: .5rem;
  --spacing-s: 1rem;
  --spacing-m: 2rem;
  --spacing-l: 3rem;
  --spacing-xl: 6rem;
  --spacing-section-bottom: var(--spacing-l);

  // sizes
  --size-width-p: 36rem;
  --size-icon: 1em;
  --size-icon-circle: 2.4rem;
  --size-icon-large: 3.4rem;

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

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

@media (min-width: 1400px) {
  :root {
    --spacing-sitepadding-block: 2.5rem;
    --spacing-sitepadding-inline: 6rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --spacing-sitepadding-block: 3rem;
    --spacing-sitepadding-inline: 10rem;
  }
}