:root {
  /**
  * Colours
  */

  --colour-primary: #7a4f2d;
  --colour-primary-dark: #4e2e14;
  --colour-primary-darker: #3e2510;

  --colour-bg-page: #ffffff;
  --colour-bg-subtle: #f7f4f0;
  --colour-bg-card: #ffffff;

  --colour-border: #edebe6;
  --colour-border-strong: #c8a882;

  --colour-text-body: #2c2c2a;
  --colour-text-on-dark: #ffffff;
  --colour-text-on-dark-muted: rgba(255, 255, 255, 0.6);

  /**
  * Spacing
  */
  --spacing-site-gutter: 1.5rem;

  @media (min-width: 768px) {
    --spacing-site-gutter: 4rem;
  }

  @media (min-width: 1024px) {
    --spacing-site-gutter: 7.5rem;
  }

  /**
  * Fonts
  */
  --font-size-body: 0.875rem;
  --line-height-body: 1.625rem;
}