/* ==================================================================
  CSS Boilerplate
  The Unlicense <https://unlicense.org>
  https://github.com/MattMcAdams/CSS-Boilerplate
================================================================== */

/** -----------------------------------------------------------------
  * SECTION TOKENS
  * font: font-style font-variant font-weight font-size/line-height font-family; }
------------------------------------------------------------------ */

:root {
  /* Fonts */
  --font-body: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: inherit;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  /* --font-icon: null; */

  --text-color: #2D2F34;
  --heading-color: inherit;
  --light-text-color: #707682;
  --link-color: #000000;
  --link-color-alt: #0263BC;
  --ins-background: #E6F7EB;
  --del-background: #FFE6E6;
  --mark-background: #FFF9E6;
  --page-background: white;
  --element-background: #F0F1F3;
  --accent-color: var(--link-color);
  --invalid-color: #DC2F2F;

  /* Colors */
  /* --color-gray-100: #F0F1F3; */
  /* --color-gray-500: #707682; */
  /* --color-gray-900: #2D2F34; */
  /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/707682/112/118/130/white */
  /* --color-red-100: #FFE6E6; */
  /* --color-red-500: #DC2F2F; */
  /* --color-red-900: #551616; */
  /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/DC2F2F/220/47/47/white */
  /* --color-yellow-100: #FFF9E6; */
  /* --color-yellow-500: #D08200; */
  /* --color-yellow-900: #4F3304; */
  /* https://hihayk.github.io/scale/#4/4/60/90/0/-10/50/-10/D08200/208/130/0/white */
  /* --color-green-100: #E6F7EB; */
  /* --color-green-500: #00883E; */
  /* --color-green-900: #033419; */
  /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/00883E/0/136/62/white */
  /* --color-primary-100: #E6F1FF; */
  /* --color-primary-500: #0074E0; */
  /* --color-primary-900: #052E55; */
  /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/0074E0/0/116/224/white */

  /* Spacing */
  --content-width: 55rem; /* 880px */
  --sidebar-width: 15rem; /* 240px */

  /* --------------------------------------------------------------------------
   * Size table using 8pt grid
   * PX       REM         STEP
   * :----    :-------    :-----
   * 4px      0.25rem     0.5
   * 8px      0.5rem      1
   * 12px     0.75rem     1.5
   * 16px     1rem        2
   * 18px     1.25rem     2.5
   * 24px     1.5rem      3
   * 28px     1.75        3.5
   * 32px     2rem        4
   * 36px     2.25rem     4.5
   * 44px     2.75rem     5.5
   * 48px     3rem        6
   * 64px     4rem        8
   * 72px     4.5rem      9
   * 80px     5rem        10
   * 128px    8rem        16
  -------------------------------------------------------------------------- */

  --sp_0: 0.25rem;    /* 4px     utility to substitute 0 margins to add some polish */
  --sp_1: 0.5rem;     /* 8px     utility for tight paddings etc */
  --sp_2: 1rem;       /* 16px    1/2 line height, for closely related elements */
  --sp_4: 2rem;       /* 32px    1 line height, for related elements */
  --sp_8: 4rem;       /* 64px    2 line heights, for loosely related elements */
  --sp_16: 8rem;      /* 128px   4 line heights, for unrelated elements */

  --flow-space: var(--sp_4);
  --gutter: var(--sp_2);
  --section-space: var(--sp_16);

  /* Modular Scale */
  --typeset_-1: 1rem/1.5rem var(--font-body);       /* 16px/24px */
  --typeset_0: 1.25rem/2rem var(--font-body);       /* 18px/32px */
  --typeset_1: 1.5rem/2rem var(--font-body);        /* 24px/32px */
  --typeset_2: 2rem/2.5rem var(--font-body);    /* 36px/44px */
  --typeset_3: 2.5rem/3rem var(--font-body);        /* 48px/56px */
  --typeset_4: 3rem/3rem var(--font-body);      /* 72px/72px */
  --typeset_5: 5rem/5rem var(--font-body);          /* 80px/80px */
}
@media (min-width: 55rem) {
  :root {
    --typeset_-1: 1rem/1.5rem var(--font-body);       /* 16px/24px */
    --typeset_0: 1.25rem/2rem var(--font-body);       /* 18px/32px */
    --typeset_1: 1.5rem/2rem var(--font-body);        /* 24px/32px */
    --typeset_2: 2.25rem/2.75rem var(--font-body);    /* 36px/44px */
    --typeset_3: 3rem/3.5rem var(--font-body);        /* 48px/56px */
    --typeset_4: 6.5rem/6.5rem var(--font-body);      /* 72px/72px */
    --typeset_5: 8rem/8rem var(--font-body);          /* 80px/80px */
  }
}

/* END !SECTION TOKENS */