/**
 * Design system
 * Using Bloom as a foundation
 * https://github.com/tomorrowstudio/bloom
 */

/* Import Bloom */
@import "@tomorrow/bloom/bloom.css";

:root {
  /* Typography */
  --font-family-default: sans-serif;

  /* Colors */
  --color-primary: var(--color-black);
  --color-text: var(--color-black);

  /* Layout — Grids*/
  --content-max-width: 80rem;
  --page-gutter: 8vw;
  --page-gutter-offset: -8vw;
  --content-grid: minmax(var(--page-gutter), 1fr)
    minmax(0, var(--content-max-width)) minmax(var(--page-gutter), 1fr);
  --grid-gap: 4rem;
  --grid-offset: calc(0px - var(--grid-gap));

  /* Layout — Constants */
  --section-gutter: 6rem;
  --section-gutter-double: calc(var(--section-gutter) * 2);

  /* Mobile values */
  @media (max-width: 45em) {
    --section-gutter: 4rem;
  }

}