:root {
  /* Primary palette */
  --black: #0D1C22;
  --dark: #1A3844;
  --g4: #5A7084;
  --g3: #91A9BD;
  --g2: #C8D4DE;
  --g1: #ECF0F1;
  --orange: #FF4D11;
  --yellow: #FFEC00;

  /* Tertiary palette */
  --t-red: #E53935;
  --t-blue: #1565C0;
  --t-teal: #0097A7;
  --t-yellow: #FFEA00;
  --t-pink: #F06292;
  --t-sky: #1F97F3;
  --t-green: #4CAF50;
  --t-amber: #FFC107;
  --t-purple: #9C27B0;
  --t-cyan-lt: #50C3F7;
  --t-lime-lt: #8BC34A;
  --t-orange: #FB8C00;
  --t-violet: #7E57C3;
  --t-cyan: #00BCD4;
  --lime: #CDDC39;
  --t-grey: #BDBDBD;
  --t-sand: #DFD5C6;
  --t-gold: #BF9B68;
  --t-brown: #795548;

  /* Layout */
  --max-w: 1160px;
  --gutter: 40px;

  /* Type */
  --font: 'Open Sans', sans-serif;

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 36px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
}