/*----------------------------------------------*\
    VARIABLES
	=========

	@package yaybrigade

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package yaybrigade

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Breakpoints */
/*
 *
 * ANCHOR Responsive Text Sizes 
------------------------------------------------*/
:root {
  /* Minor Third (factor: 1.2)*/
  --size-010: .193rem;
  --size-020: .232rem;
  --size-030: .279rem;
  --size-040: .334rem;
  --size-050: .4rem;
  --size-060: .482rem;
  --size-070: .579rem;
  --size-080: .694rem;
  --size-090: .833rem;
  --size-100: 1rem; /* <-- Default */
  --size-200: 1.2rem;
  --size-300: 1.44rem;
  --size-400: 1.728rem;
  --size-500: 2.074rem;
  --size-600: 2.488rem;
  --size-700: 2.986rem;
  --size-800: 3.583rem;
  --size-900: 4.299rem;
}
@media screen and (min-width: 27rem) {
  :root {
    font-size: 1.05rem;
  }
}
@media screen and (min-width: 36rem) {
  :root {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 48rem) {
  :root {
    font-size: 1.15rem;
  }
}
@media screen and (min-width: 64rem) {
  :root {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 77rem) {
  :root {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 94rem) {
  :root {
    font-size: 1.3rem;
  }
}

/*
 *
 * ANCHOR Colors 
------------------------------------------------*/
/*
 *
 * ANCHOR Margins & Padding
------------------------------------------------*/
:root {
  --margin-wrapper-outer: var(--size-070);
  --margin-section-vertical: var(--size-600);
}
@media screen and (min-width: 23rem) {
  :root {
    --margin-wrapper-outer: var(--size-100);
  }
}
@media screen and (min-width: 48rem) {
  :root {
    --margin-wrapper-outer: var(--size-500);
    --margin-section-vertical: var(--size-700);
  }
}
@media screen and (min-width: 64rem) {
  :root {
    --margin-wrapper-outer: var(--size-700);
    --margin-section-vertical: var(--size-800);
  }
}

/*
 *
 * ANCHOR Max-Widths
------------------------------------------------*/
:root {
  --wrapper-max-width: 80rem;
}