/* system.css / settings
-------------------------------
http://francoisromain.github.io/postcss-structure
*/

:root {
  /* Colors        ------------------------------- */
  --color-text: #666;
  --color-bg: white;
  --color-transparent: rgba(248, 247, 243, 0);
  --color-inverse: #3d3d35;
  --color-neutral: #bcb9af;
  --color-alt: #f0f0e8;
  --color-highlight: rgb(255, 0, 98);
  --color-brand: rgb(255, 95, 0);
  --color-error: #e82239;
  --color-warning: #ff891c;
  --color-info: #5798aa;
  --color-success: #6ea040;

  /* Base units    ------------------------------- */

  /* font-size: 1rem = 16 px */
  --base-font-size: 1rem;

  /* base: 1.5rem = 24 px */
  --unit: 1.5rem;

  /* line: 0.0625rem = 1px */
  --unit-line: calc(var(--unit) / 24);

  /* xxs: 0.1875rem = 3px */
  --unit-xxs: calc(var(--unit) / 8);

  /* xs: 0.375rem = 6px */
  --unit-xs: calc(var(--unit) / 4);

  /* s: 0.75rem = 12px */
  --unit-s: calc(var(--unit) / 2);

  /* m: 1.125rem = 18px */
  --unit-m: calc(var(--unit) * 3 / 4);

  /* l: 2.25rem = 36 px */
  --unit-l: calc(var(--unit) * 3 / 2);

  /* xl: 3rem = 48px */
  --unit-xl: calc(var(--unit) * 2);

  /* xxl: 3.75rem = 60 px */
  --unit-xxl: calc(var(--unit) * 2.5);

  /*  */
  --unit-infinity: 9999px;

  /* Lists         ------------------------------- */
  --list-postfix: ',';
  --list-prefix: '―';

  /* Grid          ------------------------------- */

  /*
  postcss-grid-system configuration
  https://github.com/francoisromain/postcss-grid-system#configuration
  */

  /* width of a single bloc in rem */
  --col-width: 20.5rem;

  /* width of the gutter in rem */
  --gutter: var(--unit-l);

  /* padding of the main container in rem */
  --container-padding: var(--unit-l);

  /* transition */
  --transition: opacity 0.5s, background-color 0.5s, border 0.5s,
    box-shadow 0.5s, fill 0.5s;

  /* hr */
  --border-color: var(--color-alt);
  --border-width: var(--unit-line);
}

/* media queries: x * col-width + gutter */
@custom-media --viewport-mobile (min-width: 22em);
@custom-media --viewport-tablet (min-width: 47.75em);
@custom-media --viewport-desktop (min-width: 70.5em);
@custom-media --viewport-large (min-width: 93.25em);