/* ========================================================= */
/* Variables
/* ========================================================= */

:root {

  /* Breakpoints */
  /* Unfortunately these don't work in media queries
  def: 0;
  sm: 30em;
  md: 54em;
  lg: 64em;
  xl: 90em;
  */

  /* Colors */
  --white:    #ffffff;
  --greige1:  #fafbf8;
  --greige2:  #f2f1ec;
  --greige3:  #eeede7;
  --greige4:  #c7c5be;
  --gray1:    #979496;
  --gray2:    #525051;
  --black:    #231f20;
  --red1:     #ff5442;
  --red2:     #db5144;

  /* Sizes */
  --s0: 0.125rem;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 2rem;
  --s5: 4rem;
  --s6: 8rem;
  --s7: 16rem;

  /* Radii */
  --r-rounded: 4px;

  /* Font stacks */
  --sans-serif: futura-pt, helvetica, arial, sans-serif;
  --serif: ff-tisa-web-pro, georgia, serif;
  --icon: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro';

  /* Line heights */
  --lh-single: 1;
  --lh-heading: 1.2;
  --lh-body: 1.75;
  --lh-double: 2;

  /* Font sizes */
  --fs0: 0.875rem;
  --fs1: 1rem;
  --fs2: 1.125rem;
  --fs3: 1.25rem;
  --fs4: 1.75rem;
  --fs5: 2.25rem;
  --fs6: 2.5rem;

  /* Letter spacings */
  --lh-condensed: -0.0125em;
  --lh-extended: 0.08em;

  /* Layout */
  --gutter: 0.5em;
  --sidebar-width: 320px;
}

/* ========================================================= */